diff --git a/web/apps/web-ele/package.json b/web/apps/web-ele/package.json
index 11b8a26..9e587e1 100644
--- a/web/apps/web-ele/package.json
+++ b/web/apps/web-ele/package.json
@@ -69,10 +69,8 @@
     "element-plus": "catalog:",
     "jsbarcode": "^3.12.3",
     "nanoid": "^5.1.7",
-    "perfect-freehand": "^1.2.3",
     "pinia": "catalog:",
     "qrcode": "^1.5.4",
-    "roughjs": "^4.6.6",
     "uuid": "^13.0.0",
     "vue": "catalog:",
     "vue-qrcode-reader": "^5.7.3",
diff --git a/web/apps/web-ele/src/api/smart-table.ts b/web/apps/web-ele/src/api/smart-table.ts
deleted file mode 100644
index 887c15a..0000000
--- a/web/apps/web-ele/src/api/smart-table.ts
+++ /dev/null
@@ -1,675 +0,0 @@
-import { requestClient } from '#/api/request';
-
-const BASE = '/api/smart-table';
-
-// ==================== Types ====================
-
-export interface SmartTableItem {
-  id: string;
-  name: string;
-  icon: string;
-  type?: string;
-  parent_id?: string | null;
-  sort?: number;
-  description?: string;
-  active_view_id?: string;
-  sys_create_datetime?: string;
-  sys_update_datetime?: string;
-}
-
-export interface SmartFieldItem {
-  id: string;
-  table_id: string;
-  name: string;
-  type: string;
-  width: number;
-  visible: boolean;
-  required: boolean;
-  description?: string;
-  config: Record<string, any>;
-  sort: number;
-  sys_create_datetime?: string;
-}
-
-export interface SmartRecordItem {
-  id: string;
-  table_id: string;
-  values: Record<string, any>;
-  sys_create_datetime?: string;
-  sys_update_datetime?: string;
-  sys_creator_id?: string;
-  sys_modifier_id?: string;
-}
-
-export interface SmartViewItem {
-  id: string;
-  table_id: string;
-  name: string;
-  type: string;
-  config: Record<string, any>;
-  sort: number;
-  sys_create_datetime?: string;
-}
-
-export interface SmartTableFull extends SmartTableItem {
-  type?: string;
-  content?: any;
-  fields: SmartFieldItem[];
-  records: SmartRecordItem[];
-  views: SmartViewItem[];
-  record_total: number;
-  next_cursor: string | null;
-  has_more: boolean;
-  sys_creator_id?: string;
-  creator_name?: string;
-  creator_avatar?: string;
-}
-
-export interface CursorPaginatedRecords {
-  items: SmartRecordItem[];
-  total: number;
-  next_cursor: string | null;
-  has_more: boolean;
-}
-
-export interface RecordFilterParam {
-  field_id: string;
-  operator: string;
-  value?: any;
-}
-
-export interface RecordSortParam {
-  field_id: string;
-  direction: 'asc' | 'desc';
-}
-
-export interface RecordQueryParam {
-  filters?: RecordFilterParam[];
-  filter_logic?: 'and' | 'or';
-  sorts?: RecordSortParam[];
-  search?: string;
-  search_field_ids?: string[];
-  group_field_id?: string;
-  cursor?: string | null;
-  limit?: number;
-}
-
-export interface RecordGroupItem {
-  key: string;
-  label: string;
-  records: SmartRecordItem[];
-}
-
-export interface GroupedRecordsResponse {
-  groups: RecordGroupItem[];
-  total: number;
-}
-
-// ==================== Table API ====================
-
-export function getTableListApi(wikiSpaceId?: string | null) {
-  const params: Record<string, any> = {};
-  if (wikiSpaceId) params.wiki_space_id = wikiSpaceId;
-  return requestClient.get<SmartTableItem[]>(`${BASE}/tables`, { params });
-}
-
-export function getTableFullApi(
-  tableId: string,
-  opts?: { filters?: RecordFilterParam[]; sorts?: RecordSortParam[]; search?: string; filter_logic?: string },
-) {
-  const params: Record<string, any> = {};
-  if (opts?.filters?.length) params.filters = JSON.stringify(opts.filters);
-  if (opts?.sorts?.length) params.sorts = JSON.stringify(opts.sorts);
-  if (opts?.search) params.search = opts.search;
-  if (opts?.filter_logic) params.filter_logic = opts.filter_logic;
-  return requestClient.get<SmartTableFull>(`${BASE}/tables/${tableId}/full`, { params });
-}
-
-export function createTableApi(data: { name: string; icon?: string; description?: string; type?: string; content?: any; parent_id?: string | null; wiki_space_id?: string | null }) {
-  return requestClient.post<SmartTableItem>(`${BASE}/tables`, data);
-}
-
-export function updateTableApi(tableId: string, data: Partial<SmartTableItem>) {
-  return requestClient.put<SmartTableItem>(`${BASE}/tables/${tableId}`, data);
-}
-
-export function updateDocumentContentApi(tableId: string, content: any) {
-  return requestClient.patch(`${BASE}/tables/${tableId}/content`, { content });
-}
-
-export function exportDocumentPdfApi(tableId: string, html: string, title: string) {
-  return requestClient.post<Blob>(`${BASE}/tables/${tableId}/export-pdf`, { html, title }, {
-    responseType: 'blob',
-  });
-}
-
-export function deleteTableApi(tableId: string) {
-  return requestClient.delete(`${BASE}/tables/${tableId}`);
-}
-
-export function moveTableApi(tableId: string, parentId: string | null, afterId?: string | null) {
-  return requestClient.put<SmartTableItem>(`${BASE}/tables/${tableId}/move`, {
-    parent_id: parentId,
-    after_id: afterId ?? null,
-  });
-}
-
-// ==================== Field API ====================
-
-export function getFieldListApi(tableId: string) {
-  return requestClient.get<SmartFieldItem[]>(`${BASE}/tables/${tableId}/fields`);
-}
-
-export function createFieldApi(tableId: string, data: Omit<SmartFieldItem, 'id' | 'table_id' | 'sys_create_datetime'>) {
-  return requestClient.post<SmartFieldItem>(`${BASE}/tables/${tableId}/fields`, data);
-}
-
-export function updateFieldApi(fieldId: string, data: Partial<SmartFieldItem>) {
-  return requestClient.put<SmartFieldItem>(`${BASE}/fields/${fieldId}`, data);
-}
-
-export function deleteFieldApi(fieldId: string) {
-  return requestClient.delete(`${BASE}/fields/${fieldId}`);
-}
-
-export function reorderFieldsApi(tableId: string, fieldIds: string[]) {
-  return requestClient.put(`${BASE}/tables/${tableId}/fields/reorder`, { field_ids: fieldIds });
-}
-
-// ==================== Record API ====================
-
-export function getRecordListApi(
-  tableId: string,
-  cursor?: string | null,
-  limit = 200,
-  opts?: { filters?: RecordFilterParam[]; sorts?: RecordSortParam[]; search?: string; filter_logic?: string },
-) {
-  const params: Record<string, any> = { cursor: cursor ?? undefined, limit };
-  if (opts?.filters?.length) params.filters = JSON.stringify(opts.filters);
-  if (opts?.sorts?.length) params.sorts = JSON.stringify(opts.sorts);
-  if (opts?.search) params.search = opts.search;
-  if (opts?.filter_logic) params.filter_logic = opts.filter_logic;
-  return requestClient.get<CursorPaginatedRecords>(
-    `${BASE}/tables/${tableId}/records`,
-    { params },
-  );
-}
-
-export function queryRecordsApi(tableId: string, query: RecordQueryParam) {
-  return requestClient.post<CursorPaginatedRecords | GroupedRecordsResponse>(
-    `${BASE}/tables/${tableId}/records/query`,
-    query,
-  );
-}
-
-export function reorderRecordsApi(tableId: string, recordIds: string[]) {
-  return requestClient.put(`${BASE}/tables/${tableId}/records/reorder`, { record_ids: recordIds });
-}
-
-export function createRecordApi(tableId: string, values: Record<string, any> = {}) {
-  return requestClient.post<SmartRecordItem>(`${BASE}/tables/${tableId}/records`, { table_id: tableId, values });
-}
-
-export function updateRecordApi(recordId: string, values: Record<string, any>) {
-  return requestClient.put<SmartRecordItem>(`${BASE}/records/${recordId}`, { values });
-}
-
-export function updateCellApi(recordId: string, fieldId: string, value: any) {
-  return requestClient.patch<SmartRecordItem>(`${BASE}/records/${recordId}/cells`, {
-    field_id: fieldId,
-    value,
-  });
-}
-
-export function batchUpdateCellsApi(recordId: string, cells: Record<string, any>) {
-  return requestClient.patch<SmartRecordItem>(`${BASE}/records/${recordId}/cells/batch`, { cells });
-}
-
-export function batchUpdateMultiRecordCellsApi(
-  tableId: string,
-  updates: Array<{ record_id: string; cells: Record<string, any> }>,
-) {
-  return requestClient.patch(`${BASE}/tables/${tableId}/records/batch-cells`, { updates });
-}
-
-export function deleteRecordApi(recordId: string) {
-  return requestClient.delete(`${BASE}/records/${recordId}`);
-}
-
-export function batchDeleteRecordsApi(tableId: string, ids: string[]) {
-  return requestClient.post(`${BASE}/tables/${tableId}/records/batch-delete`, { ids });
-}
-
-// ==================== Trash / Recycle Bin ====================
-
-export interface TrashRecordItem {
-  id: string;
-  table_id: string;
-  values: Record<string, any>;
-  sys_create_datetime?: string;
-  sys_update_datetime?: string;
-  sys_creator_id?: string;
-}
-
-export function getTrashRecordsApi(tableId: string, page = 1, pageSize = 50) {
-  return requestClient.get<{ items: TrashRecordItem[]; total: number }>(
-    `${BASE}/tables/${tableId}/trash`,
-    { params: { page, page_size: pageSize } },
-  );
-}
-
-export function restoreTrashRecordsApi(tableId: string, ids: string[]) {
-  return requestClient.post(`${BASE}/tables/${tableId}/trash/restore`, { ids });
-}
-
-export function permanentDeleteTrashRecordApi(tableId: string, recordId: string) {
-  return requestClient.delete(`${BASE}/tables/${tableId}/trash/${recordId}`);
-}
-
-export function emptyTrashApi(tableId: string) {
-  return requestClient.delete(`${BASE}/tables/${tableId}/trash`);
-}
-
-export function exportTableApi(tableId: string, format: 'csv' | 'xlsx' = 'csv') {
-  return requestClient.get(`${BASE}/tables/${tableId}/export`, {
-    params: { format },
-    responseType: 'blob',
-  });
-}
-
-export function importTableApi(tableId: string, file: File) {
-  const formData = new FormData();
-  formData.append('file', file);
-  return requestClient.post(`${BASE}/tables/${tableId}/import`, formData, {
-    headers: { 'Content-Type': 'multipart/form-data' },
-  });
-}
-
-export interface RecordSearchResultItem {
-  id: string;
-  title: string;
-}
-
-export function searchRecordsApi(tableId: string, keyword: string = '', limit: number = 20) {
-  return requestClient.post<RecordSearchResultItem[]>(
-    `${BASE}/tables/${tableId}/records/search`,
-    { keyword, limit },
-  );
-}
-
-// ==================== Summary API ====================
-
-export interface SummaryResult {
-  summaries: Record<string, any>;
-  total_count: number;
-}
-
-export function getSummaryApi(
-  tableId: string,
-  data: {
-    aggregations: Record<string, string>;
-    filters?: RecordFilterParam[];
-    filter_logic?: string;
-    search?: string;
-  },
-) {
-  return requestClient.post<SummaryResult>(`${BASE}/tables/${tableId}/summary`, data);
-}
-
-// ==================== Comment API ====================
-
-export interface CommentItem {
-  id: string;
-  record_id: string;
-  user_id: string;
-  content: string;
-  mentions: string[];
-  parent_id: string | null;
-  sys_create_datetime?: string;
-  sys_update_datetime?: string;
-  user_name?: string;
-  user_avatar?: string;
-  replies: CommentItem[];
-}
-
-export function getCommentsApi(recordId: string) {
-  return requestClient.get<CommentItem[]>(`${BASE}/records/${recordId}/comments`);
-}
-
-export function createCommentApi(recordId: string, data: { content: string; mentions?: string[]; parent_id?: string }) {
-  return requestClient.post<CommentItem>(`${BASE}/records/${recordId}/comments`, data);
-}
-
-export function updateCommentApi(commentId: string, data: { content: string; mentions?: string[] }) {
-  return requestClient.put<CommentItem>(`${BASE}/comments/${commentId}`, data);
-}
-
-export function deleteCommentApi(commentId: string) {
-  return requestClient.delete(`${BASE}/comments/${commentId}`);
-}
-
-// ==================== View API ====================
-
-export function getViewListApi(tableId: string) {
-  return requestClient.get<SmartViewItem[]>(`${BASE}/tables/${tableId}/views`);
-}
-
-export function createViewApi(tableId: string, data: { name: string; type: string; config?: Record<string, any> }) {
-  return requestClient.post<SmartViewItem>(`${BASE}/tables/${tableId}/views`, { ...data, table_id: tableId });
-}
-
-export function updateViewApi(viewId: string, data: Partial<SmartViewItem>) {
-  return requestClient.put<SmartViewItem>(`${BASE}/views/${viewId}`, data);
-}
-
-export function deleteViewApi(viewId: string) {
-  return requestClient.delete(`${BASE}/views/${viewId}`);
-}
-
-// ==================== Permission API ====================
-
-export interface MyPermission {
-  role_type: string;
-  role_name: string;
-  capabilities: Record<string, boolean>;
-  field_permissions: Record<string, string>;
-  row_view_mode: string;
-  row_edit_mode: string;
-}
-
-export interface TableRole {
-  id: string;
-  table_id: string | null;
-  name: string;
-  role_type: string;
-  capabilities: Record<string, boolean>;
-  is_system: boolean;
-  sys_create_datetime?: string;
-}
-
-export interface Collaborator {
-  id: string;
-  table_id: string;
-  subject_type: string;
-  subject_id: string;
-  role_id: string;
-  role_name?: string;
-  role_type?: string;
-  subject_name?: string;
-  subject_avatar?: string;
-  sys_create_datetime?: string;
-}
-
-export interface FieldPermItem {
-  field_id: string;
-  access: string;
-}
-
-export interface FieldPermMatrix {
-  role_id: string;
-  role_name: string;
-  role_type: string;
-  fields: FieldPermItem[];
-}
-
-export interface RowRule {
-  id: string;
-  table_id: string;
-  role_id: string;
-  rule_type: string;
-  mode: string;
-  conditions: Record<string, any>[];
-}
-
-export function getMyPermissionApi(tableId: string) {
-  return requestClient.get<MyPermission>(`${BASE}/tables/${tableId}/my-permission`);
-}
-
-export function getRolesApi(tableId: string) {
-  return requestClient.get<TableRole[]>(`${BASE}/tables/${tableId}/roles`);
-}
-
-export function createRoleApi(tableId: string, data: { name: string; capabilities: Record<string, boolean> }) {
-  return requestClient.post<TableRole>(`${BASE}/tables/${tableId}/roles`, data);
-}
-
-export function updateRoleApi(tableId: string, roleId: string, data: { name?: string; capabilities?: Record<string, boolean> }) {
-  return requestClient.put<TableRole>(`${BASE}/tables/${tableId}/roles/${roleId}`, data);
-}
-
-export function deleteRoleApi(tableId: string, roleId: string) {
-  return requestClient.delete(`${BASE}/tables/${tableId}/roles/${roleId}`);
-}
-
-export function getCollaboratorsApi(tableId: string) {
-  return requestClient.get<Collaborator[]>(`${BASE}/tables/${tableId}/collaborators`);
-}
-
-export function addCollaboratorApi(tableId: string, data: { subject_type: string; subject_id: string; role_id: string }) {
-  return requestClient.post<Collaborator>(`${BASE}/tables/${tableId}/collaborators`, data);
-}
-
-export function updateCollaboratorApi(tableId: string, collabId: string, data: { role_id: string }) {
-  return requestClient.put<Collaborator>(`${BASE}/tables/${tableId}/collaborators/${collabId}`, data);
-}
-
-export function removeCollaboratorApi(tableId: string, collabId: string) {
-  return requestClient.delete(`${BASE}/tables/${tableId}/collaborators/${collabId}`);
-}
-
-export function getFieldPermissionsApi(tableId: string) {
-  return requestClient.get<FieldPermMatrix[]>(`${BASE}/tables/${tableId}/field-permissions`);
-}
-
-export function updateFieldPermissionsApi(tableId: string, data: { role_id: string; permissions: FieldPermItem[] }) {
-  return requestClient.put(`${BASE}/tables/${tableId}/field-permissions`, data);
-}
-
-export function getRowRulesApi(tableId: string) {
-  return requestClient.get<RowRule[]>(`${BASE}/tables/${tableId}/row-rules`);
-}
-
-export function updateRowRuleApi(tableId: string, data: { role_id: string; rule_type: string; mode: string; conditions: Record<string, any>[] }) {
-  return requestClient.put<RowRule>(`${BASE}/tables/${tableId}/row-rules`, data);
-}
-
-// ==================== Document Version API ====================
-
-export interface DocumentVersionItem {
-  id: string;
-  document_id: string;
-  version: number;
-  title?: string;
-  change_summary?: string;
-  content_size: number;
-  sys_create_datetime?: string;
-  sys_creator_id?: string;
-  creator_name?: string;
-  creator_avatar?: string;
-}
-
-export interface DocumentVersionDetail extends DocumentVersionItem {
-  content: Record<string, any>;
-}
-
-export interface DocumentVersionCompare {
-  version_from: DocumentVersionDetail;
-  version_to: DocumentVersionDetail;
-}
-
-export function getDocumentVersionsApi(tableId: string, page = 1, pageSize = 20) {
-  return requestClient.get<{ items: DocumentVersionItem[]; total: number }>(
-    `${BASE}/tables/${tableId}/versions`,
-    { params: { page, pageSize } },
-  );
-}
-
-export function getDocumentVersionDetailApi(versionId: string) {
-  return requestClient.get<DocumentVersionDetail>(`${BASE}/versions/${versionId}`);
-}
-
-export function createDocumentVersionApi(tableId: string, changeSummary?: string) {
-  return requestClient.post<DocumentVersionItem>(
-    `${BASE}/tables/${tableId}/versions`,
-    { change_summary: changeSummary },
-  );
-}
-
-export function restoreDocumentVersionApi(tableId: string, versionId: string) {
-  return requestClient.post(`${BASE}/tables/${tableId}/versions/${versionId}/restore`);
-}
-
-export function compareDocumentVersionsApi(tableId: string, fromId: string, toId: string) {
-  return requestClient.get<DocumentVersionCompare>(
-    `${BASE}/tables/${tableId}/versions/compare`,
-    { params: { from: fromId, to: toId } },
-  );
-}
-
-export function deleteDocumentVersionApi(versionId: string) {
-  return requestClient.delete(`${BASE}/versions/${versionId}`);
-}
-
-// ==================== Document Template API ====================
-
-export interface DocumentTemplateItem {
-  id: string;
-  name: string;
-  description?: string;
-  icon: string;
-  category: string;
-  preview_image?: string;
-  is_system: boolean;
-  use_count: number;
-  sys_create_datetime?: string;
-  sys_update_datetime?: string;
-  sys_creator_id?: string;
-  creator_name?: string;
-}
-
-export interface DocumentTemplateDetail extends DocumentTemplateItem {
-  content: Record<string, any>;
-}
-
-export function getDocumentTemplatesApi(params?: { category?: string; keyword?: string; page?: number; pageSize?: number }) {
-  return requestClient.get<{ items: DocumentTemplateItem[]; total: number }>(
-    `${BASE}/document-templates`,
-    { params },
-  );
-}
-
-export function getDocumentTemplateCategoriesApi() {
-  return requestClient.get<string[]>(`${BASE}/document-templates/categories`);
-}
-
-export function getDocumentTemplateDetailApi(templateId: string) {
-  return requestClient.get<DocumentTemplateDetail>(`${BASE}/document-templates/${templateId}`);
-}
-
-export function createDocumentTemplateApi(data: {
-  name: string;
-  description?: string;
-  icon?: string;
-  category?: string;
-  content: Record<string, any>;
-  preview_image?: string;
-}) {
-  return requestClient.post<DocumentTemplateItem>(`${BASE}/document-templates`, data);
-}
-
-export function createTemplateFromDocumentApi(documentId: string, data: {
-  name: string;
-  description?: string;
-  category?: string;
-  content: Record<string, any>;
-}) {
-  return requestClient.post<DocumentTemplateItem>(
-    `${BASE}/document-templates/from-document/${documentId}`,
-    data,
-  );
-}
-
-export function updateDocumentTemplateApi(templateId: string, data: {
-  name?: string;
-  description?: string;
-  icon?: string;
-  category?: string;
-  content?: Record<string, any>;
-  preview_image?: string;
-}) {
-  return requestClient.put<DocumentTemplateItem>(`${BASE}/document-templates/${templateId}`, data);
-}
-
-export function deleteDocumentTemplateApi(templateId: string) {
-  return requestClient.delete(`${BASE}/document-templates/${templateId}`);
-}
-
-export function useDocumentTemplateApi(templateId: string) {
-  return requestClient.post(`${BASE}/document-templates/${templateId}/use`);
-}
-
-// ==================== Wiki Space API ====================
-
-export interface WikiSpaceItem {
-  id: string;
-  name: string;
-  icon: string;
-  avatar?: string | null;
-  description?: string;
-  cover?: string;
-  category: string;
-  visibility: string;
-  sort: number;
-  document_count?: number;
-  sys_create_datetime?: string;
-  sys_update_datetime?: string;
-  sys_creator_id?: string;
-  creator_name?: string;
-}
-
-export interface WikiSpaceDetail extends WikiSpaceItem {
-  documents: SmartTableItem[];
-}
-
-export function getWikiSpacesApi() {
-  return requestClient.get<WikiSpaceItem[]>(`${BASE}/wiki-spaces`);
-}
-
-export function getWikiSpaceDetailApi(spaceId: string) {
-  return requestClient.get<WikiSpaceDetail>(`${BASE}/wiki-spaces/${spaceId}`);
-}
-
-export function createWikiSpaceApi(data: {
-  name: string;
-  icon?: string;
-  avatar?: string | null;
-  description?: string;
-  cover?: string;
-  category?: string;
-  visibility?: string;
-}) {
-  return requestClient.post<WikiSpaceItem>(`${BASE}/wiki-spaces`, data);
-}
-
-export function updateWikiSpaceApi(spaceId: string, data: Partial<WikiSpaceItem>) {
-  return requestClient.put<WikiSpaceItem>(`${BASE}/wiki-spaces/${spaceId}`, data);
-}
-
-export function deleteWikiSpaceApi(spaceId: string) {
-  return requestClient.delete(`${BASE}/wiki-spaces/${spaceId}`);
-}
-
-export function getWikiSpaceDocumentsApi(spaceId: string) {
-  return requestClient.get<SmartTableItem[]>(`${BASE}/wiki-spaces/${spaceId}/documents`);
-}
-
-export function createWikiDocumentApi(spaceId: string, data: {
-  name: string;
-  parent_id?: string | null;
-  content?: any;
-}) {
-  return requestClient.post<SmartTableItem>(
-    `${BASE}/wiki-spaces/${spaceId}/documents`,
-    { ...data, type: 'document', icon: 'FileText' },
-  );
-}
diff --git a/web/apps/web-ele/src/components/contract-design/components/AttributePanel.vue b/web/apps/web-ele/src/components/contract-design/components/AttributePanel.vue
deleted file mode 100644
index 6cb91cf..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/AttributePanel.vue
+++ /dev/null
@@ -1,981 +0,0 @@
-<script setup lang="ts">
-import type { PartyType } from '../store/contractDesignStore';
-
-import { ref, watch } from 'vue';
-
-import { Settings } from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import {
-  ElButton,
-  ElColorPicker,
-  ElDivider,
-  ElForm,
-  ElFormItem,
-  ElIcon,
-  ElInput,
-  ElInputNumber,
-  ElOption,
-  ElRadioButton,
-  ElRadioGroup,
-  ElScrollbar,
-  ElSelect,
-  ElSwitch,
-  ElTabPane,
-  ElTabs,
-} from 'element-plus';
-import { storeToRefs } from 'pinia';
-
-import {
-  predefinedVariables,
-  useContractDesignStore,
-} from '../store/contractDesignStore';
-
-const store = useContractDesignStore();
-const { activeElement, templateConfig } = storeToRefs(store);
-
-const activeTab = ref('element');
-
-// 当前元素的本地副本
-const localProps = ref<Record<string, any>>({});
-const localSignature = ref<any>({});
-const localTableColumns = ref<any[]>([]);
-
-// 监听选中元素变化
-watch(
-  activeElement,
-  (element) => {
-    if (element) {
-      localProps.value = { ...element.props };
-      localSignature.value = element.signature ? { ...element.signature } : {};
-      localTableColumns.value = element.tableColumns
-        ? [...element.tableColumns]
-        : [];
-    } else {
-      localProps.value = {};
-      localSignature.value = {};
-      localTableColumns.value = [];
-    }
-  },
-  { immediate: true, deep: true },
-);
-
-// 更新属性
-const updateProps = (key: string, value: any) => {
-  if (activeElement.value) {
-    localProps.value[key] = value;
-    store.updateElementProps(activeElement.value.id, { [key]: value });
-  }
-};
-
-// 更新签名配置
-const updateSignature = (key: string, value: any) => {
-  if (activeElement.value) {
-    localSignature.value[key] = value;
-    store.updateElement(activeElement.value.id, {
-      signature: { ...localSignature.value },
-    });
-  }
-};
-
-// 更新表格列
-const updateTableColumns = () => {
-  if (activeElement.value) {
-    store.updateElement(activeElement.value.id, {
-      tableColumns: [...localTableColumns.value],
-    });
-  }
-};
-
-// 添加表格列
-const addTableColumn = () => {
-  const key = `col${localTableColumns.value.length + 1}`;
-  localTableColumns.value.push({
-    key,
-    title: `列${localTableColumns.value.length + 1}`,
-    width: 100,
-    align: 'center',
-  });
-  updateTableColumns();
-};
-
-// 删除表格列
-const removeTableColumn = (index: number) => {
-  localTableColumns.value.splice(index, 1);
-  updateTableColumns();
-};
-
-// 添加表格行
-const addTableRow = () => {
-  if (activeElement.value && activeElement.value.tableData) {
-    const newRow: Record<string, any> = {};
-    localTableColumns.value.forEach((col) => {
-      newRow[col.key] = '';
-    });
-    activeElement.value.tableData.push(newRow);
-    store.recordSnapshot();
-  }
-};
-
-// 签署方选项
-const partyOptions: { label: string; value: PartyType }[] = [
-  { label: $t('contract-design.partyA'), value: 'party_a' },
-  { label: $t('contract-design.partyB'), value: 'party_b' },
-  { label: $t('contract-design.partyC'), value: 'party_c' },
-  { label: $t('contract-design.witness'), value: 'witness' },
-];
-
-// 元素类型标签
-const typeLabels: Record<string, string> = {
-  title: $t('contract-design.typeTitle'),
-  paragraph: $t('contract-design.typeParagraph'),
-  'rich-text': $t('contract-design.typeRichText'),
-  variable: $t('contract-design.typeVariable'),
-  table: $t('contract-design.typeTable'),
-  'signature-zone': $t('contract-design.typeSignatureZone'),
-  'seal-zone': $t('contract-design.typeSealZone'),
-  'date-zone': $t('contract-design.typeDateZone'),
-  divider: $t('contract-design.typeDivider'),
-  'page-break': $t('contract-design.typePageBreak'),
-  image: $t('contract-design.typeImage'),
-};
-
-// 更新模板配置
-const updateTemplateField = (field: string, value: any) => {
-  store.updateTemplateConfig({ [field]: value });
-};
-
-// 获取变量信息
-const getVariableInfo = (code: string) => {
-  return predefinedVariables.find((v) => v.code === code);
-};
-
-// 变量类型标签
-const variableTypeLabels: Record<string, string> = {
-  text: $t('contract-design.text'),
-  number: $t('contract-design.number'),
-  date: $t('contract-design.date'),
-  money: $t('contract-design.money'),
-  select: $t('contract-design.select'),
-};
-
-// 检查变量是否已使用
-const isVariableUsed = (code: string) => {
-  return templateConfig.value.variables.some((v) => v.code === code);
-};
-
-// 添加变量到模板
-const addVariableToTemplate = (variable: (typeof predefinedVariables)[0]) => {
-  if (!isVariableUsed(variable.code)) {
-    store.addVariable({ ...variable });
-  }
-};
-
-// 更新页边距
-const updateMargin = (side: string, value: number) => {
-  const margin = { ...templateConfig.value.pageMargin, [side]: value };
-  store.updateTemplateConfig({ pageMargin: margin });
-};
-</script>
-
-<template>
-  <div
-    class="attribute-panel flex h-full w-80 flex-col rounded border border-[var(--el-border-color)] bg-[var(--el-bg-color)]"
-  >
-    <!-- 标题 -->
-    <div
-      class="flex flex-shrink-0 items-center gap-2 border-b border-[var(--el-border-color)] px-4 py-3"
-    >
-      <ElIcon :size="16" class="text-[var(--el-color-primary)]">
-        <Settings />
-      </ElIcon>
-      <span class="text-sm font-bold">{{
-        $t('contract-design.attributePanel')
-      }}</span>
-    </div>
-
-    <!-- 标签页 -->
-    <ElTabs v-model="activeTab" class="flex-1 overflow-hidden">
-      <!-- 元素属性 -->
-      <ElTabPane
-        :label="$t('contract-design.elementPanel')"
-        name="element"
-        class="h-full"
-      >
-        <ElScrollbar class="h-full">
-          <div class="p-4">
-            <!-- 无选中元素 -->
-            <div
-              v-if="!activeElement"
-              class="flex h-40 items-center justify-center text-sm text-[var(--el-text-color-placeholder)]"
-            >
-              {{ $t('contract-design.selectElement') }}
-            </div>
-
-            <!-- 元素属性表单 -->
-            <ElForm v-else label-position="top" label-width="auto" size="small">
-              <!-- 元素类型 -->
-              <div
-                class="mb-4 rounded bg-[var(--el-fill-color-light)] p-2 text-center text-sm"
-              >
-                {{ typeLabels[activeElement.type] || activeElement.type }}
-              </div>
-
-              <!-- 标题属性 -->
-              <template v-if="activeElement.type === 'title'">
-                <ElFormItem :label="$t('contract-design.titleContent')">
-                  <ElInput
-                    v-model="localProps.content"
-                    @change="updateProps('content', localProps.content)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.titleLevel')">
-                  <ElRadioGroup
-                    v-model="localProps.level"
-                    @change="updateProps('level', localProps.level)"
-                  >
-                    <ElRadioButton :value="1">H1</ElRadioButton>
-                    <ElRadioButton :value="2">H2</ElRadioButton>
-                    <ElRadioButton :value="3">H3</ElRadioButton>
-                  </ElRadioGroup>
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.alignment')">
-                  <ElRadioGroup
-                    v-model="localProps.align"
-                    @change="updateProps('align', localProps.align)"
-                  >
-                    <ElRadioButton value="left">
-                      {{ $t('contract-design.left') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="center">
-                      {{ $t('contract-design.center') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="right">
-                      {{ $t('contract-design.right') }}
-                    </ElRadioButton>
-                  </ElRadioGroup>
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.fontSize')">
-                  <ElInputNumber
-                    v-model="localProps.fontSize"
-                    :min="12"
-                    :max="48"
-                    @change="updateProps('fontSize', localProps.fontSize)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.fontWeight')">
-                  <ElSelect
-                    v-model="localProps.fontWeight"
-                    @change="updateProps('fontWeight', localProps.fontWeight)"
-                  >
-                    <ElOption
-                      :label="$t('contract-design.normal')"
-                      value="normal"
-                    />
-                    <ElOption
-                      :label="$t('contract-design.bold')"
-                      value="bold"
-                    />
-                  </ElSelect>
-                </ElFormItem>
-              </template>
-
-              <!-- 段落属性 -->
-              <template v-else-if="activeElement.type === 'paragraph'">
-                <ElFormItem :label="$t('contract-design.paragraphContent')">
-                  <ElInput
-                    v-model="localProps.content"
-                    type="textarea"
-                    :rows="4"
-                    @change="updateProps('content', localProps.content)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.alignment')">
-                  <ElRadioGroup
-                    v-model="localProps.align"
-                    @change="updateProps('align', localProps.align)"
-                  >
-                    <ElRadioButton value="left">
-                      {{ $t('contract-design.left') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="center">
-                      {{ $t('contract-design.center') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="right">
-                      {{ $t('contract-design.right') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="justify">
-                      {{ $t('contract-design.justify') }}
-                    </ElRadioButton>
-                  </ElRadioGroup>
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.fontSize')">
-                  <ElInputNumber
-                    v-model="localProps.fontSize"
-                    :min="12"
-                    :max="24"
-                    @change="updateProps('fontSize', localProps.fontSize)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.lineHeight')">
-                  <ElInputNumber
-                    v-model="localProps.lineHeight"
-                    :min="1"
-                    :max="3"
-                    :step="0.1"
-                    :precision="1"
-                    @change="updateProps('lineHeight', localProps.lineHeight)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.indent')">
-                  <ElInputNumber
-                    v-model="localProps.indent"
-                    :min="0"
-                    :max="8"
-                    @change="updateProps('indent', localProps.indent)"
-                  />
-                </ElFormItem>
-              </template>
-
-              <!-- 变量属性 -->
-              <template v-else-if="activeElement.type === 'variable'">
-                <ElFormItem :label="$t('contract-design.selectVariable')">
-                  <ElSelect
-                    v-model="localProps.variableCode"
-                    filterable
-                    :placeholder="$t('contract-design.placeholderVariable')"
-                    @change="
-                      updateProps('variableCode', localProps.variableCode)
-                    "
-                  >
-                    <ElOption
-                      v-for="v in predefinedVariables"
-                      :key="v.code"
-                      :label="`${v.name} (${v.code})`"
-                      :value="v.code"
-                    />
-                  </ElSelect>
-                </ElFormItem>
-                <!-- 显示选中变量的信息 -->
-                <div
-                  v-if="localProps.variableCode"
-                  class="mb-4 rounded bg-[var(--el-fill-color-light)] p-3"
-                >
-                  <div
-                    class="mb-1 text-xs font-bold text-[var(--el-text-color-primary)]"
-                  >
-                    {{ getVariableInfo(localProps.variableCode)?.name }}
-                  </div>
-                  <div class="flex flex-wrap gap-2 text-xs">
-                    <span
-                      class="rounded bg-[var(--el-color-primary-light-9)] px-1.5 py-0.5 text-[var(--el-color-primary)]"
-                    >
-                      {{ getVariableInfo(localProps.variableCode)?.type }}
-                    </span>
-                    <span
-                      v-if="getVariableInfo(localProps.variableCode)?.required"
-                      class="rounded bg-[var(--el-color-danger-light-9)] px-1.5 py-0.5 text-[var(--el-color-danger)]"
-                    >
-                      {{ $t('contract-design.required') }}
-                    </span>
-                    <span
-                      v-else
-                      class="rounded bg-[var(--el-fill-color)] px-1.5 py-0.5 text-[var(--el-text-color-secondary)]"
-                    >
-                      {{ $t('contract-design.optional') }}
-                    </span>
-                  </div>
-                  <div
-                    class="mt-1 text-xs text-[var(--el-text-color-placeholder)]"
-                  >
-                    {{ $t('contract-design.codeLabel') }}:
-                    {{ localProps.variableCode }}
-                  </div>
-                </div>
-                <ElFormItem :label="$t('contract-design.placeholderText')">
-                  <ElInput
-                    v-model="localProps.placeholder"
-                    :placeholder="$t('contract-design.notFilledText')"
-                    @change="updateProps('placeholder', localProps.placeholder)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.minWidth')">
-                  <ElInputNumber
-                    v-model="localProps.minWidth"
-                    :min="50"
-                    :max="500"
-                    @change="updateProps('minWidth', localProps.minWidth)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.showUnderline')">
-                  <ElSwitch
-                    v-model="localProps.underline"
-                    @change="updateProps('underline', localProps.underline)"
-                  />
-                </ElFormItem>
-                <ElDivider />
-                <div
-                  class="rounded bg-[var(--el-color-info-light-9)] p-3 text-xs text-[var(--el-text-color-secondary)]"
-                >
-                  <div class="mb-1 font-bold">
-                    {{ $t('contract-design.usageInstructions') }}
-                  </div>
-                  <div>
-                    {{ $t('contract-design.variableUsageDesc') }}
-                  </div>
-                </div>
-              </template>
-
-              <!-- 表格属性 -->
-              <template v-else-if="activeElement.type === 'table'">
-                <ElFormItem :label="$t('contract-design.showBorder')">
-                  <ElSwitch
-                    v-model="localProps.bordered"
-                    @change="updateProps('bordered', localProps.bordered)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.headerBgColor')">
-                  <ElColorPicker
-                    v-model="localProps.headerBgColor"
-                    @change="
-                      updateProps('headerBgColor', localProps.headerBgColor)
-                    "
-                  />
-                </ElFormItem>
-                <ElDivider>{{ $t('contract-design.tableColumns') }}</ElDivider>
-                <div
-                  v-for="(col, index) in localTableColumns"
-                  :key="index"
-                  class="mb-2 rounded border border-[var(--el-border-color)] p-2"
-                >
-                  <div class="mb-2 flex items-center justify-between">
-                    <span class="text-xs font-bold"
-                      >{{ $t('contract-design.column') }} {{ index + 1 }}</span
-                    >
-                    <ElButton
-                      type="danger"
-                      text
-                      size="small"
-                      @click="removeTableColumn(index)"
-                    >
-                      {{ $t('contract-design.delete') }}
-                    </ElButton>
-                  </div>
-                  <ElInput
-                    v-model="col.title"
-                    :placeholder="$t('contract-design.columnTitle')"
-                    size="small"
-                    class="mb-2"
-                    @change="updateTableColumns"
-                  />
-                  <div class="flex gap-2">
-                    <ElInputNumber
-                      v-model="col.width"
-                      :min="50"
-                      :max="500"
-                      size="small"
-                      :placeholder="$t('contract-design.width')"
-                      @change="updateTableColumns"
-                    />
-                    <ElSelect
-                      v-model="col.align"
-                      size="small"
-                      @change="updateTableColumns"
-                    >
-                      <ElOption
-                        :label="$t('contract-design.left')"
-                        value="left"
-                      />
-                      <ElOption
-                        :label="$t('contract-design.center')"
-                        value="center"
-                      />
-                      <ElOption
-                        :label="$t('contract-design.right')"
-                        value="right"
-                      />
-                    </ElSelect>
-                  </div>
-                </div>
-                <ElButton size="small" @click="addTableColumn">
-                  {{ $t('contract-design.addColumn') }}
-                </ElButton>
-                <ElButton size="small" class="ml-2" @click="addTableRow">
-                  {{ $t('contract-design.addRow') }}
-                </ElButton>
-              </template>
-
-              <!-- 签名区属性 -->
-              <template
-                v-else-if="
-                  activeElement.type === 'signature-zone' ||
-                  activeElement.type === 'seal-zone'
-                "
-              >
-                <ElFormItem :label="$t('contract-design.signatory')">
-                  <ElSelect
-                    v-model="localSignature.partyType"
-                    @change="
-                      updateSignature('partyType', localSignature.partyType)
-                    "
-                  >
-                    <ElOption
-                      v-for="opt in partyOptions"
-                      :key="opt.value"
-                      :label="opt.label"
-                      :value="opt.value"
-                    />
-                  </ElSelect>
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.labelText')">
-                  <ElInput
-                    v-model="localSignature.partyLabel"
-                    @change="
-                      updateSignature('partyLabel', localSignature.partyLabel)
-                    "
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.alignment')">
-                  <ElRadioGroup
-                    v-model="localProps.align"
-                    @change="updateProps('align', localProps.align)"
-                  >
-                    <ElRadioButton value="left">
-                      {{ $t('contract-design.alignLeft') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="center">
-                      {{ $t('contract-design.alignCenter') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="right">
-                      {{ $t('contract-design.alignRight') }}
-                    </ElRadioButton>
-                  </ElRadioGroup>
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.width')">
-                  <ElInputNumber
-                    v-model="localProps.width"
-                    :min="100"
-                    :max="400"
-                    @change="updateProps('width', localProps.width)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.height')">
-                  <ElInputNumber
-                    v-model="localProps.height"
-                    :min="60"
-                    :max="200"
-                    @change="updateProps('height', localProps.height)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.showBorder')">
-                  <ElSwitch
-                    v-model="localProps.showBorder"
-                    @change="updateProps('showBorder', localProps.showBorder)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.showLabel')">
-                  <ElSwitch
-                    v-model="localProps.showLabel"
-                    @change="updateProps('showLabel', localProps.showLabel)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.showDate')">
-                  <ElSwitch
-                    v-model="localSignature.showDate"
-                    @change="
-                      updateSignature('showDate', localSignature.showDate)
-                    "
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.mustSign')">
-                  <ElSwitch
-                    v-model="localSignature.required"
-                    @change="
-                      updateSignature('required', localSignature.required)
-                    "
-                  />
-                </ElFormItem>
-              </template>
-
-              <!-- 日期区属性 -->
-              <template v-else-if="activeElement.type === 'date-zone'">
-                <ElFormItem :label="$t('contract-design.label')">
-                  <ElInput
-                    v-model="localProps.label"
-                    @change="updateProps('label', localProps.label)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.alignment')">
-                  <ElRadioGroup
-                    v-model="localProps.align"
-                    @change="updateProps('align', localProps.align)"
-                  >
-                    <ElRadioButton value="left">
-                      {{ $t('contract-design.alignLeft') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="center">
-                      {{ $t('contract-design.alignCenter') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="right">
-                      {{ $t('contract-design.alignRight') }}
-                    </ElRadioButton>
-                  </ElRadioGroup>
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.dateFormat')">
-                  <ElSelect
-                    v-model="localProps.format"
-                    @change="updateProps('format', localProps.format)"
-                  >
-                    <ElOption label="YYYY年MM月DD日" value="YYYY年MM月DD日" />
-                    <ElOption label="YYYY-MM-DD" value="YYYY-MM-DD" />
-                    <ElOption label="YYYY/MM/DD" value="YYYY/MM/DD" />
-                  </ElSelect>
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.showUnderline')">
-                  <ElSwitch
-                    v-model="localProps.showUnderline"
-                    @change="
-                      updateProps('showUnderline', localProps.showUnderline)
-                    "
-                  />
-                </ElFormItem>
-              </template>
-
-              <!-- 分割线属性 -->
-              <template v-else-if="activeElement.type === 'divider'">
-                <ElFormItem :label="$t('contract-design.lineStyle')">
-                  <ElSelect
-                    v-model="localProps.style"
-                    @change="updateProps('style', localProps.style)"
-                  >
-                    <ElOption
-                      :label="$t('contract-design.solid')"
-                      value="solid"
-                    />
-                    <ElOption
-                      :label="$t('contract-design.dashed')"
-                      value="dashed"
-                    />
-                    <ElOption
-                      :label="$t('contract-design.dotted')"
-                      value="dotted"
-                    />
-                  </ElSelect>
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.lineColor')">
-                  <ElColorPicker
-                    v-model="localProps.color"
-                    @change="updateProps('color', localProps.color)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.marginVertical')">
-                  <ElInputNumber
-                    v-model="localProps.margin"
-                    :min="0"
-                    :max="100"
-                    @change="updateProps('margin', localProps.margin)"
-                  />
-                </ElFormItem>
-              </template>
-
-              <!-- 图片属性 -->
-              <template v-else-if="activeElement.type === 'image'">
-                <ElFormItem :label="$t('contract-design.imageUrl')">
-                  <ElInput
-                    v-model="localProps.src"
-                    :placeholder="$t('contract-design.enterImageUrl')"
-                    @change="updateProps('src', localProps.src)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.width')">
-                  <ElInputNumber
-                    v-model="localProps.width"
-                    :min="50"
-                    :max="700"
-                    @change="updateProps('width', localProps.width)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.alignment')">
-                  <ElRadioGroup
-                    v-model="localProps.align"
-                    @change="updateProps('align', localProps.align)"
-                  >
-                    <ElRadioButton value="left">
-                      {{ $t('contract-design.left') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="center">
-                      {{ $t('contract-design.center') }}
-                    </ElRadioButton>
-                    <ElRadioButton value="right">
-                      {{ $t('contract-design.right') }}
-                    </ElRadioButton>
-                  </ElRadioGroup>
-                </ElFormItem>
-              </template>
-
-              <!-- 富文本属性 -->
-              <template v-else-if="activeElement.type === 'rich-text'">
-                <ElFormItem :label="$t('contract-design.minHeight')">
-                  <ElInputNumber
-                    v-model="localProps.minHeight"
-                    :min="50"
-                    :max="800"
-                    @change="updateProps('minHeight', localProps.minHeight)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.padding')">
-                  <ElInputNumber
-                    v-model="localProps.padding"
-                    :min="0"
-                    :max="50"
-                    @change="updateProps('padding', localProps.padding)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.showBorder')">
-                  <ElSwitch
-                    v-model="localProps.showBorder"
-                    @change="updateProps('showBorder', localProps.showBorder)"
-                  />
-                </ElFormItem>
-                <ElFormItem
-                  v-if="localProps.showBorder"
-                  :label="$t('contract-design.borderColor')"
-                >
-                  <ElColorPicker
-                    v-model="localProps.borderColor"
-                    @change="updateProps('borderColor', localProps.borderColor)"
-                  />
-                </ElFormItem>
-                <ElFormItem :label="$t('contract-design.backgroundColor')">
-                  <ElColorPicker
-                    v-model="localProps.backgroundColor"
-                    @change="
-                      updateProps('backgroundColor', localProps.backgroundColor)
-                    "
-                  />
-                </ElFormItem>
-                <ElDivider />
-                <div
-                  class="rounded bg-[var(--el-color-primary-light-9)] p-3 text-xs text-[var(--el-color-primary)]"
-                >
-                  <div class="mb-1 font-bold">
-                    {{ $t('contract-design.editTip') }}
-                  </div>
-                  <div>{{ $t('contract-design.richTextEditDesc') }}</div>
-                  <ul class="mt-1 list-inside list-disc">
-                    <li>{{ $t('contract-design.boldItalicUnderline') }}</li>
-                    <li>{{ $t('contract-design.headingListQuote') }}</li>
-                    <li>{{ $t('contract-design.insertContent') }}</li>
-                  </ul>
-                </div>
-              </template>
-            </ElForm>
-          </div>
-        </ElScrollbar>
-      </ElTabPane>
-
-      <!-- 模板设置 -->
-      <ElTabPane
-        :label="$t('contract-design.templatePanel')"
-        name="template"
-        class="h-full"
-      >
-        <ElScrollbar class="h-full">
-          <div class="p-4">
-            <ElForm label-position="top" size="small">
-              <ElFormItem :label="$t('contract-design.templateName')">
-                <ElInput
-                  :model-value="templateConfig.name"
-                  @change="(val: string) => updateTemplateField('name', val)"
-                />
-              </ElFormItem>
-              <ElFormItem :label="$t('contract-design.templateCode')">
-                <ElInput
-                  :model-value="templateConfig.code"
-                  @change="(val: string) => updateTemplateField('code', val)"
-                />
-              </ElFormItem>
-              <ElFormItem :label="$t('contract-design.templateCategory')">
-                <ElInput
-                  :model-value="templateConfig.category"
-                  @change="
-                    (val: string) => updateTemplateField('category', val)
-                  "
-                />
-              </ElFormItem>
-              <ElFormItem :label="$t('contract-design.templateDescription')">
-                <ElInput
-                  :model-value="templateConfig.description"
-                  type="textarea"
-                  :rows="3"
-                  @change="
-                    (val: string) => updateTemplateField('description', val)
-                  "
-                />
-              </ElFormItem>
-
-              <ElDivider>{{ $t('contract-design.pageSettings') }}</ElDivider>
-
-              <ElFormItem :label="$t('contract-design.pageSize')">
-                <ElSelect
-                  :model-value="templateConfig.pageSize"
-                  @change="
-                    (val: 'A4' | 'A5' | 'Letter') =>
-                      updateTemplateField('pageSize', val)
-                  "
-                >
-                  <ElOption label="A4" value="A4" />
-                  <ElOption label="A5" value="A5" />
-                  <ElOption label="Letter" value="Letter" />
-                </ElSelect>
-              </ElFormItem>
-
-              <ElFormItem :label="$t('contract-design.pageMargin')">
-                <div class="grid grid-cols-2 gap-2">
-                  <ElInputNumber
-                    :model-value="templateConfig.pageMargin.top"
-                    :min="0"
-                    :max="200"
-                    :placeholder="$t('contract-design.top')"
-                    @change="(val: number) => updateMargin('top', val)"
-                  />
-                  <ElInputNumber
-                    :model-value="templateConfig.pageMargin.right"
-                    :min="0"
-                    :max="200"
-                    :placeholder="$t('contract-design.rightLabel')"
-                    @change="(val: number) => updateMargin('right', val)"
-                  />
-                  <ElInputNumber
-                    :model-value="templateConfig.pageMargin.bottom"
-                    :min="0"
-                    :max="200"
-                    :placeholder="$t('contract-design.bottom')"
-                    @change="(val: number) => updateMargin('bottom', val)"
-                  />
-                  <ElInputNumber
-                    :model-value="templateConfig.pageMargin.left"
-                    :min="0"
-                    :max="200"
-                    :placeholder="$t('contract-design.leftLabel')"
-                    @change="(val: number) => updateMargin('left', val)"
-                  />
-                </div>
-              </ElFormItem>
-            </ElForm>
-          </div>
-        </ElScrollbar>
-      </ElTabPane>
-
-      <!-- 变量管理 -->
-      <ElTabPane
-        :label="$t('contract-design.variablePanel')"
-        name="variables"
-        class="h-full"
-      >
-        <ElScrollbar class="h-full">
-          <div class="p-4">
-            <div
-              class="mb-4 rounded bg-[var(--el-color-info-light-9)] p-3 text-xs text-[var(--el-text-color-secondary)]"
-            >
-              <div class="mb-1 font-bold">
-                {{ $t('contract-design.variableDescription') }}
-              </div>
-              <div>
-                {{ $t('contract-design.variableDescText') }}
-              </div>
-            </div>
-
-            <!-- 已使用的变量 -->
-            <div v-if="templateConfig.variables.length > 0" class="mb-4">
-              <div
-                class="mb-2 text-xs font-bold text-[var(--el-text-color-primary)]"
-              >
-                {{ $t('contract-design.usedVariables') }} ({{
-                  templateConfig.variables.length
-                }})
-              </div>
-              <div
-                v-for="variable in templateConfig.variables"
-                :key="variable.code"
-                class="mb-2 rounded border border-[var(--el-border-color)] p-2"
-              >
-                <div class="flex items-center justify-between">
-                  <div class="text-sm font-medium">{{ variable.name }}</div>
-                  <ElButton
-                    type="danger"
-                    text
-                    size="small"
-                    @click="store.removeVariable(variable.code)"
-                  >
-                    {{ $t('contract-design.remove') }}
-                  </ElButton>
-                </div>
-                <div class="mt-1 flex items-center gap-2">
-                  <span class="text-xs text-[var(--el-text-color-placeholder)]">
-                    {{ variable.code }}
-                  </span>
-                  <span
-                    class="rounded px-1.5 py-0.5 text-xs"
-                    :class="{
-                      'bg-[var(--el-color-danger-light-9)] text-[var(--el-color-danger)]':
-                        variable.required,
-                      'bg-[var(--el-fill-color)] text-[var(--el-text-color-secondary)]':
-                        !variable.required,
-                    }"
-                  >
-                    {{ variable.required ? '必填' : '选填' }}
-                  </span>
-                  <span
-                    class="rounded bg-[var(--el-fill-color)] px-1.5 py-0.5 text-xs text-[var(--el-text-color-secondary)]"
-                  >
-                    {{ variableTypeLabels[variable.type] || variable.type }}
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div
-              v-else
-              class="mb-4 py-8 text-center text-sm text-[var(--el-text-color-placeholder)]"
-            >
-              {{ $t('contract-design.noVariablesText') }}
-            </div>
-
-            <!-- 可用变量列表 -->
-            <ElDivider>
-              {{ $t('contract-design.availableVariables') }}
-            </ElDivider>
-            <div class="grid grid-cols-2 gap-2">
-              <div
-                v-for="v in predefinedVariables"
-                :key="v.code"
-                class="cursor-pointer rounded border border-[var(--el-border-color)] p-2 text-xs transition-colors hover:border-[var(--el-color-primary)] hover:bg-[var(--el-color-primary-light-9)]"
-                :class="{
-                  'border-[var(--el-color-success)] bg-[var(--el-color-success-light-9)]':
-                    isVariableUsed(v.code),
-                }"
-                @click="addVariableToTemplate(v)"
-              >
-                <div class="font-medium">{{ v.name }}</div>
-                <div class="mt-0.5 text-[var(--el-text-color-placeholder)]">
-                  {{ v.code }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </ElScrollbar>
-      </ElTabPane>
-    </ElTabs>
-  </div>
-</template>
-
-<style scoped>
-:deep(.el-tabs__content) {
-  height: calc(100% - 40px);
-  overflow: hidden;
-}
-
-:deep(.el-tab-pane) {
-  height: 100%;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/components/ContractRenderer.vue b/web/apps/web-ele/src/components/contract-design/components/ContractRenderer.vue
deleted file mode 100644
index 6c65b6f..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/ContractRenderer.vue
+++ /dev/null
@@ -1,569 +0,0 @@
-<script setup lang="ts">
-import type {
-  ContractElement,
-  ContractTemplateConfig,
-} from '../store/contractDesignStore';
-
-import { computed, nextTick, ref } from 'vue';
-
-import { Check, Pencil } from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import { ElDialog, ElIcon, ElInput } from 'element-plus';
-
-import ElementRenderer from './ElementRenderer.vue';
-import SignatureDialog from './SignatureDialog.vue';
-
-const props = withDefaults(
-  defineProps<{
-    config: ContractTemplateConfig;
-    editable?: boolean; // 是否可编辑变量
-    seals?: Record<string, string>;
-    showBorder?: boolean;
-    signable?: boolean; // 是否可签署模式
-    signatures?: Record<string, string>;
-    variables?: Record<string, any>;
-  }>(),
-  {
-    variables: () => ({}),
-    signatures: () => ({}),
-    seals: () => ({}),
-    showBorder: false,
-    signable: false,
-    editable: false,
-  },
-);
-
-const emit = defineEmits<{
-  (e: 'sign', elementId: string, signatureData: string): void;
-  (e: 'update:variables', variables: Record<string, any>): void;
-  (e: 'variableChange', code: string, value: string): void;
-}>();
-
-// 签名弹窗状态
-const signDialogVisible = ref(false);
-const currentSignElement = ref<ContractElement | null>(null);
-
-// 页面尺寸映射
-const pageSizeMap = {
-  A4: { width: 794, height: 1123 },
-  A5: { width: 559, height: 794 },
-  Letter: { width: 816, height: 1056 },
-};
-
-// 画布样式
-const canvasStyle = computed(() => {
-  const size = pageSizeMap[props.config.pageSize];
-  const margin = props.config.pageMargin;
-  return {
-    width: `${size.width}px`,
-    minHeight: `${size.height}px`,
-    // padding: `${margin.top}px ${margin.right}px ${margin.bottom}px ${margin.left}px`,
-  };
-});
-
-// 合并变量值到元素
-const getElementVariables = (element: any) => {
-  if (element.type === 'variable' && element.props.variableCode) {
-    return {
-      ...props.variables,
-      [element.props.variableCode]: props.variables[element.props.variableCode],
-    };
-  }
-  return props.variables;
-};
-
-// 获取签名图片
-const getSignatureImage = (element: any) => {
-  if (element.signature?.partyType) {
-    return props.signatures[element.signature.partyType];
-  }
-  return '';
-};
-
-// 获取印章图片
-const getSealImage = (element: any) => {
-  if (element.signature?.partyType) {
-    return props.seals[element.signature.partyType];
-  }
-  return '';
-};
-
-// 检查元素是否已签署
-const isSigned = (element: ContractElement) => {
-  return !!props.signatures[element.id];
-};
-
-// 获取元素签名图片（按元素ID）
-const getElementSignature = (element: ContractElement) => {
-  return props.signatures[element.id] || '';
-};
-
-// 点击签名区
-const handleSignClick = (element: ContractElement) => {
-  if (!props.signable) return;
-  currentSignElement.value = element;
-  signDialogVisible.value = true;
-};
-
-// 确认签名
-const handleSignConfirm = (signatureData: string) => {
-  if (currentSignElement.value) {
-    emit('sign', currentSignElement.value.id, signatureData);
-  }
-  currentSignElement.value = null;
-};
-
-// 签署区容器对齐样式
-const getSignContainerStyle = (element: ContractElement) => {
-  const align = element.props.align || 'right';
-  return {
-    display: 'flex',
-    justifyContent:
-      align === 'center'
-        ? 'center'
-        : align === 'right'
-          ? 'flex-end'
-          : 'flex-start',
-  };
-};
-
-// ============ 变量编辑功能 ============
-
-// 当前编辑的变量
-const editingVariableCode = ref<null | string>(null);
-const editingVariableValue = ref('');
-const variableInputRef = ref<InstanceType<typeof ElInput> | null>(null);
-
-// 获取变量显示值
-const getVariableDisplayValue = (code: string, placeholder?: string) => {
-  const value = props.variables[code];
-  if (value !== undefined && value !== '') {
-    return value;
-  }
-  return placeholder || $t('contract-design.clickToFill');
-};
-
-// 检查变量是否已填写
-const isVariableFilled = (code: string) => {
-  const value = props.variables[code];
-  return value !== undefined && value !== '';
-};
-
-// 点击变量开始编辑
-const handleVariableClick = (code: string) => {
-  if (!props.editable) return;
-  editingVariableCode.value = code;
-  editingVariableValue.value = props.variables[code] || '';
-  nextTick(() => {
-    variableInputRef.value?.focus();
-  });
-};
-
-// 保存变量编辑
-const handleVariableSave = () => {
-  if (editingVariableCode.value) {
-    const newVariables = {
-      ...props.variables,
-      [editingVariableCode.value]: editingVariableValue.value,
-    };
-    emit('update:variables', newVariables);
-    emit(
-      'variableChange',
-      editingVariableCode.value,
-      editingVariableValue.value,
-    );
-  }
-  editingVariableCode.value = null;
-};
-
-// 取消变量编辑
-const handleVariableCancel = () => {
-  editingVariableCode.value = null;
-};
-</script>
-
-<template>
-  <div class="contract-renderer">
-    <div
-      class="contract-paper bg-[var(--el-bg-color)]"
-      :class="{ 'shadow-lg': showBorder }"
-      :style="canvasStyle"
-    >
-      <template v-if="config.elements.length > 0">
-        <div
-          v-for="element in config.elements"
-          :key="element.id"
-          class="contract-element"
-        >
-          <!-- 签名区特殊处理 -->
-          <template v-if="element.type === 'signature-zone'">
-            <div
-              class="signature-container"
-              :style="getSignContainerStyle(element)"
-            >
-              <div class="signature-wrapper">
-                <!-- 标签 -->
-                <div
-                  v-if="element.props.showLabel !== false"
-                  class="signature-label mb-1 text-sm text-[var(--el-text-color-regular)]"
-                >
-                  {{
-                    element.signature?.partyLabel ||
-                    element.props.label ||
-                    $t('contract-design.signature')
-                  }}：
-                </div>
-
-                <!-- 已签名显示 -->
-                <div
-                  v-if="getElementSignature(element)"
-                  class="signature-display signed"
-                >
-                  <img
-                    :src="getElementSignature(element)"
-                    class="signature-image"
-                    :style="{
-                      width: `${element.props.width}px`,
-                      height: `${element.props.height}px`,
-                    }"
-                    alt="签名"
-                  />
-                  <div class="signed-badge">
-                    <ElIcon :size="12"><Check /></ElIcon>
-                    {{ $t('contract-design.signed') }}
-                  </div>
-                </div>
-
-                <!-- 未签名 - 可签署模式 -->
-                <div
-                  v-else-if="signable"
-                  class="signature-placeholder signable"
-                  :style="{
-                    width: `${element.props.width}px`,
-                    height: `${element.props.height}px`,
-                    border: element.props.showBorder
-                      ? '2px dashed var(--el-color-primary)'
-                      : 'none',
-                  }"
-                  @click="handleSignClick(element)"
-                >
-                  <ElIcon :size="24" class="mb-1"><Pencil /></ElIcon>
-                  <span class="text-sm">{{
-                    $t('contract-design.clickToSign')
-                  }}</span>
-                </div>
-
-                <!-- 未签名 - 只读模式 -->
-                <ElementRenderer
-                  v-else
-                  :element="element"
-                  :is-design="false"
-                  :variables="getElementVariables(element)"
-                />
-
-                <!-- 签署日期 -->
-                <div
-                  v-if="
-                    element.signature?.showDate && getElementSignature(element)
-                  "
-                  class="signature-date mt-1 text-sm text-[var(--el-text-color-secondary)]"
-                >
-                  {{ $t('contract-design.dateLabel') }}：{{
-                    new Date().toLocaleDateString('zh-CN')
-                  }}
-                </div>
-              </div>
-            </div>
-          </template>
-
-          <!-- 盖章区特殊处理 -->
-          <template v-else-if="element.type === 'seal-zone'">
-            <div class="seal-container" :style="getSignContainerStyle(element)">
-              <div class="seal-wrapper">
-                <!-- 标签 -->
-                <div
-                  v-if="element.props.showLabel !== false"
-                  class="seal-label mb-1 text-sm text-[var(--el-text-color-regular)]"
-                >
-                  {{
-                    element.signature?.partyLabel ||
-                    element.props.label ||
-                    $t('contract-design.sealArea')
-                  }}：
-                </div>
-
-                <!-- 已盖章显示 -->
-                <div
-                  v-if="getSealImage(element) || getElementSignature(element)"
-                  class="seal-display signed"
-                >
-                  <img
-                    :src="getSealImage(element) || getElementSignature(element)"
-                    class="seal-image"
-                    :style="{
-                      width: `${element.props.width}px`,
-                      height: `${element.props.height}px`,
-                    }"
-                    alt="印章"
-                  />
-                  <div class="signed-badge">
-                    <ElIcon :size="12"><Check /></ElIcon>
-                    {{ $t('contract-design.sealed') }}
-                  </div>
-                </div>
-
-                <!-- 未盖章 - 可签署模式 -->
-                <div
-                  v-else-if="signable"
-                  class="seal-placeholder signable"
-                  :style="{
-                    width: `${element.props.width}px`,
-                    height: `${element.props.height}px`,
-                    border: element.props.showBorder
-                      ? '2px dashed var(--el-color-primary)'
-                      : 'none',
-                  }"
-                  @click="handleSignClick(element)"
-                >
-                  <ElIcon :size="32" class="mb-1"><Pencil /></ElIcon>
-                  <span class="text-sm">{{
-                    $t('contract-design.clickToSeal')
-                  }}</span>
-                </div>
-
-                <!-- 未盖章 - 只读模式 -->
-                <ElementRenderer
-                  v-else
-                  :element="element"
-                  :is-design="false"
-                  :variables="getElementVariables(element)"
-                />
-              </div>
-            </div>
-          </template>
-
-          <!-- 变量元素 - 可编辑模式 -->
-          <template v-else-if="element.type === 'variable' && editable">
-            <span
-              class="editable-variable"
-              :class="{
-                'variable-filled': isVariableFilled(element.props.variableCode),
-                'variable-empty': !isVariableFilled(element.props.variableCode),
-              }"
-              :style="{
-                borderBottom: element.props.underline
-                  ? '1px solid currentColor'
-                  : undefined,
-                minWidth: element.props.minWidth
-                  ? `${element.props.minWidth}px`
-                  : '60px',
-                display: 'inline-block',
-              }"
-              @click="handleVariableClick(element.props.variableCode)"
-            >
-              {{
-                getVariableDisplayValue(
-                  element.props.variableCode,
-                  element.props.placeholder,
-                )
-              }}
-            </span>
-          </template>
-
-          <!-- 其他元素 -->
-          <template v-else>
-            <ElementRenderer
-              :element="element"
-              :is-design="false"
-              :variables="getElementVariables(element)"
-              :editable="editable"
-              @variable-click="handleVariableClick"
-            />
-          </template>
-        </div>
-      </template>
-      <div
-        v-else
-        class="flex h-40 items-center justify-center text-[var(--el-text-color-placeholder)]"
-      >
-        {{ $t('contract-design.noContent') }}
-      </div>
-    </div>
-
-    <!-- 签名弹窗 -->
-    <SignatureDialog
-      v-model:visible="signDialogVisible"
-      :party-label="
-        currentSignElement?.signature?.partyLabel ||
-        currentSignElement?.props?.label
-      "
-      :width="currentSignElement?.props?.width || 400"
-      :height="currentSignElement?.props?.height || 150"
-      @confirm="handleSignConfirm"
-    />
-
-    <!-- 变量编辑弹窗 -->
-    <ElDialog
-      :model-value="!!editingVariableCode"
-      :title="$t('contract-design.fillVariable')"
-      width="400px"
-      :close-on-click-modal="false"
-      @close="handleVariableCancel"
-    >
-      <div class="variable-edit-dialog">
-        <div class="mb-2 text-sm text-[var(--el-text-color-secondary)]">
-          {{ $t('contract-design.enterVariableValue') }}
-        </div>
-        <ElInput
-          ref="variableInputRef"
-          v-model="editingVariableValue"
-          :placeholder="$t('contract-design.enterVariableValue')"
-          size="large"
-          clearable
-          @keyup.enter="handleVariableSave"
-        />
-      </div>
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <button class="var-btn" @click="handleVariableCancel">
-            {{ $t('contract-design.cancel') }}
-          </button>
-          <button class="var-btn var-btn-primary" @click="handleVariableSave">
-            {{ $t('contract-design.confirm') }}
-          </button>
-        </div>
-      </template>
-    </ElDialog>
-  </div>
-</template>
-
-<style scoped>
-.contract-renderer {
-  display: flex;
-  justify-content: center;
-}
-
-.contract-paper {
-  box-sizing: border-box;
-}
-
-.contract-element {
-  margin-bottom: 4px;
-}
-
-.signature-display,
-.seal-display {
-  position: relative;
-  display: inline-block;
-}
-
-.signature-display.signed,
-.seal-display.signed {
-  padding: 4px;
-  background: var(--el-color-success-light-9);
-  border: 1px solid var(--el-color-success-light-5);
-  border-radius: 4px;
-}
-
-.signature-image,
-.seal-image {
-  display: block;
-  object-fit: contain;
-}
-
-.signature-placeholder,
-.seal-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: var(--el-text-color-placeholder);
-  background: var(--el-fill-color-light);
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.signature-placeholder.signable,
-.seal-placeholder.signable {
-  color: var(--el-color-primary);
-  cursor: pointer;
-  background: var(--el-color-primary-light-9);
-}
-
-.signature-placeholder.signable:hover,
-.seal-placeholder.signable:hover {
-  background: var(--el-color-primary-light-8);
-  border-color: var(--el-color-primary) !important;
-}
-
-.signed-badge {
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  display: flex;
-  gap: 2px;
-  align-items: center;
-  padding: 2px 8px;
-  font-size: 11px;
-  color: var(--el-color-success);
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-color-success);
-  border-radius: 10px;
-}
-
-/* 可编辑变量样式 */
-.editable-variable {
-  padding: 2px 6px;
-  cursor: pointer;
-  border-radius: 3px;
-  transition: all 0.2s;
-}
-
-.editable-variable:hover {
-  background: var(--el-color-primary-light-9);
-}
-
-.editable-variable.variable-filled {
-  color: var(--el-text-color-primary);
-}
-
-.editable-variable.variable-empty {
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  border: 1px dashed var(--el-color-primary-light-5);
-}
-
-.editable-variable.variable-empty:hover {
-  background: var(--el-color-primary-light-8);
-  border-color: var(--el-color-primary);
-}
-
-/* 变量编辑弹窗按钮 */
-.var-btn {
-  padding: 4px 12px;
-  font-size: 12px;
-  color: var(--el-text-color-regular);
-  cursor: pointer;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color);
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.var-btn:hover {
-  color: var(--el-color-primary);
-  border-color: var(--el-color-primary);
-}
-
-.var-btn-primary {
-  color: white;
-  background: var(--el-color-primary);
-  border-color: var(--el-color-primary);
-}
-
-.var-btn-primary:hover {
-  background: var(--el-color-primary-light-3);
-  border-color: var(--el-color-primary-light-3);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/components/ContractSignDialog.vue b/web/apps/web-ele/src/components/contract-design/components/ContractSignDialog.vue
deleted file mode 100644
index 3590364..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/ContractSignDialog.vue
+++ /dev/null
@@ -1,356 +0,0 @@
-<script setup lang="ts">
-import type {
-  ContractTemplateConfig,
-  PartyType,
-  VariableConfig,
-} from '../store/contractDesignStore';
-
-import { computed, ref, watch } from 'vue';
-
-import { Check, FileSignature, Pencil } from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import {
-  ElButton,
-  ElDatePicker,
-  ElDialog,
-  ElDivider,
-  ElForm,
-  ElFormItem,
-  ElIcon,
-  ElInput,
-  ElInputNumber,
-  ElMessage,
-  ElScrollbar,
-  ElStep,
-  ElSteps,
-  ElTabPane,
-  ElTabs,
-} from 'element-plus';
-
-import ContractRenderer from './ContractRenderer.vue';
-import SignaturePad from './SignaturePad.vue';
-
-const props = defineProps<{
-  config: ContractTemplateConfig;
-  partyType?: PartyType;
-  visible: boolean;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-  (
-    e: 'signed',
-    data: { seal?: string; signature: string; variables: Record<string, any> },
-  ): void;
-}>();
-
-const dialogVisible = computed({
-  get: () => props.visible,
-  set: (val) => emit('update:visible', val),
-});
-
-// 当前步骤
-const currentStep = ref(0);
-
-// 变量值
-const variableValues = ref<Record<string, any>>({});
-
-// 签名数据
-const signatureData = ref('');
-const sealData = ref('');
-
-// 签名板引用
-const signaturePadRef = ref<InstanceType<typeof SignaturePad> | null>(null);
-
-// 当前签署方标签
-const currentPartyLabel = computed(() => {
-  const party = props.config.parties.find((p) => p.type === props.partyType);
-  return party?.label || $t('contract-design.signer');
-});
-
-// 需要填写的变量（根据签署方过滤）
-const requiredVariables = computed(() => {
-  const partyPrefix = props.partyType?.replace('party_', '') || '';
-  return props.config.variables.filter((v) => {
-    // 通用变量
-    if (!v.code.startsWith('party_')) return true;
-    // 当前签署方的变量
-    if (v.code.startsWith(`party_${partyPrefix}_`)) return true;
-    return false;
-  });
-});
-
-// 初始化变量值
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
-      currentStep.value = 0;
-      signatureData.value = '';
-      sealData.value = '';
-      // 初始化变量默认值
-      const values: Record<string, any> = {};
-      requiredVariables.value.forEach((v) => {
-        values[v.code] = v.defaultValue || '';
-      });
-      variableValues.value = values;
-    }
-  },
-);
-
-// 获取变量输入类型
-const getVariableInputType = (variable: VariableConfig) => {
-  switch (variable.type) {
-    case 'date': {
-      return 'date';
-    }
-    case 'money':
-    case 'number': {
-      return 'number';
-    }
-    default: {
-      return 'text';
-    }
-  }
-};
-
-// 下一步
-const handleNext = () => {
-  if (currentStep.value === 0) {
-    // 验证必填变量
-    const missingRequired = requiredVariables.value.filter(
-      (v) => v.required && !variableValues.value[v.code],
-    );
-    if (missingRequired.length > 0) {
-      ElMessage.warning(
-        $t('contract-design.pleaseCompleteMandatoryFields', {
-          fields: missingRequired.map((v) => v.name).join('、'),
-        }),
-      );
-      return;
-    }
-  }
-  currentStep.value++;
-};
-
-// 上一步
-const handlePrev = () => {
-  currentStep.value--;
-};
-
-// 确认签署
-const handleSign = () => {
-  if (!signatureData.value) {
-    ElMessage.warning($t('contract-design.pleaseSignFirst'));
-    return;
-  }
-
-  emit('signed', {
-    variables: variableValues.value,
-    signature: signatureData.value,
-    seal: sealData.value,
-  });
-
-  dialogVisible.value = false;
-  ElMessage.success($t('contract-design.signedSuccessfully'));
-};
-
-// 签名变化
-const handleSignatureChange = (data: string) => {
-  signatureData.value = data;
-};
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="`${$t('contract-design.contractSigning')} - ${currentPartyLabel}`"
-    width="900px"
-    :close-on-click-modal="false"
-    destroy-on-close
-  >
-    <template #header>
-      <div class="flex items-center gap-2">
-        <ElIcon :size="20" class="text-[var(--el-color-primary)]">
-          <FileSignature />
-        </ElIcon>
-        <span
-          >{{ $t('contract-design.contractSigning') }} -
-          {{ currentPartyLabel }}</span
-        >
-      </div>
-    </template>
-
-    <!-- 步骤条 -->
-    <ElSteps :active="currentStep" finish-status="success" class="mb-6">
-      <ElStep :title="$t('contract-design.fillInformation')" />
-      <ElStep :title="$t('contract-design.previewContract')" />
-      <ElStep :title="$t('contract-design.signatureConfirmation')" />
-    </ElSteps>
-
-    <!-- 步骤内容 -->
-    <div class="step-content">
-      <!-- 步骤1：填写变量 -->
-      <div v-show="currentStep === 0" class="step-panel">
-        <ElScrollbar max-height="400px">
-          <ElForm label-position="top" label-width="auto">
-            <div class="grid grid-cols-2 gap-4">
-              <ElFormItem
-                v-for="variable in requiredVariables"
-                :key="variable.code"
-                :label="variable.name"
-                :required="variable.required"
-              >
-                <!-- 文本输入 -->
-                <ElInput
-                  v-if="getVariableInputType(variable) === 'text'"
-                  v-model="variableValues[variable.code]"
-                  :placeholder="
-                    $t('contract-design.pleaseEnter', { field: variable.name })
-                  "
-                />
-                <!-- 数字输入 -->
-                <ElInputNumber
-                  v-else-if="getVariableInputType(variable) === 'number'"
-                  v-model="variableValues[variable.code]"
-                  :placeholder="
-                    $t('contract-design.pleaseEnter', { field: variable.name })
-                  "
-                  :precision="variable.type === 'money' ? 2 : 0"
-                  :controls="false"
-                  class="w-full"
-                />
-                <!-- 日期选择 -->
-                <ElDatePicker
-                  v-else-if="getVariableInputType(variable) === 'date'"
-                  v-model="variableValues[variable.code]"
-                  type="date"
-                  :placeholder="
-                    $t('contract-design.pleaseSelect', { field: variable.name })
-                  "
-                  :format="variable.format || 'YYYY-MM-DD'"
-                  :value-format="variable.format || 'YYYY-MM-DD'"
-                  class="w-full"
-                />
-              </ElFormItem>
-            </div>
-          </ElForm>
-        </ElScrollbar>
-      </div>
-
-      <!-- 步骤2：预览合同 -->
-      <div v-show="currentStep === 1" class="step-panel">
-        <ElScrollbar max-height="500px">
-          <div class="flex justify-center bg-[var(--el-fill-color-light)] p-4">
-            <ContractRenderer
-              :config="config"
-              :variables="variableValues"
-              show-border
-            />
-          </div>
-        </ElScrollbar>
-      </div>
-
-      <!-- 步骤3：签名确认 -->
-      <div v-show="currentStep === 2" class="step-panel">
-        <ElTabs type="border-card">
-          <ElTabPane>
-            <template #label>
-              <span class="flex items-center gap-1">
-                <ElIcon><Pencil /></ElIcon>
-                {{ $t('contract-design.drawSignature') }}
-              </span>
-            </template>
-            <div class="flex flex-col items-center py-4">
-              <div class="mb-2 text-sm text-[var(--el-text-color-secondary)]">
-                {{ $t('contract-design.pleaseSignInArea') }}
-              </div>
-              <SignaturePad
-                ref="signaturePadRef"
-                :width="400"
-                :height="150"
-                :model-value="signatureData"
-                @change="handleSignatureChange"
-              />
-            </div>
-          </ElTabPane>
-        </ElTabs>
-
-        <ElDivider />
-
-        <!-- 签名预览 -->
-        <div v-if="signatureData" class="signature-preview">
-          <div class="mb-2 text-sm font-bold">
-            {{ $t('contract-design.signaturePreview') }}：
-          </div>
-          <div class="flex items-center gap-4">
-            <div class="rounded border border-[var(--el-border-color)] p-2">
-              <img
-                :src="signatureData"
-                :alt="$t('contract-design.signaturePreview')"
-                class="h-16"
-              />
-            </div>
-            <div class="text-sm text-[var(--el-text-color-secondary)]">
-              <div>
-                {{ $t('contract-design.signer') }}：{{ currentPartyLabel }}
-              </div>
-              <div>
-                {{ $t('contract-design.signingTime') }}：{{
-                  new Date().toLocaleString('zh-CN')
-                }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <template #footer>
-      <div class="flex justify-between">
-        <div>
-          <ElButton v-if="currentStep > 0" @click="handlePrev">
-            {{ $t('contract-design.previousStep') }}
-          </ElButton>
-        </div>
-        <div>
-          <ElButton @click="dialogVisible = false">
-            {{ $t('contract-design.cancel') }}
-          </ElButton>
-          <ElButton v-if="currentStep < 2" type="primary" @click="handleNext">
-            {{ $t('contract-design.nextStep') }}
-          </ElButton>
-          <ElButton
-            v-else
-            type="primary"
-            :disabled="!signatureData"
-            @click="handleSign"
-          >
-            <ElIcon class="mr-1"><Check /></ElIcon>
-            {{ $t('contract-design.confirmSigning') }}
-          </ElButton>
-        </div>
-      </div>
-    </template>
-  </ElDialog>
-</template>
-
-<style scoped>
-.step-content {
-  min-height: 300px;
-}
-
-.step-panel {
-  padding: 16px 0;
-}
-
-:deep(.el-input-number) {
-  width: 100%;
-}
-
-:deep(.el-input-number .el-input__wrapper) {
-  padding-right: 11px;
-  padding-left: 11px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/components/DesignCanvas.vue b/web/apps/web-ele/src/components/contract-design/components/DesignCanvas.vue
deleted file mode 100644
index f2a4b85..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/DesignCanvas.vue
+++ /dev/null
@@ -1,376 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue';
-
-import {
-  Code,
-  Download,
-  Eye,
-  FileText,
-  RotateCcw,
-  RotateCw,
-  Save,
-  Trash2,
-  Upload,
-} from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import {
-  ElButton,
-  ElEmpty,
-  ElIcon,
-  ElScrollbar,
-  ElTooltip,
-} from 'element-plus';
-import { storeToRefs } from 'pinia';
-import draggable from 'vuedraggable';
-
-import { useContractDesignStore } from '../store/contractDesignStore';
-import ElementWrapper from './ElementWrapper.vue';
-
-const emit = defineEmits<{
-  (e: 'preview'): void;
-  (e: 'view-code'): void;
-  (e: 'clear'): void;
-  (e: 'import'): void;
-  (e: 'export'): void;
-  (e: 'save'): void;
-}>();
-
-const store = useContractDesignStore();
-const { templateConfig, canUndo, canRedo, isDragging } = storeToRefs(store);
-
-// 页面尺寸映射（单位：px，96dpi）
-const pageSizeMap = {
-  A4: { width: 794, height: 1123 },
-  A5: { width: 559, height: 794 },
-  Letter: { width: 816, height: 1056 },
-};
-
-// 画布引用
-const canvasPaperRef = ref<HTMLElement | null>(null);
-
-// 分页线位置列表
-const pageBreakLines = ref<number[]>([]);
-
-// 计算内容区域高度（减去上下边距）
-const contentAreaHeight = computed(() => {
-  const size = pageSizeMap[templateConfig.value.pageSize];
-  const margin = templateConfig.value.pageMargin;
-  return size.height - margin.top - margin.bottom;
-});
-
-// 画布样式
-const canvasStyle = computed(() => {
-  const size = pageSizeMap[templateConfig.value.pageSize];
-  const margin = templateConfig.value.pageMargin;
-  return {
-    width: `${size.width}px`,
-    minHeight: `${size.height}px`,
-    padding: `${margin.top}px ${margin.right}px ${margin.bottom}px ${margin.left}px`,
-  };
-});
-
-// 计算分页线位置
-const calculatePageBreaks = () => {
-  if (!canvasPaperRef.value) return;
-
-  const pageHeight = pageSizeMap[templateConfig.value.pageSize].height;
-  const margin = templateConfig.value.pageMargin;
-
-  // 获取内容区域的实际高度（不包含 padding）
-  const contentEl = canvasPaperRef.value.querySelector(
-    '.sortable-content',
-  ) as HTMLElement;
-  const actualContentHeight = contentEl ? contentEl.scrollHeight : 0;
-
-  // 每页内容区域高度（不含边距）
-  const pageContentHeight = pageHeight - margin.top - margin.bottom;
-
-  // 计算需要多少页
-  const pageCount = Math.ceil(actualContentHeight / pageContentHeight);
-
-  // 生成分页线位置
-  // 分页线应该在每页内容区域结束的位置（相对于画布顶部）
-  const lines: number[] = [];
-  for (let i = 1; i < pageCount; i++) {
-    // 分页线位置 = 顶部边距 + 每页内容高度 * 页数
-    lines.push(margin.top + pageContentHeight * i);
-  }
-
-  pageBreakLines.value = lines;
-};
-
-// 监听元素变化，重新计算分页
-watch(
-  () => templateConfig.value.elements,
-  () => {
-    nextTick(() => {
-      calculatePageBreaks();
-    });
-  },
-  { deep: true },
-);
-
-// 使用 ResizeObserver 监听画布大小变化
-let resizeObserver: null | ResizeObserver = null;
-
-onMounted(() => {
-  nextTick(() => {
-    calculatePageBreaks();
-
-    if (canvasPaperRef.value) {
-      resizeObserver = new ResizeObserver(() => {
-        calculatePageBreaks();
-      });
-      resizeObserver.observe(canvasPaperRef.value);
-    }
-  });
-});
-
-onUnmounted(() => {
-  if (resizeObserver) {
-    resizeObserver.disconnect();
-  }
-});
-
-// 点击画布空白处取消选中
-const handleCanvasClick = () => {
-  store.setActive(null);
-};
-
-// 拖拽结束后记录快照
-const handleDragEnd = () => {
-  store.setDragging(false);
-  store.recordSnapshot();
-};
-
-// 处理拖拽添加
-const handleDragAdd = () => {
-  store.recordSnapshot();
-};
-</script>
-
-<template>
-  <div
-    class="design-canvas flex h-full flex-col rounded border border-[var(--el-border-color)] bg-[var(--el-bg-color)]"
-  >
-    <!-- 工具栏 -->
-    <div
-      class="canvas-toolbar flex flex-shrink-0 items-center justify-between border-b border-[var(--el-border-color)] px-4 py-2"
-    >
-      <div class="flex items-center gap-2">
-        <ElIcon :size="18" class="text-[var(--el-color-primary)]">
-          <FileText />
-        </ElIcon>
-        <span class="text-sm font-bold">{{
-          templateConfig.name || $t('contract-design.contractTemplate')
-        }}</span>
-        <span class="text-xs text-[var(--el-text-color-placeholder)]">
-          ({{ templateConfig.elements.length }}
-          {{ $t('contract-design.elements') }})
-        </span>
-      </div>
-
-      <div class="flex items-center gap-1">
-        <!-- 撤销/重做 -->
-        <ElTooltip
-          :content="`${$t('contract-design.undo')} (Ctrl+Z)`"
-          placement="bottom"
-        >
-          <ElButton text :disabled="!canUndo" @click="store.undo()">
-            <ElIcon :size="16"><RotateCcw /></ElIcon>
-          </ElButton>
-        </ElTooltip>
-        <ElTooltip
-          :content="`${$t('contract-design.redo')} (Ctrl+Y)`"
-          placement="bottom"
-        >
-          <ElButton text :disabled="!canRedo" @click="store.redo()">
-            <ElIcon :size="16"><RotateCw /></ElIcon>
-          </ElButton>
-        </ElTooltip>
-
-        <div class="mx-2 h-4 w-px bg-[var(--el-border-color)]"></div>
-
-        <!-- 预览 -->
-        <ElTooltip :content="$t('contract-design.preview')" placement="bottom">
-          <ElButton text @click="emit('preview')">
-            <ElIcon :size="16"><Eye /></ElIcon>
-          </ElButton>
-        </ElTooltip>
-
-        <!-- 查看代码 -->
-        <ElTooltip :content="$t('contract-design.viewJSON')" placement="bottom">
-          <ElButton text @click="emit('view-code')">
-            <ElIcon :size="16"><Code /></ElIcon>
-          </ElButton>
-        </ElTooltip>
-
-        <div class="mx-2 h-4 w-px bg-[var(--el-border-color)]"></div>
-
-        <!-- 导入 -->
-        <ElTooltip :content="$t('contract-design.import')" placement="bottom">
-          <ElButton text @click="emit('import')">
-            <ElIcon :size="16"><Upload /></ElIcon>
-          </ElButton>
-        </ElTooltip>
-
-        <!-- 导出 -->
-        <ElTooltip :content="$t('contract-design.export')" placement="bottom">
-          <ElButton text @click="emit('export')">
-            <ElIcon :size="16"><Download /></ElIcon>
-          </ElButton>
-        </ElTooltip>
-
-        <!-- 清空 -->
-        <ElTooltip :content="$t('contract-design.clear')" placement="bottom">
-          <ElButton text @click="emit('clear')">
-            <ElIcon :size="16"><Trash2 /></ElIcon>
-          </ElButton>
-        </ElTooltip>
-
-        <div class="mx-2 h-4 w-px bg-[var(--el-border-color)]"></div>
-
-        <!-- 保存 -->
-        <ElButton type="primary" size="small" @click="emit('save')">
-          <ElIcon :size="14" class="mr-1"><Save /></ElIcon>
-          {{ $t('contract-design.save') }}
-        </ElButton>
-      </div>
-    </div>
-
-    <!-- 画布区域 -->
-    <ElScrollbar class="flex-1">
-      <div
-        class="canvas-container flex justify-center bg-[var(--el-fill-color-light)] p-6"
-      >
-        <div class="canvas-paper-wrapper relative">
-          <div
-            ref="canvasPaperRef"
-            class="canvas-paper relative bg-[var(--el-bg-color)] shadow-lg"
-            :style="canvasStyle"
-            :class="{ 'is-dragging': isDragging }"
-            @click.self="handleCanvasClick"
-          >
-            <!-- 空状态 -->
-            <ElEmpty
-              v-if="templateConfig.elements.length === 0 && !isDragging"
-              :description="$t('contract-design.dragOrClickToAdd')"
-              :image-size="80"
-            />
-
-            <!-- 元素列表 -->
-            <draggable
-              v-model="templateConfig.elements"
-              group="contract-design"
-              item-key="id"
-              handle=".drag-handle"
-              ghost-class="ghost-element"
-              chosen-class="chosen-element"
-              class="sortable-content"
-              :animation="200"
-              @start="store.setDragging(true)"
-              @end="handleDragEnd"
-              @add="handleDragAdd"
-            >
-              <template #item="{ element, index }">
-                <ElementWrapper
-                  :element="element"
-                  :index="index"
-                  :total="templateConfig.elements.length"
-                />
-              </template>
-            </draggable>
-
-            <!-- 拖拽提示 -->
-            <div
-              v-if="isDragging && templateConfig.elements.length === 0"
-              class="drop-hint flex h-20 items-center justify-center rounded border-2 border-dashed border-[var(--el-color-primary)] bg-[var(--el-color-primary-light-9)]"
-            >
-              <span class="text-sm text-[var(--el-color-primary)]">{{
-                $t('contract-design.releaseToAdd')
-              }}</span>
-            </div>
-
-            <!-- 分页线 -->
-            <div
-              v-for="(linePos, index) in pageBreakLines"
-              :key="`page-break-${index}`"
-              class="page-break-line"
-              :style="{ top: `${linePos}px` }"
-            >
-              <div class="page-break-label">
-                {{
-                  $t('contract-design.pageBreakLabel', {
-                    page1: index + 1,
-                    page2: index + 2,
-                  })
-                }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </ElScrollbar>
-
-    <!-- 底部状态栏 -->
-    <div
-      class="canvas-footer flex flex-shrink-0 items-center justify-between border-t border-[var(--el-border-color)] px-4 py-1.5 text-xs text-[var(--el-text-color-secondary)]"
-    >
-      <div>
-        {{ $t('contract-design.pageSize') }}: {{ templateConfig.pageSize }}
-      </div>
-      <div>
-        {{ $t('contract-design.margin') }}:
-        {{ templateConfig.pageMargin.top }}px /
-        {{ templateConfig.pageMargin.right }}px /
-        {{ templateConfig.pageMargin.bottom }}px /
-        {{ templateConfig.pageMargin.left }}px
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.canvas-paper {
-  transition: box-shadow 0.2s;
-}
-
-.canvas-paper.is-dragging {
-  box-shadow: 0 0 0 2px var(--el-color-primary);
-}
-
-.ghost-element {
-  background: var(--el-color-primary-light-9);
-  border: 1px dashed var(--el-color-primary);
-  opacity: 0.5;
-}
-
-.chosen-element {
-  opacity: 0.8;
-}
-
-/* 分页线样式 */
-.page-break-line {
-  position: absolute;
-  right: -20px;
-  left: -20px;
-  z-index: 100;
-  height: 0;
-  pointer-events: none;
-  border-top: 2px dashed var(--el-color-danger);
-}
-
-.page-break-label {
-  position: absolute;
-  top: -10px;
-  left: 50%;
-  padding: 2px 12px;
-  font-size: 11px;
-  color: var(--el-color-danger);
-  white-space: nowrap;
-  background-color: var(--el-color-danger-light-9);
-  border-radius: 10px;
-  transform: translateX(-50%);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/components/ElementRenderer.vue b/web/apps/web-ele/src/components/contract-design/components/ElementRenderer.vue
deleted file mode 100644
index de759d0..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/ElementRenderer.vue
+++ /dev/null
@@ -1,714 +0,0 @@
-<script setup lang="ts">
-import type { ContractElement } from '../store/contractDesignStore';
-
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-
-import { Calendar, Circle, Pencil } from '@vben/icons';
-
-import { ElDivider, ElIcon, ElTable, ElTableColumn } from 'element-plus';
-
-const props = defineProps<{
-  editable?: boolean;
-  element: ContractElement;
-  isDesign?: boolean;
-  variables?: Record<string, any>;
-}>();
-
-const emit = defineEmits<{
-  (e: 'variableClick', code: string): void;
-}>();
-
-// 富文本容器引用
-const richTextRef = ref<HTMLElement | null>(null);
-
-// 获取变量值
-const getVariableValue = (code: string) => {
-  if (props.variables && props.variables[code]) {
-    return props.variables[code];
-  }
-  return props.element.props.placeholder || `{{${code}}}`;
-};
-
-// 检查变量是否已填写
-const isVariableFilled = (code: string) => {
-  return (
-    props.variables &&
-    props.variables[code] !== undefined &&
-    props.variables[code] !== ''
-  );
-};
-
-// 处理富文本中的变量替换
-const processRichTextContent = computed(() => {
-  let content = props.element.props.content || '';
-
-  // 替换 【变量名称|变量code】 格式的变量（新格式）
-  content = content.replaceAll(
-    /【([^|【】]+)\|([^【】]+)】/g,
-    (_match: string, name: string, code: string) => {
-      const trimmedCode = code.trim();
-      const value = props.variables?.[trimmedCode];
-      const displayValue =
-        value !== undefined && value !== '' ? value : name.trim();
-      const filledClass =
-        value !== undefined && value !== '' ? 'filled' : 'empty';
-
-      if (props.editable) {
-        return `<span class="rich-text-variable ${filledClass}" data-var-code="${trimmedCode}">${displayValue}</span>`;
-      } else if (value !== undefined && value !== '') {
-        return `<span class="variable-replaced">${value}</span>`;
-      }
-      // 设计模式下显示带下划线的变量名称
-      return `<span class="contract-variable-tag" data-variable="${trimmedCode}">${name.trim()}</span>`;
-    },
-  );
-
-  // 替换 {{variableCode}} 格式的变量（旧格式，兼容）
-  content = content.replaceAll(
-    /\{\{([^}]+)\}\}/g,
-    (match: string, code: string) => {
-      const trimmedCode = code.trim();
-      const value = props.variables?.[trimmedCode];
-      const displayValue =
-        value !== undefined && value !== '' ? value : `点击填写`;
-      const filledClass =
-        value !== undefined && value !== '' ? 'filled' : 'empty';
-
-      if (props.editable) {
-        return `<span class="rich-text-variable ${filledClass}" data-var-code="${trimmedCode}">${displayValue}</span>`;
-      } else if (value !== undefined && value !== '') {
-        return `<span class="variable-replaced">${value}</span>`;
-      }
-      return match;
-    },
-  );
-
-  // 替换 contract-variable-tag 标签中的变量（HTML格式，兼容）
-  content = content.replaceAll(
-    /<span[^>]*class="contract-variable-tag"[^>]*data-variable="([^"]+)"[^>]*>[^<]*<\/span>/g,
-    (match: string, code: string) => {
-      const trimmedCode = code.trim();
-      const value = props.variables?.[trimmedCode];
-      const displayValue =
-        value !== undefined && value !== '' ? value : `点击填写`;
-      const filledClass =
-        value !== undefined && value !== '' ? 'filled' : 'empty';
-
-      if (props.editable) {
-        return `<span class="rich-text-variable ${filledClass}" data-var-code="${trimmedCode}">${displayValue}</span>`;
-      } else if (value !== undefined && value !== '') {
-        return `<span class="variable-replaced">${value}</span>`;
-      }
-      return match;
-    },
-  );
-
-  return content;
-});
-
-// 处理富文本中变量的点击事件
-const handleRichTextClick = (e: MouseEvent) => {
-  if (!props.editable) return;
-
-  const target = e.target as HTMLElement;
-  if (target.classList.contains('rich-text-variable')) {
-    const varCode = target.dataset.varCode;
-    if (varCode) {
-      emit('variableClick', varCode);
-    }
-  }
-};
-
-// 挂载和卸载事件监听
-onMounted(() => {
-  if (richTextRef.value) {
-    richTextRef.value.addEventListener('click', handleRichTextClick);
-  }
-});
-
-onUnmounted(() => {
-  if (richTextRef.value) {
-    richTextRef.value.removeEventListener('click', handleRichTextClick);
-  }
-});
-
-// 计算样式
-const titleStyle = computed(() => {
-  const { fontSize, fontWeight, align } = props.element.props;
-  return {
-    fontSize: `${fontSize}px`,
-    fontWeight,
-    textAlign: align,
-  };
-});
-
-const paragraphStyle = computed(() => {
-  const { fontSize, lineHeight, align, indent } = props.element.props;
-  return {
-    fontSize: `${fontSize}px`,
-    lineHeight,
-    textAlign: align,
-    textIndent: indent ? `${indent}em` : undefined,
-  };
-});
-
-const variableStyle = computed(() => {
-  const { underline, minWidth } = props.element.props;
-  return {
-    minWidth: `${minWidth}px`,
-    borderBottom: underline ? '1px solid var(--el-text-color-primary)' : 'none',
-    display: 'inline-block',
-    textAlign: 'center' as const,
-  };
-});
-
-const signatureStyle = computed(() => {
-  const { width, height, showBorder } = props.element.props;
-  return {
-    width: `${width}px`,
-    height: `${height}px`,
-    border: showBorder ? '1px dashed var(--el-border-color)' : 'none',
-  };
-});
-
-// 签署区容器对齐样式
-const signatureContainerStyle = computed(() => {
-  const align = props.element.props.align || 'right';
-  return {
-    display: 'flex',
-    justifyContent:
-      align === 'center'
-        ? 'center'
-        : align === 'right'
-          ? 'flex-end'
-          : 'flex-start',
-  };
-});
-
-const imageStyle = computed(() => {
-  const { width, height, align } = props.element.props;
-  return {
-    width: typeof width === 'number' ? `${width}px` : width,
-    height: height === 'auto' ? 'auto' : `${height}px`,
-    display: 'block',
-    margin:
-      align === 'center' ? '0 auto' : (align === 'right' ? '0 0 0 auto' : '0'),
-  };
-});
-</script>
-
-<template>
-  <div class="element-renderer">
-    <!-- 标题 -->
-    <template v-if="element.type === 'title'">
-      <h1
-        v-if="element.props.level === 1"
-        :style="titleStyle"
-        class="contract-title"
-      >
-        {{ element.props.content }}
-      </h1>
-      <h2
-        v-else-if="element.props.level === 2"
-        :style="titleStyle"
-        class="contract-title"
-      >
-        {{ element.props.content }}
-      </h2>
-      <h3 v-else :style="titleStyle" class="contract-title">
-        {{ element.props.content }}
-      </h3>
-    </template>
-
-    <!-- 段落 -->
-    <template v-else-if="element.type === 'paragraph'">
-      <p :style="paragraphStyle" class="contract-paragraph">
-        {{ element.props.content }}
-      </p>
-    </template>
-
-    <!-- 富文本 -->
-    <template v-else-if="element.type === 'rich-text'">
-      <div
-        ref="richTextRef"
-        class="contract-rich-text"
-        :class="{ 'rich-text-editable': editable }"
-        :style="{
-          minHeight: `${element.props.minHeight}px`,
-          padding: element.props.padding
-            ? `${element.props.padding}px`
-            : undefined,
-          border: element.props.showBorder
-            ? `1px solid ${element.props.borderColor || 'var(--el-border-color)'}`
-            : undefined,
-          borderRadius: element.props.showBorder ? '4px' : undefined,
-          backgroundColor: element.props.backgroundColor || undefined,
-        }"
-        v-html="processRichTextContent"
-      ></div>
-    </template>
-
-    <!-- 变量占位符 -->
-    <template v-else-if="element.type === 'variable'">
-      <span
-        :style="variableStyle"
-        class="contract-variable"
-        :class="{
-          'variable-filled': isVariableFilled(element.props.variableCode),
-          'variable-empty': !isVariableFilled(element.props.variableCode),
-        }"
-      >
-        {{ getVariableValue(element.props.variableCode) }}
-      </span>
-    </template>
-
-    <!-- 表格 -->
-    <template v-else-if="element.type === 'table'">
-      <ElTable
-        :data="element.tableData || []"
-        :border="element.props.bordered"
-        size="small"
-        class="contract-table"
-        :header-cell-style="{ backgroundColor: element.props.headerBgColor }"
-      >
-        <ElTableColumn
-          v-for="col in element.tableColumns"
-          :key="col.key"
-          :prop="col.key"
-          :label="col.title"
-          :width="col.width"
-          :align="col.align"
-        />
-      </ElTable>
-    </template>
-
-    <!-- 签名区 -->
-    <template v-else-if="element.type === 'signature-zone'">
-      <div class="signature-zone-container" :style="signatureContainerStyle">
-        <div class="signature-zone-wrapper">
-          <!-- 标签始终显示在签名区上方 -->
-          <div
-            v-if="element.props.showLabel !== false"
-            class="signature-label mb-1 text-sm text-[var(--el-text-color-regular)]"
-          >
-            {{
-              element.signature?.partyLabel || element.props.label || '签名'
-            }}：
-          </div>
-          <div class="signature-zone" :style="signatureStyle">
-            <div class="signature-content">
-              <ElIcon
-                :size="24"
-                class="mb-2 text-[var(--el-text-color-placeholder)]"
-              >
-                <Pencil />
-              </ElIcon>
-              <div class="text-xs text-[var(--el-text-color-placeholder)]">
-                点击签名
-              </div>
-            </div>
-          </div>
-          <div
-            v-if="element.signature?.showDate"
-            class="signature-date mt-2 text-xs text-[var(--el-text-color-secondary)]"
-          >
-            日期：____________
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <!-- 盖章区 -->
-    <template v-else-if="element.type === 'seal-zone'">
-      <div class="seal-zone-container" :style="signatureContainerStyle">
-        <div class="seal-zone-wrapper">
-          <!-- 标签始终显示在盖章区上方 -->
-          <div
-            v-if="element.props.showLabel !== false"
-            class="seal-label mb-1 text-sm text-[var(--el-text-color-regular)]"
-          >
-            {{
-              element.signature?.partyLabel || element.props.label || '盖章处'
-            }}：
-          </div>
-          <div class="seal-zone" :style="signatureStyle">
-            <div class="seal-content">
-              <ElIcon
-                :size="32"
-                class="mb-2 text-[var(--el-text-color-placeholder)]"
-              >
-                <Circle />
-              </ElIcon>
-              <div class="text-xs text-[var(--el-text-color-placeholder)]">
-                点击盖章
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <!-- 日期区 -->
-    <template v-else-if="element.type === 'date-zone'">
-      <div class="date-zone-container" :style="signatureContainerStyle">
-        <div class="date-zone inline-flex items-center">
-          <ElIcon :size="16" class="mr-1 text-[var(--el-text-color-secondary)]">
-            <Calendar />
-          </ElIcon>
-          <span class="text-sm">{{ element.props.label }}：</span>
-          <span
-            :class="{
-              'border-b border-[var(--el-text-color-primary)]':
-                element.props.showUnderline,
-            }"
-            class="inline-block min-w-[120px] text-center"
-          >
-            {{ element.props.format }}
-          </span>
-        </div>
-      </div>
-    </template>
-
-    <!-- 分割线 -->
-    <template v-else-if="element.type === 'divider'">
-      <ElDivider
-        :border-style="element.props.style"
-        :style="{
-          margin: `${element.props.margin}px 0`,
-          borderColor: element.props.color,
-        }"
-      />
-    </template>
-
-    <!-- 分页符 -->
-    <template v-else-if="element.type === 'page-break'">
-      <div class="page-break">
-        <div class="page-break-line"></div>
-        <span class="page-break-text">分页符</span>
-        <div class="page-break-line"></div>
-      </div>
-    </template>
-
-    <!-- 图片 -->
-    <template v-else-if="element.type === 'image'">
-      <img
-        v-if="element.props.src"
-        :src="element.props.src"
-        :style="imageStyle"
-        class="contract-image"
-        alt="合同图片"
-      />
-      <div
-        v-else
-        :style="{ ...imageStyle, height: '100px' }"
-        class="image-placeholder flex items-center justify-center rounded border border-dashed border-[var(--el-border-color)] bg-[var(--el-fill-color-light)]"
-      >
-        <span class="text-xs text-[var(--el-text-color-placeholder)]"
-          >图片占位</span
-        >
-      </div>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.contract-title {
-  padding: 8px 0;
-  margin: 0;
-}
-
-.contract-paragraph {
-  padding: 4px 0;
-  margin: 0;
-}
-
-.contract-rich-text {
-  padding: 4px 0;
-}
-
-/* 富文本内容样式 */
-.contract-rich-text :deep(h1) {
-  margin: 0.67em 0;
-  font-size: 2em;
-  font-weight: bold;
-}
-
-.contract-rich-text :deep(h2) {
-  margin: 0.83em 0;
-  font-size: 1.5em;
-  font-weight: bold;
-}
-
-.contract-rich-text :deep(h3) {
-  margin: 1em 0;
-  font-size: 1.17em;
-  font-weight: bold;
-}
-
-.contract-rich-text :deep(p) {
-  margin: 1em 0;
-}
-
-/* 空段落保持高度，确保空行正常显示 */
-.contract-rich-text :deep(p:empty),
-.contract-rich-text :deep(p:has(br:only-child)) {
-  min-height: 1em;
-}
-
-.contract-rich-text :deep(p:empty::before) {
-  content: '\00a0'; /* 不间断空格 */
-}
-
-.contract-rich-text :deep(strong),
-.contract-rich-text :deep(b) {
-  font-weight: bold;
-}
-
-.contract-rich-text :deep(em),
-.contract-rich-text :deep(i) {
-  font-style: italic;
-}
-
-.contract-rich-text :deep(u) {
-  text-decoration: underline;
-}
-
-.contract-rich-text :deep(s),
-.contract-rich-text :deep(strike) {
-  text-decoration: line-through;
-}
-
-.contract-rich-text :deep(ul) {
-  padding-left: 2em;
-  margin: 1em 0;
-  list-style-type: disc;
-}
-
-.contract-rich-text :deep(ol) {
-  padding-left: 2em;
-  margin: 1em 0;
-  list-style-type: decimal;
-}
-
-.contract-rich-text :deep(li) {
-  margin: 0.5em 0;
-}
-
-.contract-rich-text :deep(blockquote) {
-  padding-left: 1em;
-  margin: 1em 0;
-  color: var(--el-text-color-secondary);
-  border-left: 3px solid var(--el-border-color);
-}
-
-.contract-rich-text :deep(a) {
-  color: var(--el-color-primary);
-  text-decoration: underline;
-}
-
-.contract-rich-text :deep(code) {
-  padding: 0.2em 0.4em;
-  font-family: monospace;
-  background-color: var(--el-fill-color-light);
-  border-radius: 3px;
-}
-
-.contract-rich-text :deep(pre) {
-  padding: 1em;
-  overflow-x: auto;
-  background-color: var(--el-fill-color-light);
-  border-radius: 4px;
-}
-
-.contract-rich-text :deep(table) {
-  width: 100%;
-  margin: 1em 0;
-  border-collapse: collapse;
-}
-
-.contract-rich-text :deep(th),
-.contract-rich-text :deep(td) {
-  padding: 8px 12px;
-  text-align: left;
-  border: 1px solid var(--el-border-color);
-}
-
-.contract-rich-text :deep(th) {
-  font-weight: bold;
-  background-color: var(--el-fill-color-light);
-}
-
-.contract-rich-text :deep(img) {
-  max-width: 100%;
-  height: auto;
-}
-
-/* 图片对齐 - 通过 data-alignment 属性 */
-.contract-rich-text :deep(img[data-alignment='center']) {
-  display: block !important;
-  margin-right: auto !important;
-  margin-left: auto !important;
-}
-
-.contract-rich-text :deep(img[data-alignment='left']) {
-  display: block !important;
-  margin-right: auto !important;
-  margin-left: 0 !important;
-}
-
-.contract-rich-text :deep(img[data-alignment='right']) {
-  display: block !important;
-  margin-right: 0 !important;
-  margin-left: auto !important;
-}
-
-/* 没有 data-alignment 的图片默认居中 */
-.contract-rich-text :deep(img:not([data-alignment])) {
-  display: block;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-.contract-rich-text :deep(hr) {
-  margin: 1em 0;
-  border: none;
-  border-top: 1px solid var(--el-border-color);
-}
-
-.contract-rich-text :deep(mark) {
-  padding: 0 0.2em;
-  background-color: #ff0;
-}
-
-/* 文本对齐 */
-.contract-rich-text :deep([style*='text-align: center']),
-.contract-rich-text :deep([style*='text-align:center']) {
-  text-align: center;
-}
-
-.contract-rich-text :deep([style*='text-align: right']),
-.contract-rich-text :deep([style*='text-align:right']) {
-  text-align: right;
-}
-
-.contract-rich-text :deep([style*='text-align: justify']),
-.contract-rich-text :deep([style*='text-align:justify']) {
-  text-align: justify;
-}
-
-.contract-variable {
-  padding: 0 4px;
-}
-
-.contract-variable.variable-filled {
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.contract-variable.variable-empty {
-  color: var(--el-text-color-placeholder);
-}
-
-.contract-table {
-  width: 100%;
-}
-
-.signature-zone,
-.seal-zone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-}
-
-.signature-content,
-.seal-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.page-break {
-  display: flex;
-  align-items: center;
-  padding: 16px 0;
-}
-
-.page-break-line {
-  flex: 1;
-  height: 1px;
-  background: repeating-linear-gradient(
-    90deg,
-    var(--el-border-color) 0,
-    var(--el-border-color) 4px,
-    transparent 4px,
-    transparent 8px
-  );
-}
-
-.page-break-text {
-  padding: 0 12px;
-  font-size: 12px;
-  color: var(--el-text-color-placeholder);
-}
-
-.contract-image {
-  max-width: 100%;
-}
-
-/* 富文本中的变量标签样式 - 添加下划线 */
-.contract-rich-text :deep(.contract-variable-tag) {
-  display: inline-block;
-  padding: 0 6px;
-  padding-bottom: 2px;
-  margin: 0 2px;
-  font-family: monospace;
-  font-size: inherit;
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  border-bottom: 2px solid var(--el-color-primary);
-  border-radius: 0;
-}
-
-/* 变量替换后的样式 - 添加下划线 */
-.contract-rich-text :deep(.variable-replaced) {
-  padding-bottom: 1px;
-  font-weight: inherit;
-  color: inherit;
-  border-bottom: 1px solid currentcolor;
-}
-
-/* 富文本中可编辑变量样式 - 添加下划线 */
-.contract-rich-text :deep(.rich-text-variable) {
-  display: inline-block;
-  padding: 2px 8px;
-  padding-bottom: 3px;
-  margin: 0 2px;
-  cursor: pointer;
-  border-bottom: 2px solid var(--el-color-primary);
-  border-radius: 3px 3px 0 0;
-  transition: all 0.2s;
-}
-
-.contract-rich-text :deep(.rich-text-variable.filled) {
-  color: var(--el-text-color-primary);
-  background: var(--el-color-success-light-9);
-  border-bottom: 2px solid var(--el-color-success);
-}
-
-.contract-rich-text :deep(.rich-text-variable.filled:hover) {
-  background: var(--el-color-success-light-8);
-}
-
-.contract-rich-text :deep(.rich-text-variable.empty) {
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  border-bottom: 2px dashed var(--el-color-primary);
-}
-
-.contract-rich-text :deep(.rich-text-variable.empty:hover) {
-  background: var(--el-color-primary-light-8);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/components/ElementWrapper.vue b/web/apps/web-ele/src/components/contract-design/components/ElementWrapper.vue
deleted file mode 100644
index 92a672c..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/ElementWrapper.vue
+++ /dev/null
@@ -1,538 +0,0 @@
-<script setup lang="ts">
-import type { ContractElement } from '../store/contractDesignStore';
-
-import { computed, nextTick, ref } from 'vue';
-
-import { ArrowDown, ArrowUp, Copy, Plus, Trash2 } from '@vben/icons';
-
-import {
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElIcon,
-  ElInput,
-  ElTooltip,
-} from 'element-plus';
-
-import RichTextEditor from '#/components/zq-form/rich-text-editor/rich-text-editor.vue';
-
-import {
-  predefinedVariables,
-  useContractDesignStore,
-} from '../store/contractDesignStore';
-import ElementRenderer from './ElementRenderer.vue';
-
-const props = defineProps<{
-  element: ContractElement;
-  index: number;
-  total: number;
-}>();
-
-const store = useContractDesignStore();
-
-const isActive = computed(() => store.activeId === props.element.id);
-
-// 编辑状态
-const isEditing = ref(false);
-const editingContent = ref('');
-const inputRef = ref<InstanceType<typeof ElInput> | null>(null);
-
-// 是否可编辑的元素类型
-const isEditable = computed(() => {
-  return ['paragraph', 'rich-text', 'title'].includes(props.element.type);
-});
-
-// 富文本编辑内容
-const richTextContent = ref('');
-
-// 富文本编辑器实例引用
-const richTextEditorRef = ref<any>(null);
-
-// 可用变量列表（预定义 + 模板自定义）
-const availableVariables = computed(() => {
-  const customVars = store.templateConfig.variables || [];
-  return [...predefinedVariables, ...customVars];
-});
-
-const handleSelect = (e: MouseEvent) => {
-  e.stopPropagation();
-  store.setActive(props.element.id);
-};
-
-// 双击进入编辑模式
-const handleDoubleClick = (e: MouseEvent) => {
-  e.stopPropagation();
-  if (!isEditable.value) return;
-
-  isEditing.value = true;
-  editingContent.value = props.element.props.content || '';
-
-  // 富文本直接进入编辑模式
-  if (props.element.type === 'rich-text') {
-    richTextContent.value = props.element.props.content || '';
-    return;
-  }
-
-  nextTick(() => {
-    if (inputRef.value) {
-      inputRef.value.focus();
-    }
-  });
-};
-
-// 保存富文本
-const handleSaveRichText = () => {
-  // 优先使用组件暴露的 getHTML 方法获取最新内容
-  let content = richTextContent.value;
-
-  if (richTextEditorRef.value) {
-    // 尝试使用 getHTML 方法
-    const html = richTextEditorRef.value.getHTML?.();
-    if (html && html !== '<p></p>') {
-      content = html;
-    } else {
-      // 备用：尝试从编辑器实例获取
-      const editor = richTextEditorRef.value.getEditor?.();
-      if (editor) {
-        const editorHtml = editor.getHTML();
-        if (editorHtml && editorHtml !== '<p></p>') {
-          content = editorHtml;
-        }
-      }
-    }
-  }
-
-  // 如果获取到的内容为空或只有空段落，使用原始内容
-  if (!content || content === '<p></p>') {
-    content = props.element.props.content || '';
-  }
-
-  store.updateElementProps(props.element.id, {
-    content,
-  });
-  store.recordSnapshot();
-  isEditing.value = false;
-};
-
-// 富文本内容变化
-const handleRichTextChange = (content: string) => {
-  richTextContent.value = content;
-};
-
-// 根据 code 获取变量名称
-const getVariableName = (code: string) => {
-  const variable = availableVariables.value.find((v) => v.code === code);
-  return variable?.name || code;
-};
-
-// 插入变量到富文本
-const handleInsertVariable = (variableCode: string) => {
-  // 获取编辑器实例并插入
-  const editor = richTextEditorRef.value?.getEditor?.();
-  const variableName = getVariableName(variableCode);
-  // 使用特殊格式：【变量名称|变量code】，便于后续解析
-  const variableText = `【${variableName}|${variableCode}】`;
-
-  if (editor) {
-    // 直接插入文本格式的变量标记
-    editor.chain().focus().insertContent(variableText).run();
-  } else {
-    // 备用方案：直接追加到内容末尾
-    richTextContent.value += variableText;
-  }
-};
-
-// 保存编辑
-const handleSaveEdit = () => {
-  if (editingContent.value !== props.element.props.content) {
-    store.updateElementProps(props.element.id, {
-      content: editingContent.value,
-    });
-    store.recordSnapshot();
-  }
-  isEditing.value = false;
-};
-
-// 取消编辑
-const handleCancelEdit = () => {
-  isEditing.value = false;
-  editingContent.value = props.element.props.content || '';
-};
-
-// 处理键盘事件
-const handleKeydown = (e: KeyboardEvent) => {
-  if (e.key === 'Enter' && !e.shiftKey && props.element.type === 'title') {
-    e.preventDefault();
-    handleSaveEdit();
-  } else if (e.key === 'Escape') {
-    handleCancelEdit();
-  }
-};
-
-const handleDelete = (e: MouseEvent) => {
-  e.stopPropagation();
-  store.deleteElement(props.element.id);
-};
-
-const handleCopy = (e: MouseEvent) => {
-  e.stopPropagation();
-  store.copyElement(props.element.id);
-};
-
-const handleMoveUp = (e: MouseEvent) => {
-  e.stopPropagation();
-  store.moveElement(props.element.id, 'up');
-};
-
-const handleMoveDown = (e: MouseEvent) => {
-  e.stopPropagation();
-  store.moveElement(props.element.id, 'down');
-};
-
-// 元素类型标签
-const typeLabels: Record<string, string> = {
-  title: '标题',
-  paragraph: '段落',
-  'rich-text': '富文本',
-  variable: '变量',
-  table: '表格',
-  'signature-zone': '签名区',
-  'seal-zone': '盖章区',
-  'date-zone': '日期区',
-  divider: '分割线',
-  'page-break': '分页符',
-  image: '图片',
-};
-</script>
-
-<template>
-  <div
-    class="element-wrapper group relative"
-    :class="{ 'is-active': isActive, 'is-editing': isEditing }"
-    @click="handleSelect"
-    @dblclick="handleDoubleClick"
-  >
-    <!-- 元素类型标签 -->
-    <div
-      v-if="isActive && !isEditing"
-      class="element-type-label absolute -top-5 left-0 rounded-t bg-[var(--el-color-primary)] px-2 py-0.5 text-xs text-white"
-    >
-      {{ typeLabels[element.type] || element.type }}
-      <span v-if="isEditable" class="ml-1 opacity-70">(双击编辑)</span>
-    </div>
-
-    <!-- 操作按钮 -->
-    <div
-      v-show="isActive && !isEditing"
-      class="element-actions absolute -right-1 -top-1 z-10 flex gap-1 rounded bg-[var(--el-bg-color)] p-1 shadow"
-    >
-      <ElTooltip content="上移" placement="top" :show-after="500">
-        <button
-          class="action-btn"
-          :disabled="index === 0"
-          @click="handleMoveUp"
-        >
-          <ElIcon :size="14"><ArrowUp /></ElIcon>
-        </button>
-      </ElTooltip>
-      <ElTooltip content="下移" placement="top" :show-after="500">
-        <button
-          class="action-btn"
-          :disabled="index === total - 1"
-          @click="handleMoveDown"
-        >
-          <ElIcon :size="14"><ArrowDown /></ElIcon>
-        </button>
-      </ElTooltip>
-      <ElTooltip content="复制" placement="top" :show-after="500">
-        <button class="action-btn" @click="handleCopy">
-          <ElIcon :size="14"><Copy /></ElIcon>
-        </button>
-      </ElTooltip>
-      <ElTooltip content="删除" placement="top" :show-after="500">
-        <button class="action-btn action-btn-danger" @click="handleDelete">
-          <ElIcon :size="14"><Trash2 /></ElIcon>
-        </button>
-      </ElTooltip>
-    </div>
-
-    <!-- 编辑模式 -->
-    <div v-if="isEditing" class="editing-content" @click.stop>
-      <!-- 标题编辑 -->
-      <ElInput
-        v-if="element.type === 'title'"
-        ref="inputRef"
-        v-model="editingContent"
-        placeholder="请输入标题"
-        :style="{
-          fontSize: `${element.props.fontSize}px`,
-          fontWeight: element.props.fontWeight,
-          textAlign: element.props.align,
-        }"
-        @blur="handleSaveEdit"
-        @keydown="handleKeydown"
-      />
-      <!-- 段落编辑 -->
-      <ElInput
-        v-else-if="element.type === 'paragraph'"
-        ref="inputRef"
-        v-model="editingContent"
-        type="textarea"
-        :rows="4"
-        placeholder="请输入段落内容"
-        :autosize="{ minRows: 2, maxRows: 10 }"
-        @blur="handleSaveEdit"
-        @keydown="handleKeydown"
-      />
-      <!-- 富文本编辑 -->
-      <div v-else-if="element.type === 'rich-text'" class="rich-text-editing">
-        <!-- 变量插入工具栏 -->
-        <div class="variable-toolbar">
-          <ElDropdown trigger="click" @command="handleInsertVariable">
-            <button class="variable-insert-btn">
-              <ElIcon :size="14"><Plus /></ElIcon>
-              <span>插入变量</span>
-            </button>
-            <template #dropdown>
-              <ElDropdownMenu>
-                <div class="variable-dropdown-header">预定义变量</div>
-                <ElDropdownItem
-                  v-for="v in availableVariables.slice(0, 14)"
-                  :key="v.code"
-                  :command="v.code"
-                >
-                  <span class="variable-name">{{ v.name }}</span>
-                  <span class="variable-code">{{ v.code }}</span>
-                </ElDropdownItem>
-                <template v-if="availableVariables.length > 14">
-                  <div class="variable-dropdown-header">自定义变量</div>
-                  <ElDropdownItem
-                    v-for="v in availableVariables.slice(14)"
-                    :key="v.code"
-                    :command="v.code"
-                  >
-                    <span class="variable-name">{{ v.name }}</span>
-                    <span class="variable-code">{{ v.code }}</span>
-                  </ElDropdownItem>
-                </template>
-              </ElDropdownMenu>
-            </template>
-          </ElDropdown>
-          <span class="variable-tip"
-            >提示：插入的变量将在合同签署时自动替换为实际值</span
-          >
-        </div>
-        <RichTextEditor
-          ref="richTextEditorRef"
-          v-model="richTextContent"
-          :min-height="150"
-          :max-height="400"
-          placeholder="请输入内容..."
-          @change="handleRichTextChange"
-        />
-        <div class="mt-2 flex justify-end gap-2">
-          <button class="edit-btn" @click="handleCancelEdit">取消</button>
-          <button class="edit-btn edit-btn-primary" @click="handleSaveRichText">
-            保存
-          </button>
-        </div>
-      </div>
-      <!-- 标题/段落的保存按钮 -->
-      <div
-        v-if="element.type !== 'rich-text'"
-        class="mt-2 flex justify-end gap-2"
-      >
-        <button class="edit-btn" @click="handleCancelEdit">取消</button>
-        <button class="edit-btn edit-btn-primary" @click="handleSaveEdit">
-          保存
-        </button>
-      </div>
-    </div>
-
-    <!-- 元素内容（非编辑模式） -->
-    <div v-else class="element-content">
-      <ElementRenderer :element="element" :is-design="true" />
-    </div>
-
-    <!-- 拖拽手柄 -->
-    <div
-      v-show="isActive && !isEditing"
-      class="drag-handle absolute left-0 top-1/2 -translate-x-full -translate-y-1/2 cursor-move rounded-l bg-[var(--el-color-primary)] px-1 py-2 text-white opacity-80"
-    >
-      <div class="flex flex-col gap-0.5">
-        <div class="h-0.5 w-2 rounded bg-white"></div>
-        <div class="h-0.5 w-2 rounded bg-white"></div>
-        <div class="h-0.5 w-2 rounded bg-white"></div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.element-wrapper {
-  position: relative;
-  padding: 8px;
-  margin: 4px 0;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.element-wrapper:hover {
-  background-color: var(--el-fill-color-lighter);
-  border-color: var(--el-border-color);
-}
-
-.element-wrapper.is-active {
-  background-color: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary);
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  color: var(--el-text-color-regular);
-  cursor: pointer;
-  background: var(--el-fill-color-light);
-  border: none;
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.action-btn:hover:not(:disabled) {
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-}
-
-.action-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.action-btn-danger:hover:not(:disabled) {
-  color: var(--el-color-danger);
-  background: var(--el-color-danger-light-9);
-}
-
-.element-content {
-  min-height: 20px;
-}
-
-.element-wrapper.is-editing {
-  background-color: var(--el-bg-color);
-  border-color: var(--el-color-primary);
-}
-
-.editing-content {
-  padding: 4px;
-}
-
-.edit-btn {
-  padding: 4px 12px;
-  font-size: 12px;
-  color: var(--el-text-color-regular);
-  cursor: pointer;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color);
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.edit-btn:hover {
-  color: var(--el-color-primary);
-  border-color: var(--el-color-primary);
-}
-
-.edit-btn-primary {
-  color: white;
-  background: var(--el-color-primary);
-  border-color: var(--el-color-primary);
-}
-
-.edit-btn-primary:hover {
-  color: white;
-  background: var(--el-color-primary-light-3);
-  border-color: var(--el-color-primary-light-3);
-}
-
-.rich-text-editing {
-  overflow: hidden;
-  border: 1px solid var(--el-color-primary);
-  border-radius: 4px;
-}
-
-.rich-text-editing :deep(.rich-text-editor) {
-  border: none;
-}
-
-/* 变量插入工具栏 */
-.variable-toolbar {
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding: 8px 12px;
-  background: var(--el-fill-color-light);
-  border-bottom: 1px solid var(--el-border-color-light);
-}
-
-.variable-insert-btn {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  padding: 4px 10px;
-  font-size: 12px;
-  color: var(--el-color-primary);
-  cursor: pointer;
-  background: var(--el-color-primary-light-9);
-  border: 1px solid var(--el-color-primary);
-  border-radius: 4px;
-  transition: all 0.2s;
-}
-
-.variable-insert-btn:hover {
-  color: white;
-  background: var(--el-color-primary);
-}
-
-.variable-tip {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.variable-dropdown-header {
-  padding: 6px 12px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--el-text-color-secondary);
-  background: var(--el-fill-color-light);
-}
-
-.variable-name {
-  margin-right: 8px;
-}
-
-.variable-code {
-  font-family: monospace;
-  font-size: 11px;
-  color: var(--el-text-color-placeholder);
-}
-
-/* 变量标签样式 */
-:deep(.contract-variable-tag) {
-  display: inline-block;
-  padding: 0 6px;
-  margin: 0 2px;
-  font-family: monospace;
-  font-size: 12px;
-  color: var(--el-color-primary);
-  cursor: default;
-  user-select: none;
-  background: var(--el-color-primary-light-9);
-  border: 1px solid var(--el-color-primary-light-5);
-  border-radius: 3px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/components/MaterialPanel.vue b/web/apps/web-ele/src/components/contract-design/components/MaterialPanel.vue
deleted file mode 100644
index 95b4c48..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/MaterialPanel.vue
+++ /dev/null
@@ -1,971 +0,0 @@
-<script setup lang="ts">
-import type {
-  ContractMaterial,
-  ContractTemplateConfig,
-} from '../store/contractDesignStore';
-
-import { computed, ref } from 'vue';
-
-import {
-  AlignLeft,
-  Calendar,
-  Circle,
-  Code,
-  FileText,
-  Heading1,
-  Image,
-  List,
-  Minus,
-  Pencil,
-  Search,
-  Table,
-} from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import {
-  ElIcon,
-  ElInput,
-  ElMessage,
-  ElScrollbar,
-  ElTabPane,
-  ElTabs,
-} from 'element-plus';
-import draggable from 'vuedraggable';
-
-import {
-  contractMaterials,
-  useContractDesignStore,
-} from '../store/contractDesignStore';
-
-const store = useContractDesignStore();
-
-// 当前 Tab
-const activeTab = ref('elements');
-
-const searchKeyword = ref('');
-const activeGroups = ref(['text', 'variable', 'signature', 'layout']);
-
-// 图标映射
-const iconMap: Record<string, any> = {
-  Heading1,
-  AlignLeft,
-  FileText,
-  Code,
-  Table,
-  Pencil,
-  Circle,
-  Calendar,
-  Minus,
-  Image,
-};
-
-const getIcon = (iconName: string) => {
-  return iconMap[iconName] || FileText;
-};
-
-// 分组材料
-const groupedMaterials = computed(() => {
-  const groups: Record<string, ContractMaterial[]> = {
-    text: [],
-    variable: [],
-    signature: [],
-    layout: [],
-  };
-
-  contractMaterials.forEach((material) => {
-    if (groups[material.category]) {
-      groups[material.category].push(material);
-    }
-  });
-
-  return groups;
-});
-
-// 过滤后的材料
-const filteredMaterials = computed(() => {
-  if (!searchKeyword.value) return groupedMaterials.value;
-
-  const keyword = searchKeyword.value.toLowerCase();
-  const result: Record<string, ContractMaterial[]> = {
-    text: [],
-    variable: [],
-    signature: [],
-    layout: [],
-  };
-
-  Object.entries(groupedMaterials.value).forEach(([category, materials]) => {
-    result[category] = materials.filter(
-      (m) =>
-        m.title.toLowerCase().includes(keyword) ||
-        m.type.toLowerCase().includes(keyword),
-    );
-  });
-
-  return result;
-});
-
-const getGroupLabel = (group: string) => {
-  const labels: Record<string, string> = {
-    text: $t('contract-design.textElements'),
-    variable: $t('contract-design.variableElements'),
-    signature: $t('contract-design.signatureElements'),
-    layout: $t('contract-design.layoutElements'),
-  };
-  return labels[group] || group;
-};
-
-const toggleGroup = (group: string) => {
-  const index = activeGroups.value.indexOf(group);
-  if (index === -1) {
-    activeGroups.value.push(group);
-  } else {
-    activeGroups.value.splice(index, 1);
-  }
-};
-
-const onDragStart = () => store.setDragging(true);
-const onDragEnd = () => store.setDragging(false);
-
-// 点击添加元素
-const handleClickAdd = (material: ContractMaterial) => {
-  store.addElement(material);
-};
-
-// 克隆函数
-const cloneMaterial = (material: ContractMaterial) => {
-  return store.cloneElement(material);
-};
-
-// 示例模板列表
-interface TemplateItem {
-  id: string;
-  name: string;
-  description: string;
-  category: string;
-  config: ContractTemplateConfig;
-}
-
-const getTemplateCategoryLabel = (key: string) => {
-  const labels: Record<string, string> = {
-    common: $t('contract-design.commonContracts'),
-    hr: $t('contract-design.hrContracts'),
-    business: $t('contract-design.businessContracts'),
-  };
-  return labels[key] || key;
-};
-
-// 获取元素标题的国际化文本
-const getMaterialTitle = (type: string): string => {
-  const titleMap: Record<string, string> = {
-    title: $t('contract-design.contractTitle'),
-    paragraph: $t('contract-design.paragraphText'),
-    'rich-text': $t('contract-design.richText'),
-    variable: $t('contract-design.variablePlaceholder'),
-    table: $t('contract-design.table'),
-    'signature-zone': $t('contract-design.signatureZone'),
-    'seal-zone': $t('contract-design.sealZone'),
-    'date-zone': $t('contract-design.dateZone'),
-    divider: $t('contract-design.divider'),
-    'page-break': $t('contract-design.pageBreak'),
-    image: $t('contract-design.image'),
-  };
-  return titleMap[type] || type;
-};
-
-const templateCategories = computed(() => [
-  { key: 'common', label: getTemplateCategoryLabel('common') },
-  { key: 'hr', label: getTemplateCategoryLabel('hr') },
-  { key: 'business', label: getTemplateCategoryLabel('business') },
-]);
-
-const sampleTemplates: TemplateItem[] = [
-  {
-    id: 'purchase',
-    name: '采购合同',
-    description: '标准采购合同模板',
-    category: 'common',
-    config: {
-      id: 'purchase-template',
-      name: '采购合同',
-      code: 'PURCHASE_CONTRACT',
-      category: '常用合同',
-      description: '标准采购合同模板',
-      pageSize: 'A4',
-      pageMargin: { top: 60, right: 60, bottom: 60, left: 60 },
-      elements: [
-        {
-          id: 'title-1',
-          type: 'title',
-          props: {
-            content: '采购合同',
-            level: 1,
-            align: 'center',
-            fontSize: 24,
-            fontWeight: 'bold',
-          },
-        },
-        {
-          id: 'rich-1',
-          type: 'rich-text',
-          props: {
-            content: `<p style="text-align: right;">合同编号：{{contract_no}}</p>
-<p><br></p>
-<p><strong>甲方（采购方）：</strong>{{party_a_name}}</p>
-<p><strong>地址：</strong>{{party_a_address}}</p>
-<p><strong>联系电话：</strong>{{party_a_phone}}</p>
-<p><br></p>
-<p><strong>乙方（供应方）：</strong>{{party_b_name}}</p>
-<p><strong>地址：</strong>{{party_b_address}}</p>
-<p><strong>联系电话：</strong>{{party_b_phone}}</p>
-<p><br></p>
-<p>根据《中华人民共和国民法典》及相关法律法规，甲乙双方本着平等互利、诚实信用的原则，经友好协商，就甲方向乙方采购货物事宜达成如下协议：</p>
-<p><br></p>
-<h3>第一条 采购货物</h3>
-<p>甲方向乙方采购货物，详见附件清单。</p>
-<p><br></p>
-<h3>第二条 合同金额</h3>
-<p>本合同总金额为人民币{{contract_amount}}元。</p>
-<p><br></p>
-<h3>第三条 交货时间及地点</h3>
-<p>1. 交货时间：{{start_date}}</p>
-<p>2. 交货地点：{{sign_location}}</p>
-<p><br></p>
-<h3>第四条 付款方式</h3>
-<p>合同签订后{{payment_days}}日内支付全款。</p>
-<p><br></p>
-<h3>第五条 验收标准</h3>
-<p>货物到达后，甲方应在7日内完成验收。如有质量问题，应在验收期内书面通知乙方。</p>
-<p><br></p>
-<h3>第六条 违约责任</h3>
-<p>任何一方违反本合同约定，应承担违约责任，赔偿对方因此遭受的损失。</p>
-<p><br></p>
-<h3>第七条 争议解决</h3>
-<p>本合同在履行过程中发生争议，双方应协商解决；协商不成的，可向甲方所在地人民法院提起诉讼。</p>
-<p><br></p>
-<p>本合同一式两份，甲乙双方各执一份，自双方签字盖章之日起生效。</p>
-<p><br></p>
-<p>签订日期：{{sign_date}}</p>`,
-            minHeight: 100,
-            padding: 8,
-            showBorder: false,
-          },
-        },
-        {
-          id: 'sig-a',
-          type: 'signature-zone',
-          props: { width: 200, height: 80, label: '甲方签章' },
-          signature: {
-            partyType: 'party_a',
-            partyLabel: '甲方',
-            showDate: true,
-            showSeal: false,
-            required: true,
-          },
-        },
-        {
-          id: 'sig-b',
-          type: 'signature-zone',
-          props: { width: 200, height: 80, label: '乙方签章' },
-          signature: {
-            partyType: 'party_b',
-            partyLabel: '乙方',
-            showDate: true,
-            showSeal: false,
-            required: true,
-          },
-        },
-      ],
-      variables: [
-        {
-          code: 'payment_days',
-          name: '付款天数',
-          type: 'number',
-          required: true,
-        },
-      ],
-      parties: [
-        { type: 'party_a', label: '甲方（采购方）', required: true },
-        { type: 'party_b', label: '乙方（供应方）', required: true },
-      ],
-    },
-  },
-  {
-    id: 'labor',
-    name: '劳动合同',
-    description: '标准劳动合同模板',
-    category: 'hr',
-    config: {
-      id: 'labor-template',
-      name: '劳动合同',
-      code: 'LABOR_CONTRACT',
-      category: '人事合同',
-      description: '标准劳动合同模板',
-      pageSize: 'A4',
-      pageMargin: { top: 60, right: 60, bottom: 60, left: 60 },
-      elements: [
-        {
-          id: 'title-1',
-          type: 'title',
-          props: {
-            content: '劳动合同书',
-            level: 1,
-            align: 'center',
-            fontSize: 26,
-            fontWeight: 'bold',
-          },
-        },
-        {
-          id: 'rich-1',
-          type: 'rich-text',
-          props: {
-            content: `<p style="text-align: center;"><br></p>
-<p><strong>甲方（用人单位）：</strong>{{party_a_name}}</p>
-<p><strong>法定代表人：</strong>{{party_a_legal_person}}</p>
-<p><strong>地址：</strong>{{party_a_address}}</p>
-<p><br></p>
-<p><strong>乙方（劳动者）：</strong>{{party_b_name}}</p>
-<p><strong>身份证号码：</strong>{{employee_id_card}}</p>
-<p><strong>联系电话：</strong>{{party_b_phone}}</p>
-<p><br></p>
-<p>根据《中华人民共和国劳动法》、《中华人民共和国劳动合同法》及相关法律法规，甲乙双方本着平等自愿、协商一致的原则，签订本劳动合同。</p>
-<p><br></p>
-<h3>第一条 合同期限</h3>
-<p>本合同为{{contract_term_type}}期限劳动合同。</p>
-<p>合同期限自{{start_date}}起至{{end_date}}止。</p>
-<p><br></p>
-<h3>第二条 工作内容和工作地点</h3>
-<p>1. 乙方同意根据甲方工作需要，担任{{job_position}}岗位工作。</p>
-<p>2. 工作地点：{{work_location}}</p>
-<p><br></p>
-<h3>第三条 工作时间和休息休假</h3>
-<p>甲方安排乙方执行标准工时制度。</p>
-<p><br></p>
-<h3>第四条 劳动报酬</h3>
-<p>乙方月工资为人民币{{monthly_salary}}元。</p>
-<p><br></p>
-<h3>第五条 社会保险和福利待遇</h3>
-<p>甲方依法为乙方缴纳社会保险费，乙方应缴纳的部分由甲方从乙方工资中代扣代缴。</p>
-<p><br></p>
-<h3>第六条 劳动保护和劳动条件</h3>
-<p>甲方为乙方提供符合国家规定的劳动安全卫生条件和必要的劳动防护用品。</p>
-<p><br></p>
-<h3>第七条 合同的变更、解除和终止</h3>
-<p>按照《劳动合同法》相关规定执行。</p>
-<p><br></p>
-<p>本合同一式两份，甲乙双方各执一份，自双方签字盖章之日起生效。</p>
-<p><br></p>
-<p>签订日期：{{sign_date}}</p>`,
-            minHeight: 100,
-            padding: 8,
-            showBorder: false,
-          },
-        },
-        {
-          id: 'sig-a',
-          type: 'signature-zone',
-          props: { width: 200, height: 80, label: '甲方（盖章）' },
-          signature: {
-            partyType: 'party_a',
-            partyLabel: '甲方',
-            showDate: true,
-            showSeal: false,
-            required: true,
-          },
-        },
-        {
-          id: 'sig-b',
-          type: 'signature-zone',
-          props: { width: 200, height: 80, label: '乙方（签名）' },
-          signature: {
-            partyType: 'party_b',
-            partyLabel: '乙方',
-            showDate: true,
-            showSeal: false,
-            required: true,
-          },
-        },
-      ],
-      variables: [
-        {
-          code: 'employee_id_card',
-          name: '员工身份证号',
-          type: 'text',
-          required: true,
-        },
-        {
-          code: 'contract_term_type',
-          name: '合同期限类型',
-          type: 'text',
-          required: true,
-        },
-        {
-          code: 'job_position',
-          name: '工作岗位',
-          type: 'text',
-          required: true,
-        },
-        {
-          code: 'work_location',
-          name: '工作地点',
-          type: 'text',
-          required: true,
-        },
-        {
-          code: 'monthly_salary',
-          name: '月工资',
-          type: 'money',
-          required: true,
-        },
-      ],
-      parties: [
-        { type: 'party_a', label: '甲方（用人单位）', required: true },
-        { type: 'party_b', label: '乙方（劳动者）', required: true },
-      ],
-    },
-  },
-  {
-    id: 'nda',
-    name: '保密协议',
-    description: '员工保密协议模板',
-    category: 'hr',
-    config: {
-      id: 'nda-template',
-      name: '保密协议',
-      code: 'NDA_CONTRACT',
-      category: '人事合同',
-      description: '员工保密协议模板',
-      pageSize: 'A4',
-      pageMargin: { top: 60, right: 60, bottom: 60, left: 60 },
-      elements: [
-        {
-          id: 'title-1',
-          type: 'title',
-          props: {
-            content: '保密协议',
-            level: 1,
-            align: 'center',
-            fontSize: 24,
-            fontWeight: 'bold',
-          },
-        },
-        {
-          id: 'rich-1',
-          type: 'rich-text',
-          props: {
-            content: `<p style="text-align: right;">协议编号：{{contract_no}}</p>
-<p><br></p>
-<p><strong>甲方：</strong>{{party_a_name}}</p>
-<p><strong>地址：</strong>{{party_a_address}}</p>
-<p><br></p>
-<p><strong>乙方：</strong>{{party_b_name}}</p>
-<p><strong>身份证号：</strong>{{employee_id_card}}</p>
-<p><br></p>
-<p>鉴于乙方在甲方任职期间，将接触或知悉甲方的商业秘密和保密信息，为保护甲方的合法权益，双方本着平等自愿、诚实信用的原则，签订本协议。</p>
-<p><br></p>
-<h3>第一条 保密信息的范围</h3>
-<p>本协议所称保密信息包括但不限于：技术信息、经营信息及甲方明确要求保密的其他信息。</p>
-<p><br></p>
-<h3>第二条 保密义务</h3>
-<p>1. 乙方应对保密信息严格保密，未经甲方书面同意，不得向任何第三方披露。</p>
-<p>2. 乙方不得将保密信息用于本职工作以外的任何目的。</p>
-<p>3. 乙方离职时，应将所有保密信息及载体归还甲方。</p>
-<p><br></p>
-<h3>第三条 保密期限</h3>
-<p>乙方的保密义务自本协议签订之日起生效，保密期限为{{confidentiality_years}}年。</p>
-<p><br></p>
-<h3>第四条 违约责任</h3>
-<p>乙方违反本协议约定的，应向甲方支付违约金人民币{{penalty_amount}}元，并赔偿甲方因此遭受的全部损失。</p>
-<p><br></p>
-<p>本协议一式两份，甲乙双方各执一份，自双方签字盖章之日起生效。</p>
-<p><br></p>
-<p>签订日期：{{sign_date}}</p>`,
-            minHeight: 100,
-            padding: 8,
-            showBorder: false,
-          },
-        },
-        {
-          id: 'sig-a',
-          type: 'signature-zone',
-          props: { width: 200, height: 80, label: '甲方（盖章）' },
-          signature: {
-            partyType: 'party_a',
-            partyLabel: '甲方',
-            showDate: true,
-            showSeal: false,
-            required: true,
-          },
-        },
-        {
-          id: 'sig-b',
-          type: 'signature-zone',
-          props: { width: 200, height: 80, label: '乙方（签名）' },
-          signature: {
-            partyType: 'party_b',
-            partyLabel: '乙方',
-            showDate: true,
-            showSeal: false,
-            required: true,
-          },
-        },
-      ],
-      variables: [
-        {
-          code: 'employee_id_card',
-          name: '员工身份证号',
-          type: 'text',
-          required: true,
-        },
-        {
-          code: 'confidentiality_years',
-          name: '保密期限(年)',
-          type: 'number',
-          required: true,
-        },
-        {
-          code: 'penalty_amount',
-          name: '违约金金额',
-          type: 'money',
-          required: true,
-        },
-      ],
-      parties: [
-        { type: 'party_a', label: '甲方', required: true },
-        { type: 'party_b', label: '乙方', required: true },
-      ],
-    },
-  },
-  {
-    id: 'service',
-    name: '服务合同',
-    description: '通用服务合同模板',
-    category: 'business',
-    config: {
-      id: 'service-template',
-      name: '服务合同',
-      code: 'SERVICE_CONTRACT',
-      category: '商务合同',
-      description: '通用服务合同模板',
-      pageSize: 'A4',
-      pageMargin: { top: 60, right: 60, bottom: 60, left: 60 },
-      elements: [
-        {
-          id: 'title-1',
-          type: 'title',
-          props: {
-            content: '服务合同',
-            level: 1,
-            align: 'center',
-            fontSize: 24,
-            fontWeight: 'bold',
-          },
-        },
-        {
-          id: 'rich-1',
-          type: 'rich-text',
-          props: {
-            content: `<p style="text-align: right;">合同编号：{{contract_no}}</p>
-<p><br></p>
-<p><strong>甲方（委托方）：</strong>{{party_a_name}}</p>
-<p><strong>地址：</strong>{{party_a_address}}</p>
-<p><strong>联系电话：</strong>{{party_a_phone}}</p>
-<p><br></p>
-<p><strong>乙方（服务方）：</strong>{{party_b_name}}</p>
-<p><strong>地址：</strong>{{party_b_address}}</p>
-<p><strong>联系电话：</strong>{{party_b_phone}}</p>
-<p><br></p>
-<p>根据《中华人民共和国民法典》及相关法律法规，甲乙双方本着平等互利、诚实信用的原则，就甲方委托乙方提供服务事宜达成如下协议：</p>
-<p><br></p>
-<h3>第一条 服务内容</h3>
-<p>乙方为甲方提供以下服务：{{service_content}}</p>
-<p><br></p>
-<h3>第二条 服务期限</h3>
-<p>服务期限自{{start_date}}起至{{end_date}}止。</p>
-<p><br></p>
-<h3>第三条 服务费用及支付方式</h3>
-<p>1. 服务费用总计人民币{{contract_amount}}元。</p>
-<p>2. 支付方式：{{payment_method}}</p>
-<p><br></p>
-<h3>第四条 双方权利义务</h3>
-<p><strong>甲方权利义务：</strong>按时支付服务费用；提供乙方完成服务所需的必要配合。</p>
-<p><strong>乙方权利义务：</strong>按照约定提供服务；保证服务质量符合约定标准。</p>
-<p><br></p>
-<h3>第五条 违约责任</h3>
-<p>任何一方违反本合同约定，应承担违约责任，赔偿对方因此遭受的损失。</p>
-<p><br></p>
-<h3>第六条 争议解决</h3>
-<p>本合同在履行过程中发生争议，双方应协商解决；协商不成的，可向甲方所在地人民法院提起诉讼。</p>
-<p><br></p>
-<p>本合同一式两份，甲乙双方各执一份，自双方签字盖章之日起生效。</p>
-<p><br></p>
-<p>签订日期：{{sign_date}}</p>`,
-            minHeight: 100,
-            padding: 8,
-            showBorder: false,
-          },
-        },
-        {
-          id: 'sig-a',
-          type: 'signature-zone',
-          props: { width: 200, height: 80, label: '甲方签章' },
-          signature: {
-            partyType: 'party_a',
-            partyLabel: '甲方',
-            showDate: true,
-            showSeal: false,
-            required: true,
-          },
-        },
-        {
-          id: 'sig-b',
-          type: 'signature-zone',
-          props: { width: 200, height: 80, label: '乙方签章' },
-          signature: {
-            partyType: 'party_b',
-            partyLabel: '乙方',
-            showDate: true,
-            showSeal: false,
-            required: true,
-          },
-        },
-      ],
-      variables: [
-        {
-          code: 'service_content',
-          name: '服务内容',
-          type: 'text',
-          required: true,
-        },
-        {
-          code: 'payment_method',
-          name: '支付方式',
-          type: 'text',
-          required: true,
-        },
-      ],
-      parties: [
-        { type: 'party_a', label: '甲方（委托方）', required: true },
-        { type: 'party_b', label: '乙方（服务方）', required: true },
-      ],
-    },
-  },
-  {
-    id: 'rental',
-    name: '租赁合同',
-    description: '房屋/设备租赁合同模板',
-    category: 'business',
-    config: {
-      id: 'rental-template',
-      name: '租赁合同',
-      code: 'RENTAL_CONTRACT',
-      category: '商务合同',
-      description: '租赁合同模板',
-      pageSize: 'A4',
-      pageMargin: { top: 60, right: 60, bottom: 60, left: 60 },
-      elements: [
-        {
-          id: 'title-1',
-          type: 'title',
-          props: {
-            content: '租赁合同',
-            level: 1,
-            align: 'center',
-            fontSize: 24,
-            fontWeight: 'bold',
-          },
-        },
-        {
-          id: 'rich-1',
-          type: 'rich-text',
-          props: {
-            content: `<p style="text-align: right;">合同编号：{{contract_no}}</p>
-<p><br></p>
-<p><strong>出租方（甲方）：</strong>{{party_a_name}}</p>
-<p><strong>联系电话：</strong>{{party_a_phone}}</p>
-<p><br></p>
-<p><strong>承租方（乙方）：</strong>{{party_b_name}}</p>
-<p><strong>联系电话：</strong>{{party_b_phone}}</p>
-<p><br></p>
-<p>根据《中华人民共和国民法典》及相关法律法规，甲乙双方在平等、自愿的基础上，就租赁事宜达成如下协议：</p>
-<p><br></p>
-<h3>第一条 租赁物</h3>
-<p>甲方将位于{{rental_location}}的{{rental_property}}出租给乙方使用。</p>
-<p><br></p>
-<h3>第二条 租赁期限</h3>
-<p>租赁期限自{{start_date}}起至{{end_date}}止。</p>
-<p><br></p>
-<h3>第三条 租金及支付方式</h3>
-<p>1. 租金为人民币{{monthly_rent}}元/月。</p>
-<p>2. 支付方式：{{payment_cycle}}</p>
-<p><br></p>
-<h3>第四条 押金</h3>
-<p>乙方应于签订本合同时向甲方支付押金人民币{{deposit_amount}}元。租赁期满，乙方无违约行为且租赁物完好的，甲方应在15日内退还押金。</p>
-<p><br></p>
-<h3>第五条 租赁物的使用和维护</h3>
-<p>1. 乙方应按约定用途使用租赁物，不得擅自改变用途。</p>
-<p>2. 乙方应妥善保管和使用租赁物，如有损坏应照价赔偿。</p>
-<p><br></p>
-<h3>第六条 违约责任</h3>
-<p>任何一方违反本合同约定，应承担违约责任，赔偿对方因此遭受的损失。</p>
-<p><br></p>
-<p>本合同一式两份，甲乙双方各执一份，自双方签字盖章之日起生效。</p>
-<p><br></p>
-<p>签订日期：{{sign_date}}</p>`,
-            minHeight: 100,
-            padding: 8,
-            showBorder: false,
-          },
-        },
-        {
-          id: 'sig-a',
-          type: 'signature-zone',
-          props: { width: 200, height: 80, label: '甲方（出租方）' },
-          signature: {
-            partyType: 'party_a',
-            partyLabel: '甲方',
-            showDate: true,
-            showSeal: false,
-            required: true,
-          },
-        },
-        {
-          id: 'sig-b',
-          type: 'signature-zone',
-          props: { width: 200, height: 80, label: '乙方（承租方）' },
-          signature: {
-            partyType: 'party_b',
-            partyLabel: '乙方',
-            showDate: true,
-            showSeal: false,
-            required: true,
-          },
-        },
-      ],
-      variables: [
-        {
-          code: 'rental_location',
-          name: '租赁物地址',
-          type: 'text',
-          required: true,
-        },
-        {
-          code: 'rental_property',
-          name: '租赁物名称',
-          type: 'text',
-          required: true,
-        },
-        { code: 'monthly_rent', name: '月租金', type: 'money', required: true },
-        {
-          code: 'payment_cycle',
-          name: '支付周期',
-          type: 'text',
-          required: true,
-        },
-        {
-          code: 'deposit_amount',
-          name: '押金金额',
-          type: 'money',
-          required: true,
-        },
-      ],
-      parties: [
-        { type: 'party_a', label: '甲方（出租方）', required: true },
-        { type: 'party_b', label: '乙方（承租方）', required: true },
-      ],
-    },
-  },
-];
-
-// 按分类过滤模板
-const getTemplatesByCategory = (category: string) => {
-  return sampleTemplates.filter((t) => t.category === category);
-};
-
-// 加载模板
-const loadTemplate = (template: TemplateItem) => {
-  // 深拷贝配置，避免修改原始数据
-  const config = JSON.parse(JSON.stringify(template.config));
-  store.importConfig(JSON.stringify(config));
-  ElMessage.success(`已加载模板：${template.name}`);
-  activeTab.value = 'elements';
-};
-</script>
-
-<template>
-  <div
-    class="material-panel flex h-full w-64 flex-col rounded border border-[var(--el-border-color)] bg-[var(--el-bg-color)]"
-  >
-    <!-- Tab 切换 -->
-    <ElTabs v-model="activeTab" class="material-tabs flex-1">
-      <!-- 合同元素 Tab -->
-      <ElTabPane
-        :label="$t('contract-design.contractElements')"
-        name="elements"
-        class="h-full"
-      >
-        <div class="flex h-full flex-col">
-          <!-- 搜索框 -->
-          <div class="flex-shrink-0 p-3">
-            <ElInput
-              v-model="searchKeyword"
-              :placeholder="$t('contract-design.searchElements')"
-              size="small"
-              clearable
-              :prefix-icon="Search"
-            />
-          </div>
-
-          <!-- 元素列表 -->
-          <ElScrollbar class="flex-1">
-            <div class="px-3 pb-3">
-              <template
-                v-for="(materials, category) in filteredMaterials"
-                :key="category"
-              >
-                <div v-if="materials.length > 0" class="component-group mb-4">
-                  <!-- 分组标题 -->
-                  <div
-                    class="group-title mb-2 flex cursor-pointer select-none items-center justify-between text-xs text-[var(--el-text-color-regular)] hover:text-[var(--el-color-primary)]"
-                    @click="toggleGroup(category)"
-                  >
-                    <span class="font-bold">{{ getGroupLabel(category) }}</span>
-                    <ElIcon
-                      class="h-4 w-4 transition-transform"
-                      :class="{
-                        'rotate-180': !activeGroups.includes(category),
-                      }"
-                    >
-                      <Minus />
-                    </ElIcon>
-                  </div>
-
-                  <!-- 元素网格 -->
-                  <div v-show="activeGroups.includes(category)">
-                    <draggable
-                      :list="materials"
-                      :group="{
-                        name: 'contract-design',
-                        pull: 'clone',
-                        put: false,
-                      }"
-                      :sort="false"
-                      :clone="cloneMaterial"
-                      item-key="type"
-                      class="grid grid-cols-2 gap-2"
-                      @start="onDragStart"
-                      @end="onDragEnd"
-                    >
-                      <template #item="{ element }">
-                        <div
-                          class="component-item flex cursor-move flex-col items-center justify-center rounded border border-[var(--el-border-color)] bg-[var(--el-fill-color-light)] p-3 transition-colors hover:border-[var(--el-color-primary)] hover:text-[var(--el-color-primary)]"
-                          @click.stop="handleClickAdd(element)"
-                        >
-                          <ElIcon class="mb-1.5" :size="20">
-                            <component :is="getIcon(element.icon)" />
-                          </ElIcon>
-                          <span class="text-xs">{{
-                            getMaterialTitle(element.type)
-                          }}</span>
-                        </div>
-                      </template>
-                    </draggable>
-                  </div>
-                </div>
-              </template>
-            </div>
-          </ElScrollbar>
-
-          <!-- 底部提示 -->
-          <div
-            class="flex-shrink-0 border-t border-[var(--el-border-color)] px-3 py-2"
-          >
-            <div
-              class="text-center text-xs text-[var(--el-text-color-placeholder)]"
-            >
-              <List class="mr-1 inline-block h-3 w-3" />
-              {{ $t('contract-design.dragOrClickAddElements') }}
-            </div>
-          </div>
-        </div>
-      </ElTabPane>
-
-      <!-- 示例模板 Tab -->
-      <ElTabPane
-        :label="$t('contract-design.sampleTemplates')"
-        name="templates"
-        class="h-full"
-      >
-        <ElScrollbar class="h-full">
-          <div class="p-3">
-            <div class="mb-3 text-xs text-[var(--el-text-color-secondary)]">
-              {{ $t('contract-design.selectTemplateToStart') }}
-            </div>
-
-            <template v-for="cat in templateCategories" :key="cat.key">
-              <div class="mb-4">
-                <div
-                  class="mb-2 text-xs font-bold text-[var(--el-text-color-primary)]"
-                >
-                  {{ cat.label }}
-                </div>
-                <div class="space-y-2">
-                  <div
-                    v-for="template in getTemplatesByCategory(cat.key)"
-                    :key="template.id"
-                    class="template-item cursor-pointer rounded border border-[var(--el-border-color)] p-3 transition-all hover:border-[var(--el-color-primary)] hover:bg-[var(--el-color-primary-light-9)]"
-                    @click="loadTemplate(template)"
-                  >
-                    <div
-                      class="mb-1 text-sm font-medium text-[var(--el-text-color-primary)]"
-                    >
-                      {{ template.name }}
-                    </div>
-                    <div class="text-xs text-[var(--el-text-color-secondary)]">
-                      {{ template.description }}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </div>
-        </ElScrollbar>
-      </ElTabPane>
-    </ElTabs>
-  </div>
-</template>
-
-<style scoped>
-.component-item {
-  min-height: 60px;
-}
-
-.material-panel {
-  overflow: hidden;
-}
-
-.material-tabs {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-:deep(.el-tabs__header) {
-  padding: 0 12px;
-  margin: 0;
-  border-bottom: 1px solid var(--el-border-color);
-}
-
-:deep(.el-tabs__content) {
-  flex: 1;
-  height: 0;
-  overflow: hidden;
-}
-
-:deep(.el-tab-pane) {
-  height: 100%;
-}
-
-.template-item:active {
-  transform: scale(0.98);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/components/PreviewModal.vue b/web/apps/web-ele/src/components/contract-design/components/PreviewModal.vue
deleted file mode 100644
index e53099a..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/PreviewModal.vue
+++ /dev/null
@@ -1,284 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, ref, watch } from 'vue';
-
-import { Download, Eye } from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import {
-  ElButton,
-  ElDialog,
-  ElIcon,
-  ElMessage,
-  ElScrollbar,
-} from 'element-plus';
-import { storeToRefs } from 'pinia';
-
-import { useContractDesignStore } from '../store/contractDesignStore';
-import { exportPagesToPdf } from '../utils/exportPdf';
-import ElementRenderer from './ElementRenderer.vue';
-
-const props = defineProps<{
-  visible: boolean;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-}>();
-
-const store = useContractDesignStore();
-const { templateConfig } = storeToRefs(store);
-
-const dialogVisible = computed({
-  get: () => props.visible,
-  set: (val) => emit('update:visible', val),
-});
-
-// 导出中状态
-const exporting = ref(false);
-
-// 页面元素引用数组
-const pageRefs = ref<HTMLElement[]>([]);
-
-// 隐藏的测量容器引用
-const measureContainerRef = ref<HTMLElement | null>(null);
-
-// 页面尺寸映射
-const pageSizeMap = {
-  A4: { width: 794, height: 1123 },
-  A5: { width: 559, height: 794 },
-  Letter: { width: 816, height: 1056 },
-};
-
-// 页面数量
-const pageCount = ref(1);
-
-// 单页样式（完整页面，包含边距）
-const pageStyle = computed(() => {
-  const size = pageSizeMap[templateConfig.value.pageSize];
-  const margin = templateConfig.value.pageMargin;
-  return {
-    width: `${size.width}px`,
-    height: `${size.height}px`,
-    padding: `${margin.top}px ${margin.right}px ${margin.bottom}px ${margin.left}px`,
-  };
-});
-
-// 内容区域高度（不含边距）
-const contentHeight = computed(() => {
-  const size = pageSizeMap[templateConfig.value.pageSize];
-  const margin = templateConfig.value.pageMargin;
-  return size.height - margin.top - margin.bottom;
-});
-
-// 计算页数
-const calculatePages = () => {
-  nextTick(() => {
-    if (!measureContainerRef.value) return;
-
-    const totalHeight = measureContainerRef.value.scrollHeight;
-    const pageContentHeight = contentHeight.value;
-
-    pageCount.value = Math.max(1, Math.ceil(totalHeight / pageContentHeight));
-  });
-};
-
-// 设置页面引用
-const setPageRef = (el: any, index: number) => {
-  if (el) {
-    pageRefs.value[index] = el;
-  }
-};
-
-// 监听弹窗打开时计算页数
-watch(dialogVisible, (val) => {
-  if (val) {
-    pageRefs.value = [];
-    nextTick(() => {
-      calculatePages();
-    });
-  }
-});
-
-// 导出 PDF
-const handleExportPdf = async () => {
-  if (pageRefs.value.length === 0) {
-    ElMessage.error($t('contract-design.exportFailed'));
-    return;
-  }
-
-  exporting.value = true;
-  try {
-    // 获取所有页面元素
-    const pages = pageRefs.value.filter(Boolean);
-
-    await exportPagesToPdf(pages, {
-      filename: `${templateConfig.value.name || $t('contract-design.contract')}-${Date.now()}.pdf`,
-      pageSize: templateConfig.value.pageSize,
-    });
-    ElMessage.success($t('contract-design.exportSuccess'));
-  } catch (error) {
-    console.error('Export PDF failed:', error);
-    ElMessage.error($t('contract-design.exportFailed'));
-  } finally {
-    exporting.value = false;
-  }
-};
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="$t('contract-design.contractPreview')"
-    width="900px"
-    :close-on-click-modal="false"
-    destroy-on-close
-  >
-    <template #header>
-      <div class="flex items-center gap-2">
-        <ElIcon :size="18" class="text-[var(--el-color-primary)]">
-          <Eye />
-        </ElIcon>
-        <span
-          >{{ $t('contract-design.contractPreview') }} -
-          {{ templateConfig.name }}</span
-        >
-        <span
-          v-if="pageCount > 1"
-          class="ml-2 rounded bg-[var(--el-color-primary-light-9)] px-2 py-0.5 text-xs text-[var(--el-color-primary)]"
-        >
-          {{ $t('contract-design.totalPages', { count: pageCount }) }}
-        </span>
-      </div>
-    </template>
-
-    <ElScrollbar max-height="70vh">
-      <div class="preview-pages-container bg-[var(--el-fill-color-light)] p-6">
-        <!-- 隐藏的测量容器，用于计算总高度 -->
-        <div
-          ref="measureContainerRef"
-          class="measure-container"
-          :style="{
-            width: `${pageSizeMap[templateConfig.pageSize].width - templateConfig.pageMargin.left - templateConfig.pageMargin.right}px`,
-          }"
-        >
-          <div
-            v-for="element in templateConfig.elements"
-            :key="`measure-${element.id}`"
-            class="preview-element"
-          >
-            <ElementRenderer :element="element" :is-design="false" />
-          </div>
-        </div>
-
-        <!-- 多页显示 -->
-        <div class="preview-pages flex flex-col items-center gap-6">
-          <template v-if="templateConfig.elements.length > 0">
-            <div
-              v-for="page in pageCount"
-              :key="page"
-              class="preview-page relative"
-            >
-              <!-- 页码标签 -->
-              <div class="page-number">
-                {{
-                  $t('contract-design.pageLabel', {
-                    current: page,
-                    total: pageCount,
-                  })
-                }}
-              </div>
-
-              <!-- 页面内容（完整的一页，包含边距） -->
-              <div
-                :ref="(el) => setPageRef(el, page - 1)"
-                class="preview-paper bg-[var(--el-bg-color)] shadow-lg"
-                :style="pageStyle"
-              >
-                <div class="preview-content-wrapper">
-                  <div
-                    class="preview-content"
-                    :style="{
-                      marginTop: `-${(page - 1) * contentHeight}px`,
-                    }"
-                  >
-                    <div
-                      v-for="element in templateConfig.elements"
-                      :key="`page-${page}-${element.id}`"
-                      class="preview-element"
-                    >
-                      <ElementRenderer :element="element" :is-design="false" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
-          <div
-            v-else
-            :ref="(el) => setPageRef(el, 0)"
-            class="preview-paper flex items-center justify-center bg-[var(--el-bg-color)] shadow-lg"
-            :style="pageStyle"
-          >
-            <span class="text-[var(--el-text-color-placeholder)]">{{
-              $t('contract-design.noContent')
-            }}</span>
-          </div>
-        </div>
-      </div>
-    </ElScrollbar>
-
-    <template #footer>
-      <ElButton @click="dialogVisible = false">
-        {{ $t('contract-design.close') }}
-      </ElButton>
-      <ElButton type="primary" :loading="exporting" @click="handleExportPdf">
-        <ElIcon v-if="!exporting" class="mr-1"><Download /></ElIcon>
-        {{
-          exporting
-            ? $t('contract-design.exporting')
-            : $t('contract-design.exportPdf')
-        }}
-      </ElButton>
-    </template>
-  </ElDialog>
-</template>
-
-<style scoped>
-.preview-element {
-  margin-bottom: 4px;
-}
-
-.preview-page {
-  position: relative;
-}
-
-.preview-paper {
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.preview-content-wrapper {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.page-number {
-  position: absolute;
-  top: -24px;
-  right: 0;
-  padding: 2px 8px;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  background: var(--el-bg-color);
-  border-radius: 4px;
-}
-
-/* 隐藏测量容器 */
-.measure-container {
-  position: absolute;
-  top: 0;
-  left: -9999px;
-  visibility: hidden;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/components/SignatureDialog.vue b/web/apps/web-ele/src/components/contract-design/components/SignatureDialog.vue
deleted file mode 100644
index a08e88a..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/SignatureDialog.vue
+++ /dev/null
@@ -1,254 +0,0 @@
-<script setup lang="ts">
-import type { UploadFile } from 'element-plus';
-
-import { computed, ref, watch } from 'vue';
-
-import { Check, Pencil, Upload, X } from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import {
-  ElButton,
-  ElDialog,
-  ElIcon,
-  ElMessage,
-  ElTabPane,
-  ElTabs,
-  ElUpload,
-} from 'element-plus';
-
-import SignaturePad from './SignaturePad.vue';
-
-const props = defineProps<{
-  height?: number;
-  partyLabel?: string;
-  title?: string;
-  visible: boolean;
-  width?: number;
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-  (e: 'confirm', signatureData: string): void;
-  (e: 'cancel'): void;
-}>();
-
-const dialogVisible = computed({
-  get: () => props.visible,
-  set: (val) => emit('update:visible', val),
-});
-
-// 当前选中的 Tab
-const activeTab = ref('draw');
-
-// 签名板引用
-const signaturePadRef = ref<InstanceType<typeof SignaturePad> | null>(null);
-
-// 手写签名数据
-const drawSignature = ref('');
-
-// 上传的签名图片
-const uploadedSignature = ref('');
-
-// 重置状态
-const resetState = () => {
-  activeTab.value = 'draw';
-  drawSignature.value = '';
-  uploadedSignature.value = '';
-};
-
-// 监听弹窗打开
-watch(dialogVisible, (val) => {
-  if (val) {
-    resetState();
-  }
-});
-
-// 处理图片上传
-const handleUploadChange = (file: UploadFile) => {
-  if (!file.raw) return;
-
-  // 检查文件类型
-  const isImage = file.raw.type.startsWith('image/');
-  if (!isImage) {
-    ElMessage.error($t('contract-design.uploadImageFileOnly'));
-    return;
-  }
-
-  // 检查文件大小（最大 2MB）
-  const isLt2M = file.raw.size / 1024 / 1024 < 2;
-  if (!isLt2M) {
-    ElMessage.error($t('contract-design.imageSizeExceeded'));
-    return;
-  }
-
-  // 读取图片为 base64
-  const reader = new FileReader();
-  reader.addEventListener('load', (e) => {
-    uploadedSignature.value = e.target?.result as string;
-  });
-  reader.readAsDataURL(file.raw);
-};
-
-// 确认签名
-const handleConfirm = () => {
-  let signatureData = '';
-
-  if (activeTab.value === 'draw') {
-    // 手写签名
-    if (signaturePadRef.value?.isEmpty()) {
-      ElMessage.warning($t('contract-design.pleaseSignFirst'));
-      return;
-    }
-    signatureData = signaturePadRef.value?.getSignatureData() || '';
-  } else {
-    // 上传签名
-    if (!uploadedSignature.value) {
-      ElMessage.warning($t('contract-design.pleaseUploadSignatureImage'));
-      return;
-    }
-    signatureData = uploadedSignature.value;
-  }
-
-  emit('confirm', signatureData);
-  dialogVisible.value = false;
-};
-
-// 取消
-const handleCancel = () => {
-  emit('cancel');
-  dialogVisible.value = false;
-};
-
-// 清空手写签名
-const clearDrawSignature = () => {
-  signaturePadRef.value?.clear();
-  drawSignature.value = '';
-};
-
-// 清空上传签名
-const clearUploadSignature = () => {
-  uploadedSignature.value = '';
-};
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="title || $t('contract-design.signature')"
-    width="500px"
-    :close-on-click-modal="false"
-    destroy-on-close
-  >
-    <template #header>
-      <div class="flex items-center gap-2">
-        <ElIcon :size="18" class="text-[var(--el-color-primary)]">
-          <Pencil />
-        </ElIcon>
-        <span>{{
-          partyLabel
-            ? `${partyLabel} - ${$t('contract-design.signature')}`
-            : $t('contract-design.signature')
-        }}</span>
-      </div>
-    </template>
-
-    <ElTabs v-model="activeTab" class="signature-tabs">
-      <!-- 手写签名 -->
-      <ElTabPane name="draw">
-        <template #label>
-          <div class="flex items-center gap-1">
-            <ElIcon :size="14"><Pencil /></ElIcon>
-            <span>{{ $t('contract-design.drawSignature') }}</span>
-          </div>
-        </template>
-
-        <div class="flex flex-col items-center">
-          <SignaturePad
-            ref="signaturePadRef"
-            v-model="drawSignature"
-            :width="props.width || 400"
-            :height="props.height || 150"
-          />
-        </div>
-      </ElTabPane>
-
-      <!-- 上传签名 -->
-      <ElTabPane name="upload">
-        <template #label>
-          <div class="flex items-center gap-1">
-            <ElIcon :size="14"><Upload /></ElIcon>
-            <span>{{ $t('contract-design.uploadSignature') }}</span>
-          </div>
-        </template>
-
-        <div class="flex flex-col items-center">
-          <div v-if="uploadedSignature" class="uploaded-preview relative mb-4">
-            <img
-              :src="uploadedSignature"
-              :alt="$t('contract-design.signaturePreview')"
-              class="max-h-[150px] max-w-[400px] rounded border border-[var(--el-border-color)]"
-            />
-            <ElButton
-              type="danger"
-              size="small"
-              circle
-              class="absolute -right-2 -top-2"
-              @click="clearUploadSignature"
-            >
-              <ElIcon><X /></ElIcon>
-            </ElButton>
-          </div>
-
-          <ElUpload
-            v-else
-            class="signature-uploader"
-            :show-file-list="false"
-            :auto-upload="false"
-            accept="image/*"
-            @change="handleUploadChange"
-          >
-            <div
-              class="upload-area flex h-[150px] w-[400px] flex-col items-center justify-center rounded border-2 border-dashed border-[var(--el-border-color)] bg-[var(--el-fill-color-light)] transition-colors hover:border-[var(--el-color-primary)]"
-            >
-              <ElIcon
-                :size="32"
-                class="mb-2 text-[var(--el-text-color-placeholder)]"
-              >
-                <Upload />
-              </ElIcon>
-              <span class="text-sm text-[var(--el-text-color-secondary)]">
-                {{ $t('contract-design.clickOrDragToUpload') }}
-              </span>
-              <span
-                class="mt-1 text-xs text-[var(--el-text-color-placeholder)]"
-              >
-                {{ $t('contract-design.supportedFormatsAndSize') }}
-              </span>
-            </div>
-          </ElUpload>
-        </div>
-      </ElTabPane>
-    </ElTabs>
-
-    <template #footer>
-      <ElButton @click="handleCancel">
-        <ElIcon class="mr-1"><X /></ElIcon>
-        {{ $t('contract-design.cancel') }}
-      </ElButton>
-      <ElButton type="primary" @click="handleConfirm">
-        <ElIcon class="mr-1"><Check /></ElIcon>
-        {{ $t('contract-design.confirmSignature') }}
-      </ElButton>
-    </template>
-  </ElDialog>
-</template>
-
-<style scoped>
-.signature-tabs {
-  margin-top: -10px;
-}
-
-:deep(.el-tabs__content) {
-  padding-top: 16px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/components/SignaturePad.vue b/web/apps/web-ele/src/components/contract-design/components/SignaturePad.vue
deleted file mode 100644
index c653892..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/SignaturePad.vue
+++ /dev/null
@@ -1,283 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from 'vue';
-
-import { Eraser, RotateCcw } from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import { ElButton, ElIcon } from 'element-plus';
-
-const props = withDefaults(
-  defineProps<{
-    backgroundColor?: string;
-    disabled?: boolean;
-    height?: number;
-    lineColor?: string;
-    lineWidth?: number;
-    modelValue?: string;
-    width?: number;
-  }>(),
-  {
-    width: 400,
-    height: 200,
-    lineWidth: 2,
-    lineColor: '#000000',
-    backgroundColor: '#ffffff',
-    disabled: false,
-    modelValue: '',
-  },
-);
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void;
-  (e: 'change', value: string): void;
-}>();
-
-const canvasRef = ref<HTMLCanvasElement | null>(null);
-const isDrawing = ref(false);
-const hasSignature = ref(false);
-let ctx: CanvasRenderingContext2D | null = null;
-let lastX = 0;
-let lastY = 0;
-
-// 初始化画布
-const initCanvas = () => {
-  if (!canvasRef.value) return;
-
-  ctx = canvasRef.value.getContext('2d');
-  if (!ctx) return;
-
-  // 设置画布大小
-  canvasRef.value.width = props.width;
-  canvasRef.value.height = props.height;
-
-  // 设置背景
-  ctx.fillStyle = props.backgroundColor;
-  ctx.fillRect(0, 0, props.width, props.height);
-
-  // 设置画笔样式
-  ctx.strokeStyle = props.lineColor;
-  ctx.lineWidth = props.lineWidth;
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-
-  // 如果有初始值，加载图片
-  if (props.modelValue) {
-    loadImage(props.modelValue);
-  }
-};
-
-// 加载图片
-const loadImage = (dataUrl: string) => {
-  if (!ctx || !canvasRef.value) return;
-
-  const img = new Image();
-  img.addEventListener('load', () => {
-    ctx!.fillStyle = props.backgroundColor;
-    ctx!.fillRect(0, 0, props.width, props.height);
-    ctx!.drawImage(img, 0, 0);
-    hasSignature.value = true;
-  });
-  img.src = dataUrl;
-};
-
-// 获取坐标
-const getCoordinates = (e: MouseEvent | TouchEvent) => {
-  if (!canvasRef.value) return { x: 0, y: 0 };
-
-  const rect = canvasRef.value.getBoundingClientRect();
-  const scaleX = canvasRef.value.width / rect.width;
-  const scaleY = canvasRef.value.height / rect.height;
-
-  if ('touches' in e) {
-    const touch = e.touches[0];
-    return {
-      x: (touch!.clientX - rect.left) * scaleX,
-      y: (touch!.clientY - rect.top) * scaleY,
-    };
-  }
-
-  return {
-    x: (e.clientX - rect.left) * scaleX,
-    y: (e.clientY - rect.top) * scaleY,
-  };
-};
-
-// 开始绘制
-const startDrawing = (e: MouseEvent | TouchEvent) => {
-  if (props.disabled || !ctx) return;
-
-  e.preventDefault();
-  isDrawing.value = true;
-  const { x, y } = getCoordinates(e);
-  lastX = x;
-  lastY = y;
-
-  // 开始新路径
-  ctx.beginPath();
-  ctx.moveTo(x, y);
-};
-
-// 绘制中
-const draw = (e: MouseEvent | TouchEvent) => {
-  if (!isDrawing.value || props.disabled || !ctx) return;
-
-  e.preventDefault();
-  const { x, y } = getCoordinates(e);
-
-  ctx.lineTo(x, y);
-  ctx.stroke();
-
-  lastX = x;
-  lastY = y;
-  hasSignature.value = true;
-};
-
-// 结束绘制
-const stopDrawing = () => {
-  if (!isDrawing.value) return;
-
-  isDrawing.value = false;
-  emitValue();
-};
-
-// 发送值
-const emitValue = () => {
-  if (!canvasRef.value) return;
-
-  const dataUrl = canvasRef.value.toDataURL('image/png');
-  emit('update:modelValue', dataUrl);
-  emit('change', dataUrl);
-};
-
-// 清空画布
-const clear = () => {
-  if (!ctx || !canvasRef.value) return;
-
-  ctx.fillStyle = props.backgroundColor;
-  ctx.fillRect(0, 0, props.width, props.height);
-  hasSignature.value = false;
-  emit('update:modelValue', '');
-  emit('change', '');
-};
-
-// 撤销（简单实现：清空）
-const undo = () => {
-  clear();
-};
-
-// 获取签名数据
-const getSignatureData = () => {
-  if (!canvasRef.value || !hasSignature.value) return '';
-  return canvasRef.value.toDataURL('image/png');
-};
-
-// 检查是否为空
-const isEmpty = () => !hasSignature.value;
-
-// 监听 modelValue 变化
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal && canvasRef.value) {
-      loadImage(newVal);
-    } else if (!newVal) {
-      clear();
-    }
-  },
-);
-
-// 暴露方法
-defineExpose({
-  clear,
-  getSignatureData,
-  isEmpty,
-});
-
-onMounted(() => {
-  initCanvas();
-
-  // 添加全局事件监听
-  window.addEventListener('mouseup', stopDrawing);
-  window.addEventListener('touchend', stopDrawing);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('mouseup', stopDrawing);
-  window.removeEventListener('touchend', stopDrawing);
-});
-</script>
-
-<template>
-  <div class="signature-pad">
-    <div
-      class="canvas-container"
-      :class="{ disabled }"
-      :style="{ width: `${width}px`, height: `${height}px` }"
-    >
-      <canvas
-        ref="canvasRef"
-        :width="width"
-        :height="height"
-        @mousedown="startDrawing"
-        @mousemove="draw"
-        @mouseup="stopDrawing"
-        @mouseleave="stopDrawing"
-        @touchstart.prevent="startDrawing"
-        @touchmove.prevent="draw"
-        @touchend.prevent="stopDrawing"
-      ></canvas>
-
-      <!-- 提示文字 -->
-      <div v-if="!hasSignature && !disabled" class="placeholder">
-        {{ $t('contract-design.signHere') }}
-      </div>
-    </div>
-
-    <!-- 操作按钮 -->
-    <div v-if="!disabled" class="actions mt-2 flex justify-end gap-2">
-      <ElButton size="small" @click="undo">
-        <ElIcon class="mr-1"><RotateCcw /></ElIcon>
-        {{ $t('contract-design.undo') }}
-      </ElButton>
-      <ElButton size="small" @click="clear">
-        <ElIcon class="mr-1"><Eraser /></ElIcon>
-        {{ $t('contract-design.clear') }}
-      </ElButton>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.signature-pad {
-  display: inline-block;
-}
-
-.canvas-container {
-  position: relative;
-  overflow: hidden;
-  touch-action: none; /* 禁用默认触摸行为，确保签名流畅 */
-  cursor: crosshair;
-  border: 1px solid var(--el-border-color);
-  border-radius: 4px;
-}
-
-.canvas-container.disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.canvas-container canvas {
-  display: block;
-}
-
-.placeholder {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  font-size: 14px;
-  color: var(--el-text-color-placeholder);
-  pointer-events: none;
-  user-select: none;
-  transform: translate(-50%, -50%);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/components/VariableForm.vue b/web/apps/web-ele/src/components/contract-design/components/VariableForm.vue
deleted file mode 100644
index 069287f..0000000
--- a/web/apps/web-ele/src/components/contract-design/components/VariableForm.vue
+++ /dev/null
@@ -1,343 +0,0 @@
-<script setup lang="ts">
-import type { VariableConfig } from '../store/contractDesignStore';
-
-import { computed, ref, watch } from 'vue';
-
-import { AlertCircle, Check, Edit3 } from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import {
-  ElCard,
-  ElDatePicker,
-  ElForm,
-  ElFormItem,
-  ElIcon,
-  ElInput,
-  ElInputNumber,
-  ElOption,
-  ElSelect,
-  ElTag,
-} from 'element-plus';
-
-const props = defineProps<{
-  disabled?: boolean;
-  modelValue: Record<string, string>;
-  variables: VariableConfig[];
-}>();
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: Record<string, string>): void;
-  (e: 'change', code: string, value: string): void;
-}>();
-
-// 本地表单数据
-const formData = ref<Record<string, any>>({});
-
-// 初始化表单数据
-watch(
-  () => props.modelValue,
-  (val) => {
-    formData.value = { ...val };
-  },
-  { immediate: true, deep: true },
-);
-
-// 更新值
-const updateValue = (code: string, value: any) => {
-  let strValue = '';
-
-  if (value === null || value === undefined) {
-    strValue = '';
-  } else if (value instanceof Date) {
-    strValue = formatDate(value);
-  } else {
-    strValue = String(value);
-  }
-
-  formData.value[code] = strValue;
-
-  const newData = { ...formData.value };
-  emit('update:modelValue', newData);
-  emit('change', code, strValue);
-};
-
-// 格式化日期
-const formatDate = (date: Date, format?: string) => {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-
-  if (format === 'YYYY-MM-DD') {
-    return `${year}-${month}-${day}`;
-  } else if (format === 'YYYY/MM/DD') {
-    return `${year}/${month}/${day}`;
-  }
-  return `${year}年${month}月${day}日`;
-};
-
-// 格式化金额
-const formatMoney = (value: number) => {
-  return new Intl.NumberFormat('zh-CN', {
-    style: 'currency',
-    currency: 'CNY',
-  }).format(value);
-};
-
-// 按分类分组变量
-const groupedVariables = computed(() => {
-  const groups: Record<string, VariableConfig[]> = {
-    party_a: [],
-    party_b: [],
-    contract: [],
-    other: [],
-  };
-
-  props.variables.forEach((v) => {
-    if (v.code.startsWith('party_a_')) {
-      groups.party_a.push(v);
-    } else if (v.code.startsWith('party_b_')) {
-      groups.party_b.push(v);
-    } else if (
-      v.code.startsWith('contract_') ||
-      v.code.includes('date') ||
-      v.code.includes('location')
-    ) {
-      groups.contract.push(v);
-    } else {
-      groups.other.push(v);
-    }
-  });
-
-  return groups;
-});
-
-// 分组标签
-const getGroupLabel = (group: string) => {
-  const labels: Record<string, string> = {
-    party_a: $t('contract-design.partyAInfo'),
-    party_b: $t('contract-design.partyBInfo'),
-    contract: $t('contract-design.contractInfo'),
-    other: $t('contract-design.otherInfo'),
-  };
-  return labels[group] || group;
-};
-
-// 变量类型标签
-const typeLabels: Record<string, string> = {
-  text: '文本',
-  number: '数字',
-  date: '日期',
-  money: '金额',
-  select: '选择',
-};
-
-// 检查变量是否已填写
-const isFilled = (code: string) => {
-  const value = formData.value[code];
-  return value !== undefined && value !== null && value !== '';
-};
-
-// 获取填写进度
-const fillProgress = computed(() => {
-  const required = props.variables.filter((v) => v.required);
-  if (required.length === 0) return 100;
-
-  const filled = required.filter((v) => isFilled(v.code));
-  return Math.round((filled.length / required.length) * 100);
-});
-
-// 未填写的必填变量
-const unfilledRequired = computed(() => {
-  return props.variables.filter((v) => v.required && !isFilled(v.code));
-});
-</script>
-
-<template>
-  <div class="variable-form">
-    <!-- 填写进度 -->
-    <div
-      class="mb-4 flex items-center justify-between rounded bg-[var(--el-fill-color-light)] p-3"
-    >
-      <div class="flex items-center gap-2">
-        <ElIcon :size="16" class="text-[var(--el-color-primary)]">
-          <Edit3 />
-        </ElIcon>
-        <span class="text-sm">变量填写进度</span>
-      </div>
-      <div class="flex items-center gap-2">
-        <span
-          class="text-sm font-medium"
-          :class="{
-            'text-[var(--el-color-success)]': fillProgress === 100,
-            'text-[var(--el-color-warning)]': fillProgress < 100,
-          }"
-        >
-          {{ fillProgress }}%
-        </span>
-        <ElIcon
-          v-if="fillProgress === 100"
-          :size="16"
-          class="text-[var(--el-color-success)]"
-        >
-          <Check />
-        </ElIcon>
-      </div>
-    </div>
-
-    <!-- 未填写提示 -->
-    <div
-      v-if="unfilledRequired.length > 0"
-      class="mb-4 flex items-start gap-2 rounded border border-[var(--el-color-warning-light-5)] bg-[var(--el-color-warning-light-9)] p-3"
-    >
-      <ElIcon :size="16" class="mt-0.5 text-[var(--el-color-warning)]">
-        <AlertCircle />
-      </ElIcon>
-      <div class="flex-1">
-        <div class="mb-1 text-sm font-medium text-[var(--el-color-warning)]">
-          以下必填项尚未填写：
-        </div>
-        <div class="flex flex-wrap gap-1">
-          <ElTag
-            v-for="v in unfilledRequired"
-            :key="v.code"
-            size="small"
-            type="warning"
-          >
-            {{ v.name }}
-          </ElTag>
-        </div>
-      </div>
-    </div>
-
-    <!-- 分组表单 -->
-    <template v-for="(groupVars, groupKey) in groupedVariables" :key="groupKey">
-      <ElCard v-if="groupVars.length > 0" shadow="never" class="mb-4">
-        <template #header>
-          <span class="text-sm font-medium">{{ groupLabels[groupKey] }}</span>
-        </template>
-
-        <ElForm label-position="top" size="default">
-          <div class="grid grid-cols-2 gap-x-4">
-            <ElFormItem
-              v-for="variable in groupVars"
-              :key="variable.code"
-              :label="variable.name"
-              :required="variable.required"
-            >
-              <!-- 文本输入 -->
-              <ElInput
-                v-if="variable.type === 'text'"
-                v-model="formData[variable.code]"
-                :placeholder="`请输入${variable.name}`"
-                :disabled="disabled"
-                clearable
-                @change="updateValue(variable.code, formData[variable.code])"
-              />
-
-              <!-- 数字输入 -->
-              <ElInputNumber
-                v-else-if="variable.type === 'number'"
-                v-model="formData[variable.code]"
-                :placeholder="`请输入${variable.name}`"
-                :disabled="disabled"
-                :controls="false"
-                class="w-full"
-                @change="updateValue(variable.code, formData[variable.code])"
-              />
-
-              <!-- 金额输入 -->
-              <ElInputNumber
-                v-else-if="variable.type === 'money'"
-                v-model="formData[variable.code]"
-                :placeholder="`请输入${variable.name}`"
-                :disabled="disabled"
-                :precision="2"
-                :controls="false"
-                class="w-full"
-                @change="updateValue(variable.code, formData[variable.code])"
-              >
-                <template #prefix>¥</template>
-              </ElInputNumber>
-
-              <!-- 日期选择 -->
-              <ElDatePicker
-                v-else-if="variable.type === 'date'"
-                v-model="formData[variable.code]"
-                type="date"
-                :placeholder="`请选择${variable.name}`"
-                :disabled="disabled"
-                :value-format="
-                  variable.format === 'YYYY-MM-DD'
-                    ? 'YYYY-MM-DD'
-                    : variable.format === 'YYYY/MM/DD'
-                      ? 'YYYY/MM/DD'
-                      : 'YYYY年MM月DD日'
-                "
-                class="w-full"
-                @change="updateValue(variable.code, formData[variable.code])"
-              />
-
-              <!-- 选择框 -->
-              <ElSelect
-                v-else-if="variable.type === 'select'"
-                v-model="formData[variable.code]"
-                :placeholder="`请选择${variable.name}`"
-                :disabled="disabled"
-                clearable
-                class="w-full"
-                @change="updateValue(variable.code, formData[variable.code])"
-              >
-                <ElOption
-                  v-for="opt in variable.options"
-                  :key="opt.value"
-                  :label="opt.label"
-                  :value="opt.value"
-                />
-              </ElSelect>
-
-              <!-- 类型标签 -->
-              <template #label>
-                <div class="flex items-center gap-2">
-                  <span>{{ variable.name }}</span>
-                  <ElTag size="small" type="info">
-                    {{ typeLabels[variable.type] }}
-                  </ElTag>
-                  <ElIcon
-                    v-if="isFilled(variable.code)"
-                    :size="14"
-                    class="text-[var(--el-color-success)]"
-                  >
-                    <Check />
-                  </ElIcon>
-                </div>
-              </template>
-            </ElFormItem>
-          </div>
-        </ElForm>
-      </ElCard>
-    </template>
-
-    <!-- 空状态 -->
-    <div
-      v-if="variables.length === 0"
-      class="flex h-32 items-center justify-center text-[var(--el-text-color-placeholder)]"
-    >
-      暂无需要填写的变量
-    </div>
-  </div>
-</template>
-
-<style scoped>
-:deep(.el-form-item__label) {
-  font-weight: normal;
-}
-
-:deep(.el-input-number) {
-  width: 100%;
-}
-
-:deep(.el-input-number .el-input__wrapper) {
-  padding-right: 11px;
-  padding-left: 11px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/index.ts b/web/apps/web-ele/src/components/contract-design/index.ts
deleted file mode 100644
index 6a56045..0000000
--- a/web/apps/web-ele/src/components/contract-design/index.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export { default as ContractRenderer } from './components/ContractRenderer.vue';
-export { default as ContractSignDialog } from './components/ContractSignDialog.vue';
-export { default as ElementRenderer } from './components/ElementRenderer.vue';
-export { default as SignatureDialog } from './components/SignatureDialog.vue';
-export { default as SignaturePad } from './components/SignaturePad.vue';
-export { default as VariableForm } from './components/VariableForm.vue';
-export { default as ContractDesign } from './index.vue';
-export { useContractDesignStore } from './store/contractDesignStore';
-export type {
-  ContractElement,
-  ContractElementType,
-  ContractMaterial,
-  ContractTemplateConfig,
-  PartyType,
-  SignatureConfig,
-  TableColumnConfig,
-  VariableConfig,
-  VariableType,
-} from './store/contractDesignStore';
-export { useContractSignStore } from './store/contractSignStore';
-export type { SignatureData, VariableData } from './store/contractSignStore';
diff --git a/web/apps/web-ele/src/components/contract-design/index.vue b/web/apps/web-ele/src/components/contract-design/index.vue
deleted file mode 100644
index 4324022..0000000
--- a/web/apps/web-ele/src/components/contract-design/index.vue
+++ /dev/null
@@ -1,323 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue';
-
-import { $t } from '@vben/locales';
-import { Code, RotateCw, Upload } from '@vben/icons';
-
-import {
-  ElButton,
-  ElDialog,
-  ElInput,
-  ElMessage,
-  ElMessageBox,
-} from 'element-plus';
-
-import AttributePanel from './components/AttributePanel.vue';
-import DesignCanvas from './components/DesignCanvas.vue';
-import MaterialPanel from './components/MaterialPanel.vue';
-import PreviewModal from './components/PreviewModal.vue';
-import { useContractDesignStore } from './store/contractDesignStore';
-
-const props = defineProps<{
-  // 初始配置 JSON
-  initialConfig?: string;
-  // 只读模式
-  readonly?: boolean;
-}>();
-
-const emit = defineEmits<{
-  (e: 'save', config: string): void;
-}>();
-
-const store = useContractDesignStore();
-
-// 预览弹窗
-const previewVisible = ref(false);
-
-// 代码弹窗
-const codeVisible = ref(false);
-const codeContent = ref('');
-
-// 导入弹窗
-const importVisible = ref(false);
-const importContent = ref('');
-
-// 初始化配置
-if (props.initialConfig) {
-  store.importConfig(props.initialConfig);
-}
-
-// 预览
-const handlePreview = () => {
-  if (store.templateConfig.elements.length === 0) {
-    ElMessage.warning($t('contract-design.pleaseAddContractElements'));
-    return;
-  }
-  previewVisible.value = true;
-};
-
-// 查看代码
-const handleViewCode = () => {
-  codeContent.value = store.exportConfig();
-  codeVisible.value = true;
-};
-
-// 保存
-const handleSave = () => {
-  const config = store.exportConfig();
-  emit('save', config);
-  ElMessage.success($t('contract-design.saveSuccess'));
-};
-
-// 清空画布
-const handleClear = async () => {
-  if (store.templateConfig.elements.length === 0) {
-    return;
-  }
-
-  try {
-    await ElMessageBox.confirm($t('contract-design.clearCanvasConfirm'), $t('contract-design.tip'), {
-      confirmButtonText: $t('contract-design.confirm'),
-      cancelButtonText: $t('contract-design.cancel'),
-      type: 'warning',
-    });
-    store.clearCanvas();
-    ElMessage.success($t('contract-design.cleared'));
-  } catch {
-    // 取消操作
-  }
-};
-
-// 导出配置
-const handleExport = () => {
-  const config = store.exportConfig();
-  const blob = new Blob([config], { type: 'application/json' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `contract-template-${Date.now()}.json`;
-  a.click();
-  URL.revokeObjectURL(url);
-  ElMessage.success($t('contract-design.exportSuccess'));
-};
-
-// 打开导入弹窗
-const handleOpenImport = () => {
-  importContent.value = '';
-  importVisible.value = true;
-};
-
-// 确认导入
-const handleImport = () => {
-  if (!importContent.value.trim()) {
-    ElMessage.warning($t('contract-design.pleaseEnterConfig'));
-    return;
-  }
-
-  const success = store.importConfig(importContent.value);
-  if (success) {
-    importVisible.value = false;
-    ElMessage.success($t('contract-design.importSuccess'));
-  } else {
-    ElMessage.error($t('contract-design.configFormatError'));
-  }
-};
-
-// 复制代码
-const handleCopyCode = async () => {
-  try {
-    await navigator.clipboard.writeText(codeContent.value);
-    ElMessage.success($t('contract-design.copiedToClipboard'));
-  } catch {
-    ElMessage.error($t('contract-design.copyFailed'));
-  }
-};
-
-// 键盘快捷键处理
-const handleKeyDown = (e: KeyboardEvent) => {
-  // 如果正在输入框中，不处理快捷键
-  const target = e.target as HTMLElement;
-  if (
-    target.tagName === 'INPUT' ||
-    target.tagName === 'TEXTAREA' ||
-    target.isContentEditable
-  ) {
-    return;
-  }
-
-  // 如果弹窗打开，不处理快捷键
-  if (previewVisible.value || codeVisible.value || importVisible.value) {
-    return;
-  }
-
-  const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-  const ctrlKey = isMac ? e.metaKey : e.ctrlKey;
-
-  // Ctrl+Z 撤销
-  if (ctrlKey && e.key === 'z' && !e.shiftKey) {
-    e.preventDefault();
-    if (store.canUndo) {
-      store.undo();
-      ElMessage.success($t('contract-design.undone'));
-    }
-    return;
-  }
-
-  // Ctrl+Y 或 Ctrl+Shift+Z 重做
-  if ((ctrlKey && e.key === 'y') || (ctrlKey && e.shiftKey && e.key === 'z')) {
-    e.preventDefault();
-    if (store.canRedo) {
-      store.redo();
-      ElMessage.success($t('contract-design.redone'));
-    }
-    return;
-  }
-
-  // Ctrl+C 复制
-  if (ctrlKey && e.key === 'c') {
-    if (store.activeId) {
-      e.preventDefault();
-      store.copyToClipboard(store.activeId);
-      ElMessage.success($t('contract-design.copied'));
-    }
-    return;
-  }
-
-  // Ctrl+V 粘贴
-  if (ctrlKey && e.key === 'v') {
-    if (store.hasClipboard) {
-      e.preventDefault();
-      store.pasteFromClipboard();
-      ElMessage.success($t('contract-design.pasted'));
-    }
-    return;
-  }
-
-  // Delete 或 Backspace 删除
-  if (e.key === 'Delete' || e.key === 'Backspace') {
-    if (store.activeId) {
-      e.preventDefault();
-      store.deleteElement(store.activeId);
-      ElMessage.success($t('contract-design.deleted'));
-    }
-    return;
-  }
-
-  // Ctrl+S 保存
-  if (ctrlKey && e.key === 's') {
-    e.preventDefault();
-    handleSave();
-    return;
-  }
-};
-
-// 注册/注销键盘事件
-onMounted(() => {
-  window.addEventListener('keydown', handleKeyDown);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('keydown', handleKeyDown);
-});
-</script>
-
-<template>
-  <div class="contract-design flex h-full w-full overflow-hidden">
-    <!-- 主体区域 -->
-    <div class="bg-background-deep flex flex-1 gap-3 overflow-hidden p-3">
-      <!-- 左侧：元素面板 -->
-      <div class="h-full flex-shrink-0">
-        <MaterialPanel />
-      </div>
-
-      <!-- 中间：设计画布 -->
-      <div class="relative h-full min-w-0 flex-1 overflow-hidden">
-        <DesignCanvas
-          @preview="handlePreview"
-          @view-code="handleViewCode"
-          @clear="handleClear"
-          @import="handleOpenImport"
-          @export="handleExport"
-          @save="handleSave"
-        />
-      </div>
-
-      <!-- 右侧：属性面板 -->
-      <div class="h-full flex-shrink-0">
-        <AttributePanel />
-      </div>
-    </div>
-
-    <!-- 预览弹窗 -->
-    <PreviewModal v-model:visible="previewVisible" />
-
-    <!-- JSON预览弹窗 -->
-    <ElDialog
-      v-model="codeVisible"
-      :title="$t('contract-design.jsonPreview')"
-      width="800px"
-      :close-on-click-modal="false"
-    >
-      <template #header>
-        <div class="flex items-center gap-2">
-          <Code class="h-5 w-5" />
-          <span>{{ $t('contract-design.jsonPreview') }}</span>
-        </div>
-      </template>
-      <div class="code-container">
-        <pre
-          class="bg-background-deep overflow-auto rounded-lg p-4 text-sm"
-        ><code>{{ codeContent }}</code></pre>
-      </div>
-      <template #footer>
-        <ElButton @click="handleCopyCode"> {{ $t('contract-design.copyCode') }} </ElButton>
-        <ElButton type="primary" @click="codeVisible = false"> {{ $t('contract-design.close') }} </ElButton>
-      </template>
-    </ElDialog>
-
-    <!-- 导入弹窗 -->
-    <ElDialog
-      v-model="importVisible"
-      :title="$t('contract-design.importConfig')"
-      width="600px"
-      :close-on-click-modal="false"
-    >
-      <template #header>
-        <div class="flex items-center gap-2">
-          <Upload class="h-5 w-5" />
-          <span>{{ $t('contract-design.importConfig') }}</span>
-        </div>
-      </template>
-      <ElInput
-        v-model="importContent"
-        type="textarea"
-        :rows="15"
-        :placeholder="$t('contract-design.pasteJsonConfig')"
-      />
-      <template #footer>
-        <ElButton @click="importVisible = false">{{ $t('contract-design.cancel') }}</ElButton>
-        <ElButton type="primary" @click="handleImport">
-          <RotateCw class="mr-1 h-4 w-4" />
-          {{ $t('contract-design.import') }}
-        </ElButton>
-      </template>
-    </ElDialog>
-  </div>
-</template>
-
-<style scoped>
-.contract-design {
-  height: 100%;
-}
-
-.code-container {
-  max-height: 500px;
-  overflow: auto;
-}
-
-.code-container pre {
-  margin: 0;
-  word-break: break-all;
-  white-space: pre-wrap;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/contract-design/store/contractDesignStore.ts b/web/apps/web-ele/src/components/contract-design/store/contractDesignStore.ts
deleted file mode 100644
index 1ddaf89..0000000
--- a/web/apps/web-ele/src/components/contract-design/store/contractDesignStore.ts
+++ /dev/null
@@ -1,659 +0,0 @@
-import { computed, nextTick, ref } from 'vue';
-
-import { defineStore } from 'pinia';
-import { v4 as uuidv4 } from 'uuid';
-
-// 合同元素类型
-export type ContractElementType =
-  | 'date-zone' // 日期区
-  | 'divider' // 分割线
-  | 'image' // 图片
-  | 'page-break' // 分页符
-  | 'paragraph' // 段落
-  | 'rich-text' // 富文本
-  | 'seal-zone' // 盖章区
-  | 'signature-zone' // 签名区
-  | 'table' // 表格
-  | 'title' // 标题
-  | 'variable'; // 变量占位符
-
-// 变量类型
-export type VariableType =
-  | 'date' // 日期
-  | 'money' // 金额
-  | 'number' // 数字
-  | 'select' // 选择
-  | 'text'; // 文本
-
-// 签署方类型
-export type PartyType = 'party_a' | 'party_b' | 'party_c' | 'witness';
-
-// 变量配置
-export interface VariableConfig {
-  code: string; // 变量编码
-  name: string; // 变量名称
-  type: VariableType; // 变量类型
-  required: boolean; // 是否必填
-  defaultValue?: string; // 默认值
-  options?: { label: string; value: string }[]; // 选项（select类型）
-  format?: string; // 格式（日期/金额）
-}
-
-// 签名区配置
-export interface SignatureConfig {
-  partyType: PartyType; // 签署方
-  partyLabel: string; // 签署方标签
-  showDate: boolean; // 显示签署日期
-  showSeal: boolean; // 显示印章位置
-  required: boolean; // 是否必签
-}
-
-// 表格列配置
-export interface TableColumnConfig {
-  key: string;
-  title: string;
-  width?: number;
-  align?: 'center' | 'left' | 'right';
-}
-
-// 合同元素
-export interface ContractElement {
-  id: string;
-  type: ContractElementType;
-  props: Record<string, any>;
-  // 变量配置
-  variable?: VariableConfig;
-  // 签名配置
-  signature?: SignatureConfig;
-  // 表格配置
-  tableColumns?: TableColumnConfig[];
-  tableData?: Record<string, any>[];
-}
-
-// 合同模板配置
-export interface ContractTemplateConfig {
-  id: string;
-  name: string;
-  code: string;
-  category: string;
-  description: string;
-  // 页面设置
-  pageSize: 'A4' | 'A5' | 'Letter';
-  pageMargin: { bottom: number; left: number; right: number; top: number };
-  // 元素列表
-  elements: ContractElement[];
-  // 变量定义
-  variables: VariableConfig[];
-  // 签署方定义
-  parties: { label: string; required: boolean; type: PartyType }[];
-}
-
-// 预定义变量
-export const predefinedVariables: VariableConfig[] = [
-  { code: 'party_a_name', name: '甲方名称', type: 'text', required: true },
-  {
-    code: 'party_a_legal_person',
-    name: '甲方法定代表人',
-    type: 'text',
-    required: false,
-  },
-  { code: 'party_a_address', name: '甲方地址', type: 'text', required: false },
-  { code: 'party_a_phone', name: '甲方电话', type: 'text', required: false },
-  { code: 'party_b_name', name: '乙方名称', type: 'text', required: true },
-  {
-    code: 'party_b_legal_person',
-    name: '乙方法定代表人',
-    type: 'text',
-    required: false,
-  },
-  { code: 'party_b_address', name: '乙方地址', type: 'text', required: false },
-  { code: 'party_b_phone', name: '乙方电话', type: 'text', required: false },
-  { code: 'contract_no', name: '合同编号', type: 'text', required: true },
-  {
-    code: 'contract_amount',
-    name: '合同金额',
-    type: 'money',
-    required: false,
-    format: '¥#,##0.00',
-  },
-  {
-    code: 'sign_date',
-    name: '签订日期',
-    type: 'date',
-    required: true,
-    format: 'YYYY年MM月DD日',
-  },
-  {
-    code: 'start_date',
-    name: '开始日期',
-    type: 'date',
-    required: false,
-    format: 'YYYY年MM月DD日',
-  },
-  {
-    code: 'end_date',
-    name: '结束日期',
-    type: 'date',
-    required: false,
-    format: 'YYYY年MM月DD日',
-  },
-  { code: 'sign_location', name: '签订地点', type: 'text', required: false },
-];
-
-// 合同元素材料定义
-export interface ContractMaterial {
-  type: ContractElementType;
-  title: string;
-  icon: string;
-  category: 'layout' | 'signature' | 'text' | 'variable';
-  defaultProps: Record<string, any>;
-}
-
-// 预定义合同元素材料
-export const contractMaterials: ContractMaterial[] = [
-  // 文本元素
-  {
-    type: 'title',
-    title: '合同标题',
-    icon: 'Heading1',
-    category: 'text',
-    defaultProps: {
-      content: '合同标题',
-      level: 1,
-      align: 'center',
-      fontSize: 24,
-      fontWeight: 'bold',
-    },
-  },
-  {
-    type: 'paragraph',
-    title: '段落文本',
-    icon: 'AlignLeft',
-    category: 'text',
-    defaultProps: {
-      content: '请输入段落内容...',
-      align: 'left',
-      fontSize: 14,
-      lineHeight: 1.8,
-      indent: 2, // 首行缩进（字符数）
-    },
-  },
-  {
-    type: 'rich-text',
-    title: '富文本',
-    icon: 'FileText',
-    category: 'text',
-    defaultProps: {
-      content: '<p>请输入富文本内容...</p>',
-      minHeight: 100,
-      padding: 8,
-      showBorder: false,
-      borderColor: 'var(--el-border-color)',
-      backgroundColor: '',
-    },
-  },
-  // 变量元素
-  {
-    type: 'variable',
-    title: '变量占位符',
-    icon: 'Code',
-    category: 'variable',
-    defaultProps: {
-      variableCode: '',
-      placeholder: '______',
-      underline: true,
-      minWidth: 100,
-    },
-  },
-  // 表格元素
-  {
-    type: 'table',
-    title: '表格',
-    icon: 'Table',
-    category: 'text',
-    defaultProps: {
-      bordered: true,
-      headerBgColor: 'var(--el-fill-color-light)',
-    },
-  },
-  // 签署元素
-  {
-    type: 'signature-zone',
-    title: '签名区',
-    icon: 'Pencil',
-    category: 'signature',
-    defaultProps: {
-      width: 200,
-      height: 80,
-      label: '签名',
-      showBorder: true,
-      showLabel: true, // 签字后是否显示标签
-      align: 'right', // 默认靠右对齐
-    },
-  },
-  {
-    type: 'seal-zone',
-    title: '盖章区',
-    icon: 'Circle',
-    category: 'signature',
-    defaultProps: {
-      width: 120,
-      height: 120,
-      label: '盖章处',
-      showBorder: true,
-      showLabel: true, // 盖章后是否显示标签
-      align: 'right', // 默认靠右对齐
-    },
-  },
-  {
-    type: 'date-zone',
-    title: '日期区',
-    icon: 'Calendar',
-    category: 'signature',
-    defaultProps: {
-      format: 'YYYY年MM月DD日',
-      label: '日期',
-      showUnderline: true,
-      align: 'right', // 默认靠右对齐
-    },
-  },
-  // 布局元素
-  {
-    type: 'divider',
-    title: '分割线',
-    icon: 'Minus',
-    category: 'layout',
-    defaultProps: {
-      style: 'solid',
-      color: 'var(--el-border-color)',
-      margin: 16,
-    },
-  },
-  {
-    type: 'page-break',
-    title: '分页符',
-    icon: 'FileText',
-    category: 'layout',
-    defaultProps: {},
-  },
-  {
-    type: 'image',
-    title: '图片',
-    icon: 'Image',
-    category: 'layout',
-    defaultProps: {
-      src: '',
-      width: 200,
-      height: 'auto',
-      align: 'center',
-    },
-  },
-];
-
-export const useContractDesignStore = defineStore('contract-design', () => {
-  // 当前选中的元素
-  const activeId = ref<null | string>(null);
-
-  // 合同模板配置
-  const templateConfig = ref<ContractTemplateConfig>({
-    id: uuidv4(),
-    name: '新建合同模板',
-    code: '',
-    category: '',
-    description: '',
-    pageSize: 'A4',
-    pageMargin: { top: 60, right: 60, bottom: 60, left: 60 },
-    elements: [],
-    variables: [...predefinedVariables],
-    parties: [
-      { type: 'party_a', label: '甲方', required: true },
-      { type: 'party_b', label: '乙方', required: true },
-    ],
-  });
-
-  // 历史记录
-  const history = ref<string[]>([]);
-  const historyIndex = ref(-1);
-  const isTimeTravel = ref(false);
-
-  // 剪贴板
-  const clipboard = ref<ContractElement | null>(null);
-
-  // 拖拽状态
-  const isDragging = ref(false);
-
-  // 预览模式
-  const isPreview = ref(false);
-
-  // 记录快照
-  const recordSnapshot = () => {
-    if (isTimeTravel.value) return;
-
-    if (historyIndex.value < history.value.length - 1) {
-      history.value.splice(historyIndex.value + 1);
-    }
-
-    history.value.push(JSON.stringify(templateConfig.value));
-    historyIndex.value = history.value.length - 1;
-
-    if (history.value.length > 30) {
-      history.value.shift();
-      historyIndex.value--;
-    }
-  };
-
-  const canUndo = computed(() => historyIndex.value > 0);
-  const canRedo = computed(() => historyIndex.value < history.value.length - 1);
-
-  const undo = () => {
-    if (!canUndo.value) return;
-
-    isTimeTravel.value = true;
-    historyIndex.value--;
-    const snapshot = history.value[historyIndex.value];
-    if (snapshot) {
-      templateConfig.value = JSON.parse(snapshot);
-    }
-
-    nextTick(() => {
-      isTimeTravel.value = false;
-    });
-  };
-
-  const redo = () => {
-    if (!canRedo.value) return;
-
-    isTimeTravel.value = true;
-    historyIndex.value++;
-    const snapshot = history.value[historyIndex.value];
-    if (snapshot) {
-      templateConfig.value = JSON.parse(snapshot);
-    }
-
-    nextTick(() => {
-      isTimeTravel.value = false;
-    });
-  };
-
-  // 设置当前选中
-  const setActive = (id: null | string) => {
-    activeId.value = id;
-  };
-
-  // 获取当前选中的元素
-  const activeElement = computed(() => {
-    if (!activeId.value) return null;
-    return (
-      templateConfig.value.elements.find((e) => e.id === activeId.value) || null
-    );
-  });
-
-  // 添加元素
-  const addElement = (material: ContractMaterial, index?: number) => {
-    const id = uuidv4();
-    const element: ContractElement = {
-      id,
-      type: material.type,
-      props: JSON.parse(JSON.stringify(material.defaultProps)),
-    };
-
-    // 如果是表格，初始化列和数据
-    if (material.type === 'table') {
-      element.tableColumns = [
-        { key: 'col1', title: '列1', width: 100, align: 'center' },
-        { key: 'col2', title: '列2', width: 100, align: 'center' },
-        { key: 'col3', title: '列3', width: 100, align: 'center' },
-      ];
-      element.tableData = [{ col1: '', col2: '', col3: '' }];
-    }
-
-    // 如果是签名区，初始化签名配置
-    if (material.type === 'signature-zone' || material.type === 'seal-zone') {
-      element.signature = {
-        partyType: 'party_a',
-        partyLabel: '甲方',
-        showDate: true,
-        showSeal: material.type === 'seal-zone',
-        required: true,
-      };
-    }
-
-    if (typeof index === 'number') {
-      templateConfig.value.elements.splice(index, 0, element);
-    } else {
-      templateConfig.value.elements.push(element);
-    }
-
-    activeId.value = id;
-    recordSnapshot();
-  };
-
-  // 删除元素
-  const deleteElement = (id: string) => {
-    const index = templateConfig.value.elements.findIndex((e) => e.id === id);
-    if (index !== -1) {
-      templateConfig.value.elements.splice(index, 1);
-      if (activeId.value === id) {
-        activeId.value = null;
-      }
-      recordSnapshot();
-    }
-  };
-
-  // 复制元素
-  const copyElement = (id: string) => {
-    const element = templateConfig.value.elements.find((e) => e.id === id);
-    if (!element) return;
-
-    const newId = uuidv4();
-    const newElement: ContractElement = {
-      ...JSON.parse(JSON.stringify(element)),
-      id: newId,
-    };
-
-    const index = templateConfig.value.elements.findIndex((e) => e.id === id);
-    templateConfig.value.elements.splice(index + 1, 0, newElement);
-    activeId.value = newId;
-    recordSnapshot();
-  };
-
-  // 复制到剪贴板
-  const copyToClipboard = (id: string) => {
-    const element = templateConfig.value.elements.find((e) => e.id === id);
-    if (element) {
-      clipboard.value = JSON.parse(JSON.stringify(element));
-    }
-  };
-
-  // 从剪贴板粘贴
-  const pasteFromClipboard = () => {
-    if (!clipboard.value) return false;
-
-    const newId = uuidv4();
-    const newElement: ContractElement = {
-      ...JSON.parse(JSON.stringify(clipboard.value)),
-      id: newId,
-    };
-
-    templateConfig.value.elements.push(newElement);
-    activeId.value = newId;
-    recordSnapshot();
-    return true;
-  };
-
-  // 检查剪贴板是否有内容
-  const hasClipboard = computed(() => clipboard.value !== null);
-
-  // 更新元素属性
-  const updateElementProps = (id: string, props: Record<string, any>) => {
-    const element = templateConfig.value.elements.find((e) => e.id === id);
-    if (element) {
-      element.props = { ...element.props, ...props };
-
-      // 如果是变量占位符，且选择了变量，自动添加到模板变量列表
-      if (element.type === 'variable' && props.variableCode) {
-        const varConfig = predefinedVariables.find(
-          (v) => v.code === props.variableCode,
-        );
-        if (varConfig) {
-          const exists = templateConfig.value.variables.find(
-            (v) => v.code === varConfig.code,
-          );
-          if (!exists) {
-            templateConfig.value.variables.push({ ...varConfig });
-          }
-        }
-      }
-    }
-  };
-
-  // 更新元素
-  const updateElement = (id: string, updates: Partial<ContractElement>) => {
-    const element = templateConfig.value.elements.find((e) => e.id === id);
-    if (element) {
-      Object.assign(element, updates);
-      recordSnapshot();
-    }
-  };
-
-  // 移动元素
-  const moveElement = (id: string, direction: 'down' | 'up') => {
-    const elements = templateConfig.value.elements;
-    const index = elements.findIndex((e) => e.id === id);
-    if (index === -1) return;
-
-    const newIndex = direction === 'up' ? index - 1 : index + 1;
-    if (newIndex < 0 || newIndex >= elements.length) return;
-
-    [elements[index], elements[newIndex]] = [
-      elements[newIndex]!,
-      elements[index]!,
-    ];
-    recordSnapshot();
-  };
-
-  // 设置拖拽状态
-  const setDragging = (val: boolean) => {
-    isDragging.value = val;
-  };
-
-  // 设置预览模式
-  const setPreview = (val: boolean) => {
-    isPreview.value = val;
-  };
-
-  // 清空画布
-  const clearCanvas = () => {
-    templateConfig.value.elements = [];
-    activeId.value = null;
-    recordSnapshot();
-  };
-
-  // 添加变量
-  const addVariable = (variable: VariableConfig) => {
-    const exists = templateConfig.value.variables.find(
-      (v) => v.code === variable.code,
-    );
-    if (!exists) {
-      templateConfig.value.variables.push(variable);
-      recordSnapshot();
-    }
-  };
-
-  // 删除变量
-  const removeVariable = (code: string) => {
-    const index = templateConfig.value.variables.findIndex(
-      (v) => v.code === code,
-    );
-    if (index !== -1) {
-      templateConfig.value.variables.splice(index, 1);
-      recordSnapshot();
-    }
-  };
-
-  // 更新模板基础配置
-  const updateTemplateConfig = (config: Partial<ContractTemplateConfig>) => {
-    Object.assign(templateConfig.value, config);
-  };
-
-  // 导出配置
-  const exportConfig = () => {
-    return JSON.stringify(templateConfig.value, null, 2);
-  };
-
-  // 导入配置
-  const importConfig = (json: string) => {
-    try {
-      const config = JSON.parse(json);
-      templateConfig.value = config;
-      activeId.value = null;
-      recordSnapshot();
-      return true;
-    } catch {
-      return false;
-    }
-  };
-
-  // 克隆元素（用于拖拽）
-  const cloneElement = (material: ContractMaterial): ContractElement => {
-    const id = uuidv4();
-    const element: ContractElement = {
-      id,
-      type: material.type,
-      props: JSON.parse(JSON.stringify(material.defaultProps)),
-    };
-
-    if (material.type === 'table') {
-      element.tableColumns = [
-        { key: 'col1', title: '列1', width: 100, align: 'center' },
-        { key: 'col2', title: '列2', width: 100, align: 'center' },
-        { key: 'col3', title: '列3', width: 100, align: 'center' },
-      ];
-      element.tableData = [{ col1: '', col2: '', col3: '' }];
-    }
-
-    if (material.type === 'signature-zone' || material.type === 'seal-zone') {
-      element.signature = {
-        partyType: 'party_a',
-        partyLabel: '甲方',
-        showDate: true,
-        showSeal: material.type === 'seal-zone',
-        required: true,
-      };
-    }
-
-    return element;
-  };
-
-  return {
-    activeId,
-    activeElement,
-    templateConfig,
-    isDragging,
-    isPreview,
-    canUndo,
-    canRedo,
-    hasClipboard,
-    setActive,
-    addElement,
-    deleteElement,
-    copyElement,
-    copyToClipboard,
-    pasteFromClipboard,
-    updateElementProps,
-    updateElement,
-    moveElement,
-    setDragging,
-    setPreview,
-    clearCanvas,
-    addVariable,
-    removeVariable,
-    updateTemplateConfig,
-    exportConfig,
-    importConfig,
-    cloneElement,
-    undo,
-    redo,
-    recordSnapshot,
-  };
-});
diff --git a/web/apps/web-ele/src/components/contract-design/store/contractSignStore.ts b/web/apps/web-ele/src/components/contract-design/store/contractSignStore.ts
deleted file mode 100644
index 7da98a3..0000000
--- a/web/apps/web-ele/src/components/contract-design/store/contractSignStore.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-import type { ContractTemplateConfig, PartyType } from './contractDesignStore';
-
-import { computed, ref } from 'vue';
-
-import { defineStore } from 'pinia';
-
-// 签署数据
-export interface SignatureData {
-  elementId: string; // 对应的元素 ID
-  partyType: PartyType; // 签署方类型
-  partyLabel: string; // 签署方标签
-  signatureImage: string; // 签名图片（base64）
-  signedAt: string; // 签署时间
-  signedBy?: string; // 签署人
-}
-
-// 变量填写数据
-export interface VariableData {
-  code: string;
-  value: string;
-}
-
-// 合同签署状态
-export interface ContractSignState {
-  contractId: string;
-  templateConfig: ContractTemplateConfig | null;
-  signatures: SignatureData[];
-  variables: VariableData[];
-  status: 'completed' | 'draft' | 'signing';
-  startedAt?: string;
-  completedAt?: string;
-}
-
-export const useContractSignStore = defineStore('contract-sign', () => {
-  // 合同模板配置
-  const templateConfig = ref<ContractTemplateConfig | null>(null);
-
-  // 签署数据
-  const signatures = ref<SignatureData[]>([]);
-
-  // 变量数据
-  const variables = ref<VariableData[]>([]);
-
-  // 签署状态
-  const status = ref<'completed' | 'draft' | 'signing'>('draft');
-
-  // 加载合同模板
-  const loadTemplate = (config: ContractTemplateConfig) => {
-    templateConfig.value = JSON.parse(JSON.stringify(config));
-    signatures.value = [];
-    variables.value = [];
-    status.value = 'signing';
-  };
-
-  // 获取元素的签名数据
-  const getSignature = (elementId: string): SignatureData | undefined => {
-    return signatures.value.find((s) => s.elementId === elementId);
-  };
-
-  // 添加或更新签名
-  const setSignature = (data: Omit<SignatureData, 'signedAt'>) => {
-    const index = signatures.value.findIndex(
-      (s) => s.elementId === data.elementId,
-    );
-    const signatureData: SignatureData = {
-      ...data,
-      signedAt: new Date().toISOString(),
-    };
-
-    if (index === -1) {
-      signatures.value.push(signatureData);
-    } else {
-      signatures.value[index] = signatureData;
-    }
-  };
-
-  // 移除签名
-  const removeSignature = (elementId: string) => {
-    const index = signatures.value.findIndex((s) => s.elementId === elementId);
-    if (index !== -1) {
-      signatures.value.splice(index, 1);
-    }
-  };
-
-  // 获取变量值
-  const getVariable = (code: string): string => {
-    const variable = variables.value.find((v) => v.code === code);
-    return variable?.value || '';
-  };
-
-  // 设置变量值
-  const setVariable = (code: string, value: string) => {
-    const index = variables.value.findIndex((v) => v.code === code);
-    if (index === -1) {
-      variables.value.push({ code, value });
-    } else {
-      variables.value[index]!.value = value;
-    }
-  };
-
-  // 获取所有需要签署的元素
-  const signatureElements = computed(() => {
-    if (!templateConfig.value) return [];
-    return templateConfig.value.elements.filter(
-      (e) => e.type === 'signature-zone' || e.type === 'seal-zone',
-    );
-  });
-
-  // 获取所有必须签署的元素
-  const requiredSignatureElements = computed(() => {
-    return signatureElements.value.filter((e) => e.signature?.required);
-  });
-
-  // 检查是否所有必须签署的元素都已签署
-  const allRequiredSigned = computed(() => {
-    return requiredSignatureElements.value.every((e) =>
-      signatures.value.some((s) => s.elementId === e.id),
-    );
-  });
-
-  // 获取签署进度
-  const signProgress = computed(() => {
-    const total = requiredSignatureElements.value.length;
-    if (total === 0) return 100;
-
-    const signed = requiredSignatureElements.value.filter((e) =>
-      signatures.value.some((s) => s.elementId === e.id),
-    ).length;
-
-    return Math.round((signed / total) * 100);
-  });
-
-  // 完成签署
-  const completeSign = () => {
-    if (!allRequiredSigned.value) {
-      return false;
-    }
-    status.value = 'completed';
-    return true;
-  };
-
-  // 重置
-  const reset = () => {
-    templateConfig.value = null;
-    signatures.value = [];
-    variables.value = [];
-    status.value = 'draft';
-  };
-
-  // 导出签署后的合同数据
-  const exportSignedContract = () => {
-    return {
-      template: templateConfig.value,
-      signatures: signatures.value,
-      variables: variables.value,
-      status: status.value,
-      completedAt:
-        status.value === 'completed' ? new Date().toISOString() : undefined,
-    };
-  };
-
-  return {
-    templateConfig,
-    signatures,
-    variables,
-    status,
-    signatureElements,
-    requiredSignatureElements,
-    allRequiredSigned,
-    signProgress,
-    loadTemplate,
-    getSignature,
-    setSignature,
-    removeSignature,
-    getVariable,
-    setVariable,
-    completeSign,
-    reset,
-    exportSignedContract,
-  };
-});
diff --git a/web/apps/web-ele/src/components/contract-design/templates/sampleContract.ts b/web/apps/web-ele/src/components/contract-design/templates/sampleContract.ts
deleted file mode 100644
index 5e3f46b..0000000
--- a/web/apps/web-ele/src/components/contract-design/templates/sampleContract.ts
+++ /dev/null
@@ -1,350 +0,0 @@
-import type { ContractTemplateConfig } from '../store/contractDesignStore';
-
-// 示例合同模板 - 简单采购合同
-export const samplePurchaseContract: ContractTemplateConfig = {
-  id: 'sample-purchase-001',
-  name: '采购合同模板',
-  code: 'PURCHASE_CONTRACT',
-  category: '采购类',
-  description: '标准采购合同模板，适用于一般商品采购场景',
-  pageSize: 'A4',
-  pageMargin: { top: 60, right: 60, bottom: 60, left: 60 },
-  elements: [
-    {
-      id: 'title-1',
-      type: 'title',
-      props: {
-        content: '采购合同',
-        level: 1,
-        align: 'center',
-        fontSize: 24,
-        fontWeight: 'bold',
-      },
-    },
-    {
-      id: 'contract-no',
-      type: 'paragraph',
-      props: {
-        content: '合同编号：{{contract_no}}',
-        align: 'right',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 0,
-      },
-    },
-    {
-      id: 'divider-1',
-      type: 'divider',
-      props: {
-        style: 'solid',
-        color: 'var(--el-border-color)',
-        margin: 16,
-      },
-    },
-    {
-      id: 'party-info',
-      type: 'paragraph',
-      props: {
-        content:
-          '甲方（采购方）：{{party_a_name}}\n地址：{{party_a_address}}\n联系电话：{{party_a_phone}}\n\n乙方（供应方）：{{party_b_name}}\n地址：{{party_b_address}}\n联系电话：{{party_b_phone}}',
-        align: 'left',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 0,
-      },
-    },
-    {
-      id: 'divider-2',
-      type: 'divider',
-      props: {
-        style: 'dashed',
-        color: 'var(--el-border-color)',
-        margin: 16,
-      },
-    },
-    {
-      id: 'intro',
-      type: 'paragraph',
-      props: {
-        content:
-          '甲乙双方经友好协商，就甲方向乙方采购相关产品事宜，达成如下协议：',
-        align: 'left',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 2,
-      },
-    },
-    {
-      id: 'article-1',
-      type: 'title',
-      props: {
-        content: '第一条 采购内容',
-        level: 3,
-        align: 'left',
-        fontSize: 16,
-        fontWeight: 'bold',
-      },
-    },
-    {
-      id: 'article-1-content',
-      type: 'paragraph',
-      props: {
-        content:
-          '甲方向乙方采购以下产品（详见附件清单），合同总金额为人民币 {{contract_amount}} 元整。',
-        align: 'left',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 2,
-      },
-    },
-    {
-      id: 'article-2',
-      type: 'title',
-      props: {
-        content: '第二条 交付方式',
-        level: 3,
-        align: 'left',
-        fontSize: 16,
-        fontWeight: 'bold',
-      },
-    },
-    {
-      id: 'article-2-content',
-      type: 'paragraph',
-      props: {
-        content:
-          '乙方应于合同签订后30个工作日内完成产品交付。交付地点为甲方指定地址。',
-        align: 'left',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 2,
-      },
-    },
-    {
-      id: 'article-3',
-      type: 'title',
-      props: {
-        content: '第三条 付款方式',
-        level: 3,
-        align: 'left',
-        fontSize: 16,
-        fontWeight: 'bold',
-      },
-    },
-    {
-      id: 'article-3-content',
-      type: 'paragraph',
-      props: {
-        content: '甲方应于产品验收合格后15个工作日内，向乙方支付全部合同款项。',
-        align: 'left',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 2,
-      },
-    },
-    {
-      id: 'article-4',
-      type: 'title',
-      props: {
-        content: '第四条 违约责任',
-        level: 3,
-        align: 'left',
-        fontSize: 16,
-        fontWeight: 'bold',
-      },
-    },
-    {
-      id: 'article-4-content',
-      type: 'paragraph',
-      props: {
-        content:
-          '任何一方违反本合同约定，应向对方支付合同总金额10%的违约金，并赔偿由此造成的全部损失。',
-        align: 'left',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 2,
-      },
-    },
-    {
-      id: 'article-5',
-      type: 'title',
-      props: {
-        content: '第五条 争议解决',
-        level: 3,
-        align: 'left',
-        fontSize: 16,
-        fontWeight: 'bold',
-      },
-    },
-    {
-      id: 'article-5-content',
-      type: 'paragraph',
-      props: {
-        content:
-          '本合同在履行过程中发生的争议，由双方协商解决；协商不成的，任何一方均可向合同签订地人民法院提起诉讼。',
-        align: 'left',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 2,
-      },
-    },
-    {
-      id: 'article-6',
-      type: 'title',
-      props: {
-        content: '第六条 其他',
-        level: 3,
-        align: 'left',
-        fontSize: 16,
-        fontWeight: 'bold',
-      },
-    },
-    {
-      id: 'article-6-content',
-      type: 'paragraph',
-      props: {
-        content:
-          '本合同一式两份，甲乙双方各执一份，具有同等法律效力。本合同自双方签字盖章之日起生效。',
-        align: 'left',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 2,
-      },
-    },
-    {
-      id: 'divider-3',
-      type: 'divider',
-      props: {
-        style: 'solid',
-        color: 'var(--el-border-color)',
-        margin: 24,
-      },
-    },
-    {
-      id: 'sign-section-title',
-      type: 'paragraph',
-      props: {
-        content: '（以下为签署区）',
-        align: 'center',
-        fontSize: 12,
-        lineHeight: 1.5,
-        indent: 0,
-      },
-    },
-    {
-      id: 'sign-party-a',
-      type: 'paragraph',
-      props: {
-        content: '甲方（盖章）：',
-        align: 'left',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 0,
-      },
-    },
-    {
-      id: 'signature-a',
-      type: 'signature-zone',
-      props: {
-        width: 200,
-        height: 80,
-        label: '签名',
-        showBorder: true,
-      },
-      signature: {
-        partyType: 'party_a',
-        partyLabel: '甲方签名',
-        showDate: true,
-        showSeal: false,
-        required: true,
-      },
-    },
-    {
-      id: 'date-a',
-      type: 'date-zone',
-      props: {
-        format: 'YYYY年MM月DD日',
-        label: '签署日期',
-        showUnderline: true,
-      },
-    },
-    {
-      id: 'sign-party-b',
-      type: 'paragraph',
-      props: {
-        content: '乙方（盖章）：',
-        align: 'left',
-        fontSize: 14,
-        lineHeight: 1.8,
-        indent: 0,
-      },
-    },
-    {
-      id: 'signature-b',
-      type: 'signature-zone',
-      props: {
-        width: 200,
-        height: 80,
-        label: '签名',
-        showBorder: true,
-      },
-      signature: {
-        partyType: 'party_b',
-        partyLabel: '乙方签名',
-        showDate: true,
-        showSeal: false,
-        required: true,
-      },
-    },
-    {
-      id: 'date-b',
-      type: 'date-zone',
-      props: {
-        format: 'YYYY年MM月DD日',
-        label: '签署日期',
-        showUnderline: true,
-      },
-    },
-  ],
-  variables: [
-    { code: 'party_a_name', name: '甲方名称', type: 'text', required: true },
-    {
-      code: 'party_a_address',
-      name: '甲方地址',
-      type: 'text',
-      required: false,
-    },
-    { code: 'party_a_phone', name: '甲方电话', type: 'text', required: false },
-    { code: 'party_b_name', name: '乙方名称', type: 'text', required: true },
-    {
-      code: 'party_b_address',
-      name: '乙方地址',
-      type: 'text',
-      required: false,
-    },
-    { code: 'party_b_phone', name: '乙方电话', type: 'text', required: false },
-    { code: 'contract_no', name: '合同编号', type: 'text', required: true },
-    {
-      code: 'contract_amount',
-      name: '合同金额',
-      type: 'money',
-      required: true,
-      format: '¥#,##0.00',
-    },
-  ],
-  parties: [
-    { type: 'party_a', label: '甲方（采购方）', required: true },
-    { type: 'party_b', label: '乙方（供应方）', required: true },
-  ],
-};
-
-// 导出所有模板
-export const contractTemplates = [
-  {
-    id: 'sample-purchase',
-    name: '采购合同',
-    description: '标准采购合同模板',
-    icon: 'FileText',
-    template: samplePurchaseContract,
-  },
-];
diff --git a/web/apps/web-ele/src/components/contract-design/utils/exportPdf.ts b/web/apps/web-ele/src/components/contract-design/utils/exportPdf.ts
deleted file mode 100644
index 1781d18..0000000
--- a/web/apps/web-ele/src/components/contract-design/utils/exportPdf.ts
+++ /dev/null
@@ -1,283 +0,0 @@
-import html2canvas from 'html2canvas';
-import { jsPDF } from 'jspdf';
-
-export interface ExportPdfOptions {
-  filename?: string;
-  pageSize?: 'A4' | 'A5' | 'Letter';
-  pageMargin?: { bottom: number; left: number; right: number; top: number };
-  quality?: number;
-}
-
-// 页面尺寸（单位：mm）
-const PAGE_SIZES_MM = {
-  A4: { width: 210, height: 297 },
-  A5: { width: 148, height: 210 },
-  Letter: { width: 216, height: 279 },
-};
-
-// 页面尺寸（单位：px，96dpi）
-const PAGE_SIZES_PX = {
-  A4: { width: 794, height: 1123 },
-  A5: { width: 559, height: 794 },
-  Letter: { width: 816, height: 1056 },
-};
-
-/**
- * 将多个页面元素导出为 PDF
- * @param pages 页面元素数组
- * @param options 导出选项
- */
-export async function exportPagesToPdf(
-  pages: HTMLElement[],
-  options: ExportPdfOptions = {},
-): Promise<void> {
-  const {
-    filename = `contract-${Date.now()}.pdf`,
-    pageSize = 'A4',
-    quality = 4, // 提高默认分辨率，3 = 3倍缩放
-  } = options;
-
-  const pageConfig = PAGE_SIZES_MM[pageSize];
-
-  // 创建 PDF
-  const pdf = new jsPDF({
-    orientation: 'portrait',
-    unit: 'mm',
-    format: [pageConfig.width, pageConfig.height],
-  });
-
-  // 逐页渲染
-  for (const [i, page] of pages.entries()) {
-    // 导出前隐藏不需要的元素（如已签署徽章）
-    const hiddenElements: HTMLElement[] = [];
-    page.querySelectorAll('.signed-badge').forEach((el) => {
-      const htmlEl = el as HTMLElement;
-      hiddenElements.push(htmlEl);
-      htmlEl.style.display = 'none';
-    });
-
-    // 导出前移除签名区域的边框和背景样式
-    const signedElements: { el: HTMLElement; originalStyle: string }[] = [];
-    page
-      .querySelectorAll('.signature-display.signed, .seal-display.signed')
-      .forEach((el) => {
-        const htmlEl = el as HTMLElement;
-        signedElements.push({
-          el: htmlEl,
-          originalStyle: htmlEl.getAttribute('style') || '',
-        });
-        htmlEl.style.border = 'none';
-        htmlEl.style.background = 'transparent';
-        htmlEl.style.padding = '0';
-      });
-
-    // 使用 html2canvas 将元素转换为 canvas
-    const canvas = await html2canvas(page, {
-      scale: quality,
-      useCORS: true,
-      allowTaint: true,
-      backgroundColor: '#ffffff',
-      logging: false,
-    });
-
-    // 导出后恢复隐藏的元素
-    hiddenElements.forEach((el) => {
-      el.style.display = '';
-    });
-
-    // 导出后恢复签名区域的样式
-    signedElements.forEach(({ el, originalStyle }) => {
-      el.setAttribute('style', originalStyle);
-    });
-
-    // 计算图片尺寸（填满整页）
-    const imgData = canvas.toDataURL('image/jpeg', 0.95);
-
-    if (i > 0) {
-      pdf.addPage();
-    }
-
-    // 添加图片，填满整页
-    pdf.addImage(imgData, 'JPEG', 0, 0, pageConfig.width, pageConfig.height);
-  }
-
-  // 下载 PDF
-  pdf.save(filename);
-}
-
-/**
- * 将 HTML 元素导出为 PDF
- * @param element 要导出的 HTML 元素
- * @param options 导出选项
- */
-export async function exportToPdf(
-  element: HTMLElement,
-  options: ExportPdfOptions = {},
-): Promise<void> {
-  const {
-    filename = `contract-${Date.now()}.pdf`,
-    pageSize = 'A4',
-    pageMargin = { top: 10, right: 10, bottom: 10, left: 10 },
-    quality = 2,
-  } = options;
-
-  const pageConfig = PAGE_SIZES_MM[pageSize];
-
-  // 导出前隐藏不需要的元素（如已签署徽章）
-  const hiddenElements: HTMLElement[] = [];
-  element.querySelectorAll('.signed-badge').forEach((el) => {
-    const htmlEl = el as HTMLElement;
-    hiddenElements.push(htmlEl);
-    htmlEl.style.display = 'none';
-  });
-
-  // 导出前移除签名区域的边框和背景样式
-  const signedElements: { el: HTMLElement; originalStyle: string }[] = [];
-  element
-    .querySelectorAll('.signature-display.signed, .seal-display.signed')
-    .forEach((el) => {
-      const htmlEl = el as HTMLElement;
-      signedElements.push({
-        el: htmlEl,
-        originalStyle: htmlEl.getAttribute('style') || '',
-      });
-      htmlEl.style.border = 'none';
-      htmlEl.style.background = 'transparent';
-      htmlEl.style.padding = '0';
-    });
-
-  // 使用 html2canvas 将元素转换为 canvas
-  const canvas = await html2canvas(element, {
-    scale: quality,
-    useCORS: true,
-    allowTaint: true,
-    backgroundColor: '#ffffff',
-    logging: false,
-  });
-
-  // 导出后恢复隐藏的元素
-  hiddenElements.forEach((el) => {
-    el.style.display = '';
-  });
-
-  // 导出后恢复签名区域的样式
-  signedElements.forEach(({ el, originalStyle }) => {
-    el.setAttribute('style', originalStyle);
-  });
-
-  // 创建 PDF
-  const pdf = new jsPDF({
-    orientation: 'portrait',
-    unit: 'mm',
-    format: [pageConfig.width, pageConfig.height],
-  });
-
-  // 计算可用区域（减去边距）
-  const contentWidth = pageConfig.width - pageMargin.left - pageMargin.right;
-  const contentHeight = pageConfig.height - pageMargin.top - pageMargin.bottom;
-
-  // 计算图片尺寸（按宽度缩放）
-  const imgWidth = contentWidth;
-  const imgHeight = (canvas.height * imgWidth) / canvas.width;
-
-  // 将 canvas 转换为图片数据
-  const imgData = canvas.toDataURL('image/jpeg', 0.95);
-
-  // 如果内容高度小于等于一页可用高度，直接添加
-  if (imgHeight <= contentHeight) {
-    pdf.addImage(
-      imgData,
-      'JPEG',
-      pageMargin.left,
-      pageMargin.top,
-      imgWidth,
-      imgHeight,
-    );
-  } else {
-    // 需要分页
-    let remainingHeight = imgHeight;
-    let sourceY = 0;
-    let pageIndex = 0;
-
-    while (remainingHeight > 0) {
-      if (pageIndex > 0) {
-        pdf.addPage();
-      }
-
-      // 计算当前页显示的内容高度
-      const currentPageContentHeight = Math.min(remainingHeight, contentHeight);
-
-      // 计算源图片中对应的像素高度
-      const sourceHeight =
-        (currentPageContentHeight / imgHeight) * canvas.height;
-
-      // 创建临时 canvas 来裁剪当前页的内容
-      const tempCanvas = document.createElement('canvas');
-      tempCanvas.width = canvas.width;
-      tempCanvas.height = sourceHeight;
-      const tempCtx = tempCanvas.getContext('2d');
-
-      if (tempCtx) {
-        tempCtx.drawImage(
-          canvas,
-          0,
-          sourceY,
-          canvas.width,
-          sourceHeight, // 源区域
-          0,
-          0,
-          canvas.width,
-          sourceHeight, // 目标区域
-        );
-
-        const pageImgData = tempCanvas.toDataURL('image/jpeg', 0.95);
-        pdf.addImage(
-          pageImgData,
-          'JPEG',
-          pageMargin.left,
-          pageMargin.top,
-          imgWidth,
-          currentPageContentHeight,
-        );
-      }
-
-      sourceY += sourceHeight;
-      remainingHeight -= contentHeight;
-      pageIndex++;
-    }
-  }
-
-  // 下载 PDF
-  pdf.save(filename);
-}
-
-/**
- * 将合同渲染器导出为 PDF
- * @param containerSelector 容器选择器
- * @param options 导出选项
- */
-export async function exportContractToPdf(
-  containerSelector: string,
-  options: ExportPdfOptions = {},
-): Promise<boolean> {
-  const container = document.querySelector(containerSelector) as HTMLElement;
-  if (!container) {
-    console.error('Container not found:', containerSelector);
-    return false;
-  }
-
-  // 查找合同纸张元素
-  const paper = container.querySelector('.contract-paper') as HTMLElement;
-  if (!paper) {
-    console.error('Contract paper not found');
-    return false;
-  }
-
-  try {
-    await exportToPdf(paper, options);
-    return true;
-  } catch (error) {
-    console.error('Export PDF failed:', error);
-    return false;
-  }
-}
diff --git a/web/apps/web-ele/src/components/import-export-manager/import-export-manager.vue b/web/apps/web-ele/src/components/import-export-manager/import-export-manager.vue
deleted file mode 100644
index 7420223..0000000
--- a/web/apps/web-ele/src/components/import-export-manager/import-export-manager.vue
+++ /dev/null
@@ -1,826 +0,0 @@
-<script setup lang="ts">
-import type {
-  ImportExportManagerEmits,
-  ImportExportManagerProps,
-  TaskRecord,
-} from './types';
-
-import type { ImportResult } from '#/api/online-dev/form-data-api';
-
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { onBeforeRouteLeave } from 'vue-router';
-
-import {
-  AlertCircle,
-  ArrowDownToLine,
-  ArrowUpFromLine,
-  CheckCircle2,
-  Download,
-  FileSpreadsheet,
-  Loader,
-  RefreshCw,
-  Square,
-  Trash2,
-  Upload,
-  XCircle,
-} from '@vben/icons';
-
-import { UploadFilled } from '@element-plus/icons-vue';
-import { useLocalStorage } from '@vueuse/core';
-import {
-  ElButton,
-  ElCheckbox,
-  ElCollapse,
-  ElCollapseItem,
-  ElIcon,
-  ElMessage,
-  ElPopconfirm,
-  ElPopover,
-  ElScrollbar,
-  ElTabPane,
-  ElTabs,
-  ElTag,
-  ElUpload,
-} from 'element-plus';
-
-import {
-  cancelExportTaskApi,
-  createExportTaskApi,
-  downloadFormDataExcel,
-  downloadImportTemplate,
-  importFormDataExcelApi,
-  pollExportTask,
-} from '#/api/online-dev/form-data-api';
-
-defineOptions({ name: 'ImportExportManager' });
-
-const props = withDefaults(defineProps<ImportExportManagerProps>(), {
-  formName: '',
-  showImport: true,
-  showExport: true,
-  showTemplate: true,
-});
-
-const emit = defineEmits<ImportExportManagerEmits>();
-
-// 状态
-const activeTab = ref('import');
-const popoverVisible = ref(false);
-const importLoading = ref(false);
-const exportLoading = ref(false);
-const updateExisting = ref(false);
-const includeSubTables = ref(true);
-const useAsyncExport = ref(true); // 默认使用异步导出
-const exportProgress = ref(0);
-
-// 任务历史
-const taskHistory = useLocalStorage<TaskRecord[]>(
-  `import-export-history-${props.formCode}`,
-  [],
-);
-
-// 最近导入结果
-const lastImportResult = ref<ImportResult | null>(null);
-const showErrorDetails = ref<string[]>([]);
-
-// 存储活跃的轮询停止函数
-const activePollers = new Map<string, () => void>();
-
-// 启动轮询任务
-function startPolling(taskId: string, filename: string, isLatest: boolean) {
-  const { promise, stop } = pollExportTask(props.formCode, taskId, {
-    filename,
-    onProgress: (progress, status, details) => {
-      updateTaskRecord(taskId, {
-        progress,
-        totalCount: details?.total_count,
-        processedCount: details?.processed_count,
-        status:
-          status === 'processing'
-            ? 'running'
-            : (status === 'completed'
-              ? 'success'
-              : 'failed'),
-      });
-
-      if (isLatest) {
-        exportProgress.value = progress;
-      }
-    },
-  });
-
-  // 存储 stop 函数
-  activePollers.set(taskId, stop);
-
-  promise
-    .then(() => {
-      updateTaskRecord(taskId, { status: 'success' });
-      ElMessage.success(`任务 ${filename} 导出成功`);
-    })
-    .catch((error) => {
-      updateTaskRecord(taskId, {
-        status: 'failed',
-        error: error.message,
-      });
-      if (isLatest) {
-        ElMessage.error(`任务 ${filename} 失败: ${error.message}`);
-      }
-    })
-    .finally(() => {
-      activePollers.delete(taskId);
-      if (isLatest) {
-        exportLoading.value = false;
-        exportProgress.value = 0;
-      }
-    });
-}
-
-// 恢复未完成的任务
-function recoverRunningTasks() {
-  taskHistory.value.forEach((task) => {
-    if (task.type === 'export' && task.status === 'running') {
-      exportLoading.value = true;
-      useAsyncExport.value = true;
-      const isLatest = taskHistory.value[0]?.id === task.id;
-      startPolling(task.id, task.filename, isLatest);
-    }
-  });
-}
-
-onMounted(() => {
-  recoverRunningTasks();
-});
-
-// 停止所有轮询
-function stopAllPollers() {
-  activePollers.forEach((stop) => stop());
-  activePollers.clear();
-}
-
-// 页面卸载时停止所有轮询
-onUnmounted(() => {
-  stopAllPollers();
-});
-
-// 路由离开时停止所有轮询
-onBeforeRouteLeave(() => {
-  stopAllPollers();
-});
-
-// 计算属性
-const hasErrors = computed(
-  () => lastImportResult.value && lastImportResult.value.failed > 0,
-);
-
-// 生成任务ID
-function generateTaskId() {
-  return `task_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
-}
-
-// 添加任务记录
-function addTaskRecord(
-  type: 'export' | 'import',
-  filename: string,
-  options?: any,
-): TaskRecord {
-  const record: TaskRecord = {
-    id: generateTaskId(),
-    type,
-    filename,
-    status: 'running',
-    startTime: new Date(),
-    options,
-  };
-  taskHistory.value.unshift(record);
-  return record;
-}
-
-// 更新任务记录
-function updateTaskRecord(id: string, updates: Partial<TaskRecord>) {
-  const record = taskHistory.value.find((t) => t.id === id);
-  if (record) {
-    Object.assign(record, updates, {
-      endTime: ['failed', 'success'].includes(updates.status || '')
-        ? new Date()
-        : undefined,
-    });
-  }
-}
-
-// 下载模板
-async function handleDownloadTemplate() {
-  try {
-    await downloadImportTemplate(
-      props.formCode,
-      `${props.formName || props.formCode}_导入模板.xlsx`,
-    );
-    ElMessage.success('模板下载成功');
-  } catch {
-    ElMessage.error('模板下载失败');
-  }
-}
-
-// 导出数据
-async function handleExport() {
-  exportLoading.value = true;
-  exportProgress.value = 0;
-  const filename = `${props.formName || props.formCode}_数据.xlsx`;
-  const options = {
-    includeSubTables: includeSubTables.value,
-    filename,
-  };
-  const record = addTaskRecord('export', filename, options);
-
-  try {
-    if (useAsyncExport.value) {
-      // 异步导出（适用于大数据量）
-      // 1. 创建后端任务
-      const { task_id } = await createExportTaskApi(props.formCode, {
-        includeSubTables: includeSubTables.value,
-      });
-
-      // 2. 更新前端记录 ID 为后端 UUID
-      const index = taskHistory.value.findIndex((t) => t.id === record.id);
-      if (index !== -1 && taskHistory.value[index]) {
-        taskHistory.value[index]!.id = task_id;
-        record.id = task_id;
-      }
-
-      // 3. 跳转到进行中 Tab
-      activeTab.value = 'running';
-
-      // 4. 启动轮询（会自动处理成功/失败/停止）
-      startPolling(task_id, filename, true);
-      return; // 轮询会处理后续逻辑
-    } else {
-      // 同步导出（适用于小数据量）
-      await downloadFormDataExcel(props.formCode, {
-        includeSubTables: includeSubTables.value,
-        filename,
-      });
-    }
-    updateTaskRecord(record.id, {
-      status: 'success',
-      result: { count: 0 },
-    });
-    ElMessage.success('导出成功');
-    emit('export-success');
-  } catch (error: any) {
-    updateTaskRecord(record.id, {
-      status: 'failed',
-      error: error?.message || '导出失败',
-    });
-    ElMessage.error(error?.message || '导出失败');
-  } finally {
-    exportLoading.value = false;
-    exportProgress.value = 0;
-  }
-}
-
-// 上传导入文件
-async function handleUploadRequest(options: any) {
-  const { file } = options;
-  importLoading.value = true;
-  lastImportResult.value = null;
-  showErrorDetails.value = [];
-
-  const record = addTaskRecord('import', file.name);
-
-  try {
-    const result = await importFormDataExcelApi(
-      props.formCode,
-      file,
-      updateExisting.value,
-    );
-    lastImportResult.value = result;
-
-    updateTaskRecord(record.id, {
-      status: result.failed > 0 ? 'failed' : 'success',
-      result,
-    });
-
-    if (result.failed > 0) {
-      ElMessage.warning(
-        `导入完成：成功 ${result.success} 条，失败 ${result.failed} 条`,
-      );
-      showErrorDetails.value = ['errors'];
-    } else {
-      ElMessage.success(`成功导入 ${result.success} 条数据`);
-      emit('import-success', result);
-    }
-  } catch (error: any) {
-    updateTaskRecord(record.id, {
-      status: 'failed',
-      error: error?.message || '导入失败',
-    });
-    ElMessage.error(error?.message || '导入失败');
-  } finally {
-    importLoading.value = false;
-  }
-}
-
-// 重试任务
-function handleRetry(task: TaskRecord) {
-  if (task.type === 'export' && task.options) {
-    activeTab.value = 'export';
-    includeSubTables.value = task.options.includeSubTables ?? true;
-    useAsyncExport.value = true;
-    handleExport();
-  }
-}
-
-// 取消任务
-async function handleCancelTask(task: TaskRecord) {
-  if (task.type !== 'export' || task.status !== 'running') {
-    return;
-  }
-
-  try {
-    // 1. 停止前端轮询
-    const stopFn = activePollers.get(task.id);
-    if (stopFn) {
-      stopFn();
-      activePollers.delete(task.id);
-    }
-
-    // 2. 调用后端取消 API
-    await cancelExportTaskApi(props.formCode, task.id);
-
-    // 3. 更新任务状态为已取消
-    updateTaskRecord(task.id, { status: 'cancelled' });
-
-    // 4. 重置导出状态
-    exportLoading.value = false;
-    exportProgress.value = 0;
-
-    ElMessage.info('导出任务已取消');
-  } catch (error: any) {
-    ElMessage.error(error?.message || '取消失败');
-  }
-}
-
-// 清除历史
-function handleClearHistory() {
-  taskHistory.value = runningTasks.value;
-  ElMessage.success('历史记录已清除');
-}
-
-// 计算属性
-const runningTasks = computed(() =>
-  taskHistory.value.filter(
-    (t) => t.status === 'running' || t.status === 'pending',
-  ),
-);
-
-const completedTasks = computed(() =>
-  taskHistory.value.filter(
-    (t) => t.status !== 'running' && t.status !== 'pending',
-  ),
-);
-
-// 判断是否过期
-function isExpired(task: TaskRecord) {
-  if (task.status === 'success' && task.expiresAt) {
-    return new Date(task.expiresAt) < new Date();
-  }
-  return false;
-}
-
-// 格式化时间
-function formatTime(date: Date | string) {
-  const d = new Date(date);
-  return d.toLocaleTimeString('zh-CN', {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  });
-}
-
-// 获取状态标签类型
-function getStatusType(
-  status: string,
-): 'danger' | 'info' | 'success' | 'warning' {
-  const map: Record<string, 'danger' | 'info' | 'success' | 'warning'> = {
-    pending: 'info',
-    running: 'warning',
-    success: 'success',
-    failed: 'danger',
-    cancelled: 'info',
-  };
-  return map[status] || 'info';
-}
-
-// 获取状态文本
-function getStatusText(status: string) {
-  const map: Record<string, string> = {
-    pending: '等待中',
-    running: '进行中',
-    success: '成功',
-    failed: '失败',
-    cancelled: '已取消',
-  };
-  return map[status] || status;
-}
-</script>
-
-<template>
-  <ElPopover
-    v-model:visible="popoverVisible"
-    placement="bottom-end"
-    :width="420"
-    trigger="click"
-  >
-    <template #reference>
-      <ElButton circle :icon="FileSpreadsheet" title="导入导出" />
-    </template>
-
-    <div class="import-export-manager">
-      <ElTabs v-model="activeTab" class="!-mt-2">
-        <!-- 导入 Tab -->
-        <ElTabPane v-if="showImport" label="导入" name="import">
-          <div class="flex flex-col gap-4">
-            <!-- 下载模板 -->
-            <div
-              v-if="showTemplate"
-              class="flex items-center justify-between rounded-lg bg-[var(--el-fill-color-lighter)] p-3"
-            >
-              <div class="flex items-center gap-2">
-                <ArrowDownToLine
-                  class="h-4 w-4 text-[var(--el-color-primary)]"
-                />
-                <span class="text-sm">下载导入模板</span>
-              </div>
-              <ElButton
-                size="small"
-                type="primary"
-                link
-                @click="handleDownloadTemplate"
-              >
-                下载
-              </ElButton>
-            </div>
-
-            <!-- 上传区域 -->
-            <ElUpload
-              drag
-              action=""
-              :http-request="handleUploadRequest"
-              :show-file-list="false"
-              :disabled="importLoading"
-              accept=".xlsx,.xls"
-              class="!w-full"
-            >
-              <div
-                v-loading="importLoading"
-                element-loading-text="正在导入..."
-                class="flex flex-col items-center py-4"
-              >
-                <ElIcon
-                  class="mb-2 text-3xl text-[var(--el-text-color-secondary)]"
-                >
-                  <UploadFilled />
-                </ElIcon>
-                <div class="text-sm text-[var(--el-text-color-secondary)]">
-                  拖拽文件到此处，或
-                  <em class="not-italic text-[var(--el-color-primary)]">点击上传</em>
-                </div>
-                <div
-                  class="mt-1 text-xs text-[var(--el-text-color-placeholder)]"
-                >
-                  支持 .xlsx, .xls 格式
-                </div>
-              </div>
-            </ElUpload>
-
-            <!-- 选项 -->
-            <div class="flex items-center">
-              <ElCheckbox v-model="updateExisting" size="small">
-                更新已存在的数据（根据ID匹配）
-              </ElCheckbox>
-            </div>
-
-            <!-- 导入结果 -->
-            <div
-              v-if="lastImportResult"
-              class="rounded-lg border border-[var(--el-border-color-lighter)] p-3"
-            >
-              <div class="mb-2 flex items-center justify-between">
-                <span class="text-sm font-medium">导入结果</span>
-                <div class="flex items-center gap-3 text-sm">
-                  <span
-                    class="flex items-center gap-1 text-[var(--el-color-success)]"
-                  >
-                    <CheckCircle2 class="h-4 w-4" />
-                    {{ lastImportResult.success }}
-                  </span>
-                  <span
-                    v-if="lastImportResult.failed > 0"
-                    class="flex items-center gap-1 text-[var(--el-color-danger)]"
-                  >
-                    <XCircle class="h-4 w-4" />
-                    {{ lastImportResult.failed }}
-                  </span>
-                </div>
-              </div>
-
-              <!-- 错误详情 -->
-              <ElCollapse v-if="hasErrors" v-model="showErrorDetails">
-                <ElCollapseItem title="查看错误详情" name="errors">
-                  <ElScrollbar max-height="150px">
-                    <div class="space-y-1">
-                      <div
-                        v-for="(err, idx) in lastImportResult.errors"
-                        :key="idx"
-                        class="flex items-start gap-2 rounded bg-[var(--el-color-danger-light-9)] p-2 text-xs"
-                      >
-                        <AlertCircle
-                          class="mt-0.5 h-3 w-3 flex-shrink-0 text-[var(--el-color-danger)]"
-                        />
-                        <div>
-                          <span class="font-medium">第 {{ err.row }} 行</span>
-                          <span v-if="err.field">，字段 {{ err.field }}</span>
-                          <span>：{{ err.error }}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </ElScrollbar>
-                </ElCollapseItem>
-              </ElCollapse>
-            </div>
-          </div>
-        </ElTabPane>
-
-        <!-- 导出 Tab -->
-        <ElTabPane v-if="showExport" label="导出" name="export">
-          <div class="flex flex-col gap-4">
-            <div class="rounded-lg bg-[var(--el-fill-color-lighter)] p-4">
-              <div class="mb-3 flex items-center gap-2">
-                <Download class="h-4 w-4 text-[var(--el-color-primary)]" />
-                <span class="text-sm font-medium">导出数据</span>
-              </div>
-              <div class="mb-3 space-y-2">
-                <ElCheckbox v-model="includeSubTables" size="small">
-                  包含子表数据（多Sheet）
-                </ElCheckbox>
-                <ElCheckbox v-model="useAsyncExport" size="small">
-                  异步导出（推荐大数据量使用）
-                </ElCheckbox>
-              </div>
-              <!-- 导出进度条 -->
-              <div
-                v-if="
-                  exportLoading && useAsyncExport && runningTasks.length > 0
-                "
-                class="mb-3"
-              >
-                <div class="mb-1 flex justify-between text-xs">
-                  <span>导出进度</span>
-                  <span class="flex items-center gap-2">
-                    <span>{{ runningTasks[0]?.progress || 0 }}%</span>
-                    <span
-                      v-if="runningTasks[0]?.totalCount"
-                      class="text-[var(--el-text-color-secondary)]"
-                    >
-                      ({{ runningTasks[0]?.processedCount || 0 }}/{{
-                        runningTasks[0]?.totalCount
-                      }}
-                      条)
-                    </span>
-                  </span>
-                </div>
-                <div
-                  class="h-2 overflow-hidden rounded-full bg-[var(--el-fill-color)]"
-                >
-                  <div
-                    class="h-full rounded-full bg-[var(--el-color-primary)] transition-all duration-300"
-                    :style="{ width: `${runningTasks[0]?.progress || 0}%` }"
-                  ></div>
-                </div>
-              </div>
-              <ElButton
-                type="primary"
-                :loading="exportLoading"
-                :disabled="runningTasks.length > 0"
-                class="w-full"
-                @click="handleExport"
-              >
-                <template #icon>
-                  <ArrowUpFromLine class="h-4 w-4" />
-                </template>
-                {{
-                  exportLoading || runningTasks.length > 0
-                    ? '导出中...'
-                    : '导出 Excel'
-                }}
-              </ElButton>
-            </div>
-          </div>
-        </ElTabPane>
-
-        <!-- 进行中 Tab -->
-        <ElTabPane label="进行中" name="running">
-          <template #label>
-            <span class="flex items-center gap-1">
-              进行中
-              <ElTag
-                v-if="runningTasks.length > 0"
-                type="primary"
-                size="small"
-                round
-              >
-                {{ runningTasks.length }}
-              </ElTag>
-            </span>
-          </template>
-          <div
-            v-if="runningTasks.length === 0"
-            class="py-8 text-center text-sm text-[var(--el-text-color-placeholder)]"
-          >
-            暂无进行中的任务
-          </div>
-          <ElScrollbar v-else max-height="250px">
-            <div class="space-y-2">
-              <div
-                v-for="task in runningTasks"
-                :key="task.id"
-                class="flex items-center justify-between rounded-lg border border-[var(--el-border-color-lighter)] p-3"
-              >
-                <div class="flex items-center gap-3">
-                  <div
-                    class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--el-color-primary-light-9)]"
-                  >
-                    <Loader
-                      class="h-4 w-4 animate-spin text-[var(--el-color-primary)]"
-                    />
-                  </div>
-                  <div>
-                    <div class="text-sm font-medium">{{ task.filename }}</div>
-                    <div
-                      class="text-xs text-[var(--el-text-color-placeholder)]"
-                    >
-                      开始于 {{ formatTime(task.startTime) }}
-                    </div>
-                  </div>
-                </div>
-                <div class="flex items-center gap-3">
-                  <div class="flex flex-col items-end gap-1">
-                    <div class="flex items-center gap-2 text-xs">
-                      <span class="text-[var(--el-color-primary)]">
-                        {{ task.progress || 0 }}%
-                      </span>
-                      <span
-                        v-if="task.totalCount"
-                        class="text-[var(--el-text-color-secondary)]"
-                      >
-                        {{ task.processedCount || 0 }}/{{ task.totalCount }}
-                      </span>
-                    </div>
-                    <div
-                      class="h-1.5 w-24 overflow-hidden rounded-full bg-[var(--el-fill-color)]"
-                    >
-                      <div
-                        class="h-full rounded-full bg-[var(--el-color-primary)] transition-all duration-300"
-                        :style="{ width: `${task.progress || 0}%` }"
-                      ></div>
-                    </div>
-                  </div>
-                  <ElPopconfirm
-                    title="确定要取消此导出任务吗？"
-                    confirm-button-text="确定"
-                    cancel-button-text="取消"
-                    @confirm="handleCancelTask(task)"
-                  >
-                    <template #reference>
-                      <ElButton
-                        type="danger"
-                        size="small"
-                        circle
-                        title="取消导出"
-                      >
-                        <Square class="h-3 w-3" />
-                      </ElButton>
-                    </template>
-                  </ElPopconfirm>
-                </div>
-              </div>
-            </div>
-          </ElScrollbar>
-        </ElTabPane>
-
-        <!-- 历史记录 Tab -->
-        <ElTabPane label="历史" name="history">
-          <div class="mb-2 flex justify-end">
-            <ElButton
-              v-if="completedTasks.length > 0"
-              type="danger"
-              link
-              size="small"
-              @click="handleClearHistory"
-            >
-              <template #icon>
-                <Trash2 class="h-3 w-3" />
-              </template>
-              清除历史
-            </ElButton>
-          </div>
-          <div
-            v-if="completedTasks.length === 0"
-            class="py-8 text-center text-sm text-[var(--el-text-color-placeholder)]"
-          >
-            暂无历史记录
-          </div>
-          <ElScrollbar v-else max-height="250px">
-            <div class="space-y-2">
-              <div
-                v-for="task in completedTasks"
-                :key="task.id"
-                class="flex items-center justify-between rounded-lg border border-[var(--el-border-color-lighter)] p-3"
-              >
-                <div class="flex items-center gap-3">
-                  <div
-                    class="flex h-8 w-8 items-center justify-center rounded-full"
-                    :class="
-                      task.type === 'import'
-                        ? 'bg-[var(--el-color-success-light-9)]'
-                        : 'bg-[var(--el-color-primary-light-9)]'
-                    "
-                  >
-                    <Upload
-                      v-if="task.type === 'import'"
-                      class="h-4 w-4 text-[var(--el-color-success)]"
-                    />
-                    <Download
-                      v-else
-                      class="h-4 w-4 text-[var(--el-color-primary)]"
-                    />
-                  </div>
-                  <div>
-                    <div class="flex items-center gap-2">
-                      <div class="text-sm font-medium">{{ task.filename }}</div>
-                      <ElTag
-                        v-if="isExpired(task)"
-                        type="info"
-                        size="small"
-                        effect="plain"
-                      >
-                        已过期
-                      </ElTag>
-                    </div>
-                    <div
-                      class="text-xs text-[var(--el-text-color-placeholder)]"
-                    >
-                      {{ formatTime(task.endTime || task.startTime) }}
-                    </div>
-                  </div>
-                </div>
-                <div class="flex items-center gap-2">
-                  <ElButton
-                    v-if="task.status === 'failed' && task.type === 'export'"
-                    type="primary"
-                    link
-                    size="small"
-                    @click="handleRetry(task)"
-                  >
-                    <template #icon>
-                      <RefreshCw class="h-3 w-3" />
-                    </template>
-                    重试
-                  </ElButton>
-                  <ElTag :type="getStatusType(task.status)" size="small">
-                    {{ getStatusText(task.status) }}
-                  </ElTag>
-                </div>
-              </div>
-            </div>
-          </ElScrollbar>
-        </ElTabPane>
-      </ElTabs>
-    </div>
-  </ElPopover>
-</template>
-
-<style scoped>
-.import-export-manager :deep(.el-tabs__header) {
-  margin-bottom: 12px;
-}
-
-.import-export-manager :deep(.el-upload-dragger) {
-  padding: 0;
-  border-color: var(--el-border-color);
-}
-
-.import-export-manager :deep(.el-upload-dragger:hover) {
-  border-color: var(--el-color-primary);
-}
-
-.import-export-manager :deep(.el-collapse-item__header) {
-  height: 32px;
-  font-size: 12px;
-  line-height: 32px;
-  color: var(--el-color-danger);
-}
-
-.import-export-manager :deep(.el-collapse-item__content) {
-  padding-bottom: 0;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/import-export-manager/index.ts b/web/apps/web-ele/src/components/import-export-manager/index.ts
deleted file mode 100644
index 0696f3b..0000000
--- a/web/apps/web-ele/src/components/import-export-manager/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as ImportExportManager } from './import-export-manager.vue';
-export * from './types';
diff --git a/web/apps/web-ele/src/components/import-export-manager/types.ts b/web/apps/web-ele/src/components/import-export-manager/types.ts
deleted file mode 100644
index 885f8e5..0000000
--- a/web/apps/web-ele/src/components/import-export-manager/types.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/** 导入结果 */
-export interface ImportResult {
-  success: number;
-  failed: number;
-  errors: ImportError[];
-  warnings?: string[];
-}
-
-/** 导入错误详情 */
-export interface ImportError {
-  row: number;
-  field: null | string;
-  error: string;
-  type: 'header' | 'option' | 'required' | 'system' | 'type';
-}
-
-/** 导出选项 */
-export interface ExportOptions {
-  ids?: string[];
-  includeSubTables?: boolean;
-  filename?: string;
-}
-
-/** 任务状态 */
-export type TaskStatus =
-  | 'cancelled'
-  | 'failed'
-  | 'pending'
-  | 'running'
-  | 'success';
-
-/** 任务记录 */
-export interface TaskRecord {
-  id: string;
-  type: 'export' | 'import';
-  filename: string;
-  status: TaskStatus;
-  startTime: Date;
-  endTime?: Date;
-  progress?: number;
-  totalCount?: number; // 总条数
-  processedCount?: number; // 已处理条数
-  result?: ImportResult | { count: number };
-  error?: string;
-  expiresAt?: string; // 任务过期时间
-  options?: ExportOptions; // 导出选项，用于重试
-}
-
-/** 组件 Props */
-export interface ImportExportManagerProps {
-  /** 表单编码 */
-  formCode: string;
-  /** 表单名称 */
-  formName?: string;
-  /** 是否显示导入功能 */
-  showImport?: boolean;
-  /** 是否显示导出功能 */
-  showExport?: boolean;
-  /** 是否显示下载模板 */
-  showTemplate?: boolean;
-}
-
-/** 组件 Emits */
-export interface ImportExportManagerEmits {
-  (e: 'import-success', result: ImportResult): void;
-  (e: 'export-success'): void;
-}
diff --git a/web/apps/web-ele/src/components/wiki/CreateWikiDialog.vue b/web/apps/web-ele/src/components/wiki/CreateWikiDialog.vue
deleted file mode 100644
index d253f87..0000000
--- a/web/apps/web-ele/src/components/wiki/CreateWikiDialog.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { useI18n } from '@vben/locales'
-import {
-  ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElMessage,
-} from 'element-plus'
-import { ZqDialog } from '#/components/zq-dialog'
-import { useWikiStore } from '#/store/wiki'
-import ImageSelector from '#/components/zq-form/image-selector/image-selector.vue'
-
-const props = defineProps<{ modelValue: boolean }>()
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  created: [spaceId: string]
-}>()
-
-const { t } = useI18n()
-const wikiStore = useWikiStore()
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: (v) => emit('update:modelValue', v),
-})
-
-const saving = ref(false)
-const form = ref({
-  name: '',
-  description: '',
-  category: 'default',
-  visibility: 'private',
-  avatar: undefined as string | undefined,
-})
-
-const categories = computed(() => [
-  { value: 'default', label: t('wiki.categoryDefault') },
-  { value: 'tech', label: t('wiki.categoryTech') },
-  { value: 'product', label: t('wiki.categoryProduct') },
-  { value: 'design', label: t('wiki.categoryDesign') },
-  { value: 'business', label: t('wiki.categoryBusiness') },
-  { value: 'other', label: t('wiki.categoryOther') },
-])
-
-const visibilityOptions = computed(() => [
-  { value: 'private', label: t('wiki.private') },
-  { value: 'team', label: t('wiki.team') },
-  { value: 'public', label: t('wiki.public') },
-])
-
-watch(() => props.modelValue, (v) => {
-  if (v) {
-    form.value = { name: '', description: '', category: 'default', visibility: 'private', avatar: undefined }
-  }
-})
-
-async function handleCreate() {
-  const name = form.value.name.trim()
-  if (!name) {
-    ElMessage.warning(t('wiki.spaceNamePlaceholder'))
-    return
-  }
-  saving.value = true
-  try {
-    const id = await wikiStore.createSpace({
-      name,
-      description: form.value.description.trim() || undefined,
-      category: form.value.category,
-      visibility: form.value.visibility,
-      avatar: form.value.avatar || undefined,
-    })
-    if (id) {
-      visible.value = false
-      emit('created', id)
-    }
-  } catch {
-    ElMessage.error('Failed')
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<template>
-  <ZqDialog
-    v-model="visible"
-    :title="t('wiki.createSpace')"
-    width="480px"
-    :confirm-loading="saving"
-    @confirm="handleCreate"
-  >
-    <ElForm label-position="top">
-      <ElFormItem :label="t('wiki.avatar')">
-        <ImageSelector
-          v-model="form.avatar"
-          :size="72"
-          enable-crop
-          :crop-aspect-ratio="1"
-          crop-shape="circle"
-          source="wiki"
-        />
-      </ElFormItem>
-      <ElFormItem :label="t('wiki.spaceName')" required>
-        <ElInput
-          v-model="form.name"
-          :placeholder="t('wiki.spaceNamePlaceholder')"
-          maxlength="200"
-          show-word-limit
-          @keyup.enter="handleCreate"
-        />
-      </ElFormItem>
-      <ElFormItem :label="t('wiki.spaceDescription')">
-        <ElInput
-          v-model="form.description"
-          type="textarea"
-          :rows="3"
-          :placeholder="t('wiki.spaceDescriptionPlaceholder')"
-          maxlength="500"
-        />
-      </ElFormItem>
-      <ElFormItem :label="t('wiki.category')">
-        <ElSelect v-model="form.category" class="w-full">
-          <ElOption
-            v-for="c in categories"
-            :key="c.value"
-            :label="c.label"
-            :value="c.value"
-          />
-        </ElSelect>
-      </ElFormItem>
-      <ElFormItem :label="t('wiki.visibility')">
-        <ElSelect v-model="form.visibility" class="w-full">
-          <ElOption
-            v-for="v in visibilityOptions"
-            :key="v.value"
-            :label="v.label"
-            :value="v.value"
-          />
-        </ElSelect>
-      </ElFormItem>
-    </ElForm>
-  </ZqDialog>
-</template>
diff --git a/web/apps/web-ele/src/components/wiki/EditWikiDialog.vue b/web/apps/web-ele/src/components/wiki/EditWikiDialog.vue
deleted file mode 100644
index c21eab2..0000000
--- a/web/apps/web-ele/src/components/wiki/EditWikiDialog.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { useI18n } from '@vben/locales'
-import {
-  ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElMessage,
-} from 'element-plus'
-import { ZqDialog } from '#/components/zq-dialog'
-import { useWikiStore } from '#/store/wiki'
-import type { WikiSpace } from '#/types/zq-smart-table/table'
-import ImageSelector from '#/components/zq-form/image-selector/image-selector.vue'
-
-const props = defineProps<{
-  modelValue: boolean
-  space: WikiSpace | null
-}>()
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  updated: [spaceId: string]
-}>()
-
-const { t } = useI18n()
-const wikiStore = useWikiStore()
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: (v) => emit('update:modelValue', v),
-})
-
-const saving = ref(false)
-const form = ref({
-  name: '',
-  description: '',
-  category: 'default',
-  visibility: 'private',
-  avatar: undefined as string | undefined,
-})
-
-const categories = computed(() => [
-  { value: 'default', label: t('wiki.categoryDefault') },
-  { value: 'tech', label: t('wiki.categoryTech') },
-  { value: 'product', label: t('wiki.categoryProduct') },
-  { value: 'design', label: t('wiki.categoryDesign') },
-  { value: 'business', label: t('wiki.categoryBusiness') },
-  { value: 'other', label: t('wiki.categoryOther') },
-])
-
-const visibilityOptions = computed(() => [
-  { value: 'private', label: t('wiki.private') },
-  { value: 'team', label: t('wiki.team') },
-  { value: 'public', label: t('wiki.public') },
-])
-
-watch(() => props.modelValue, (v) => {
-  if (v && props.space) {
-    form.value = {
-      name: props.space.name,
-      description: props.space.description || '',
-      category: props.space.category || 'default',
-      visibility: props.space.visibility || 'private',
-      avatar: props.space.avatar || undefined,
-    }
-  }
-})
-
-async function handleSave() {
-  if (!props.space) return
-  const name = form.value.name.trim()
-  if (!name) {
-    ElMessage.warning(t('wiki.spaceNamePlaceholder'))
-    return
-  }
-  saving.value = true
-  try {
-    await wikiStore.updateSpace(props.space.id, {
-      name,
-      description: form.value.description.trim() || null,
-      category: form.value.category,
-      visibility: form.value.visibility,
-      avatar: form.value.avatar || null,
-    })
-    ElMessage.success(t('wiki.editSpaceSuccess'))
-    visible.value = false
-    emit('updated', props.space.id)
-  } catch {
-    ElMessage.error('Failed')
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<template>
-  <ZqDialog
-    v-model="visible"
-    :title="t('wiki.editSpace')"
-    width="480px"
-    :confirm-loading="saving"
-    @confirm="handleSave"
-  >
-    <ElForm label-position="top">
-      <ElFormItem :label="t('wiki.avatar')">
-        <ImageSelector
-          v-model="form.avatar"
-          :size="72"
-          enable-crop
-          :crop-aspect-ratio="1"
-          crop-shape="circle"
-          source="wiki"
-        />
-      </ElFormItem>
-      <ElFormItem :label="t('wiki.spaceName')" required>
-        <ElInput
-          v-model="form.name"
-          :placeholder="t('wiki.spaceNamePlaceholder')"
-          maxlength="200"
-          show-word-limit
-          @keyup.enter="handleSave"
-        />
-      </ElFormItem>
-      <ElFormItem :label="t('wiki.spaceDescription')">
-        <ElInput
-          v-model="form.description"
-          type="textarea"
-          :rows="3"
-          :placeholder="t('wiki.spaceDescriptionPlaceholder')"
-          maxlength="500"
-        />
-      </ElFormItem>
-      <ElFormItem :label="t('wiki.category')">
-        <ElSelect v-model="form.category" class="w-full">
-          <ElOption
-            v-for="c in categories"
-            :key="c.value"
-            :label="c.label"
-            :value="c.value"
-          />
-        </ElSelect>
-      </ElFormItem>
-      <ElFormItem :label="t('wiki.visibility')">
-        <ElSelect v-model="form.visibility" class="w-full">
-          <ElOption
-            v-for="v in visibilityOptions"
-            :key="v.value"
-            :label="v.label"
-            :value="v.value"
-          />
-        </ElSelect>
-      </ElFormItem>
-    </ElForm>
-  </ZqDialog>
-</template>
diff --git a/web/apps/web-ele/src/components/wiki/WikiHomeSidebar.vue b/web/apps/web-ele/src/components/wiki/WikiHomeSidebar.vue
deleted file mode 100644
index efd17de..0000000
--- a/web/apps/web-ele/src/components/wiki/WikiHomeSidebar.vue
+++ /dev/null
@@ -1,903 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, nextTick, watch } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { SmartItemType, type Table } from '#/types/zq-smart-table/table'
-import { useI18n } from '@vben/locales'
-import { useRouter, useRoute } from 'vue-router'
-import {
-  Grid,
-  FileText,
-  Search,
-  ChevronDown,
-  ChevronRight,
-  Ellipsis,
-  Pencil,
-  Trash2,
-  FilePlus2,
-  BookOpen,
-} from '@vben/icons'
-import { ElMessageBox } from 'element-plus'
-
-type TreeNode = Table & { children: TreeNode[] }
-interface FlatNode {
-  id: string
-  name: string
-  type: SmartItemType
-  depth: number
-  hasChildren: boolean
-  parentId: string | null | undefined
-}
-
-const emit = defineEmits<{
-  selectSpace: [spaceId: string]
-  selectDoc: [tableId: string]
-  showSpaces: []
-}>()
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-const router = useRouter()
-const route = useRoute()
-
-const SIDEBAR_DEFAULT = 256
-const SIDEBAR_MIN = 200
-const SIDEBAR_MAX = 480
-
-const sidebarWidth = ref(SIDEBAR_DEFAULT)
-const isResizing = ref(false)
-const searchText = ref('')
-
-function onResizeStart(e: MouseEvent) {
-  e.preventDefault()
-  isResizing.value = true
-  const startX = e.clientX
-  const startW = sidebarWidth.value
-
-  function onMove(ev: MouseEvent) {
-    const newW = startW + (ev.clientX - startX)
-    sidebarWidth.value = Math.max(SIDEBAR_MIN, Math.min(SIDEBAR_MAX, newW))
-  }
-
-  function onUp() {
-    isResizing.value = false
-    document.removeEventListener('mousemove', onMove)
-    document.removeEventListener('mouseup', onUp)
-  }
-
-  document.addEventListener('mousemove', onMove)
-  document.addEventListener('mouseup', onUp)
-}
-
-function onResizeDblClick() {
-  sidebarWidth.value = SIDEBAR_DEFAULT
-}
-
-// Active state
-const activeView = computed(() => {
-  const tableId = route.params.tableId as string | undefined
-  if (tableId) return { type: 'doc' as const, id: tableId }
-  return { type: 'spaces' as const, id: null }
-})
-
-// ==================== My Documents Tree ====================
-const expandedIds = ref<Set<string>>(new Set())
-
-function toggleExpand(id: string) {
-  const s = new Set(expandedIds.value)
-  if (s.has(id)) s.delete(id)
-  else s.add(id)
-  expandedIds.value = s
-}
-
-function buildTree(items: Table[]): TreeNode[] {
-  const map = new Map<string, TreeNode>()
-  const roots: TreeNode[] = []
-  for (const item of items) {
-    map.set(item.id, { ...item, children: [] })
-  }
-  for (const node of map.values()) {
-    const pid = node.parentId
-    if (pid && map.has(pid)) {
-      map.get(pid)!.children.push(node)
-    } else {
-      roots.push(node)
-    }
-  }
-  return roots
-}
-
-function filterTree(nodes: TreeNode[], q: string): TreeNode[] {
-  if (!q) return nodes
-  const result: TreeNode[] = []
-  for (const node of nodes) {
-    const childMatch = filterTree(node.children, q)
-    if (node.name.toLowerCase().includes(q) || childMatch.length > 0) {
-      result.push({ ...node, children: childMatch })
-    }
-  }
-  return result
-}
-
-function flattenTree(nodes: TreeNode[], depth = 0): FlatNode[] {
-  const result: FlatNode[] = []
-  for (const node of nodes) {
-    result.push({
-      id: node.id,
-      name: node.name,
-      type: node.type,
-      depth,
-      hasChildren: node.children.length > 0,
-      parentId: node.parentId,
-    })
-    if (node.children.length > 0 && expandedIds.value.has(node.id)) {
-      result.push(...flattenTree(node.children, depth + 1))
-    }
-  }
-  return result
-}
-
-const tree = computed(() => buildTree(tableStore.tables))
-const filteredTree = computed(() => {
-  const q = searchText.value.trim().toLowerCase()
-  return filterTree(tree.value, q)
-})
-const flatList = computed(() => flattenTree(filteredTree.value))
-const hasSearchResults = computed(() => flatList.value.length > 0)
-
-watch(() => tableStore.tables, () => {
-  if (expandedIds.value.size === 0 && tableStore.tables.length > 0) {
-    const ids = new Set<string>()
-    function walk(nodes: TreeNode[]) {
-      for (const n of nodes) {
-        if (n.children.length > 0) {
-          ids.add(n.id)
-          walk(n.children)
-        }
-      }
-    }
-    walk(tree.value as TreeNode[])
-    expandedIds.value = ids
-  }
-}, { immediate: true })
-
-// Drag state
-const dragId = ref<string | null>(null)
-const dropTargetId = ref<string | null>(null)
-const dropPosition = ref<'inside' | 'before' | 'after' | null>(null)
-
-function onDragStart(e: DragEvent, id: string) {
-  dragId.value = id
-  if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', id)
-  }
-}
-
-function onDragOver(e: DragEvent, id: string) {
-  e.preventDefault()
-  if (dragId.value === id) return
-  dropTargetId.value = id
-  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-  const y = e.clientY - rect.top
-  const h = rect.height
-  if (y < h * 0.25) dropPosition.value = 'before'
-  else if (y > h * 0.75) dropPosition.value = 'after'
-  else dropPosition.value = 'inside'
-}
-
-function onDragLeave() {
-  dropTargetId.value = null
-  dropPosition.value = null
-}
-
-function onDrop(e: DragEvent) {
-  e.preventDefault()
-  if (!dragId.value || !dropTargetId.value || dragId.value === dropTargetId.value) {
-    resetDrag()
-    return
-  }
-  const targetItem = tableStore.tables.find(t => t.id === dropTargetId.value)
-  if (!targetItem) { resetDrag(); return }
-  const draggedId = dragId.value
-  if (dropPosition.value === 'inside') {
-    const children = tableStore.tables.filter(
-      (t) => (t.parentId ?? null) === dropTargetId.value && t.id !== draggedId,
-    )
-    const lastChild = children.length > 0 ? children[children.length - 1] : null
-    tableStore.moveTable(draggedId, dropTargetId.value, lastChild?.id ?? null)
-    expandedIds.value = new Set([...expandedIds.value, dropTargetId.value])
-  } else {
-    const newParentId = targetItem.parentId ?? null
-    const siblings = tableStore.tables.filter(
-      (t) => (t.parentId ?? null) === newParentId && t.id !== draggedId,
-    )
-    const targetIdx = siblings.findIndex((s) => s.id === dropTargetId.value)
-    let afterId: string | null = null
-    if (dropPosition.value === 'before') {
-      afterId = targetIdx > 0 ? (siblings[targetIdx - 1]?.id ?? null) : null
-    } else {
-      afterId = dropTargetId.value
-    }
-    tableStore.moveTable(draggedId, newParentId, afterId)
-  }
-  resetDrag()
-}
-
-function resetDrag() {
-  dragId.value = null
-  dropTargetId.value = null
-  dropPosition.value = null
-}
-
-function getItemDropClass(nodeId: string) {
-  if (dropTargetId.value !== nodeId) return ''
-  if (dropPosition.value === 'inside') return 'drop-inside'
-  if (dropPosition.value === 'before') return 'drop-before'
-  if (dropPosition.value === 'after') return 'drop-after'
-  return ''
-}
-
-// Rename
-const renamingId = ref<string | null>(null)
-const renameValue = ref('')
-const renameInputEl = ref<HTMLInputElement | null>(null)
-function setRenameRef(el: any) { renameInputEl.value = el }
-
-function startRename(tableId: string, currentName: string) {
-  renamingId.value = tableId
-  renameValue.value = currentName
-  nextTick(() => {
-    renameInputEl.value?.focus()
-    renameInputEl.value?.select()
-  })
-}
-
-async function confirmRename(tableId: string) {
-  if (renameValue.value.trim()) {
-    const table = tableStore.tables.find((item) => item.id === tableId)
-    if (table) {
-      table.name = renameValue.value.trim()
-      const { updateTableApi } = await import('#/api/smart-table')
-      updateTableApi(tableId, { name: table.name }).catch(() => {})
-    }
-  }
-  renamingId.value = null
-}
-
-function handleDeleteTable(tableId: string, tableName: string) {
-  ElMessageBox.confirm(
-    t('sidebar.deleteTableConfirm', { name: tableName }),
-    t('sidebar.deleteTable'),
-    {
-      confirmButtonText: t('common.confirm'),
-      cancelButtonText: t('common.cancel'),
-      type: 'warning',
-    },
-  ).then(async () => {
-    await tableStore.deleteTable(tableId)
-    if (activeView.value.type === 'doc' && activeView.value.id === tableId) {
-      router.push('/wiki')
-    }
-  }).catch(() => {})
-}
-
-function handleContextCommand(command: string, tableId: string, tableName: string) {
-  if (command === 'rename') startRename(tableId, tableName)
-  else if (command === 'delete') handleDeleteTable(tableId, tableName)
-  else if (command === 'addSubPage') handleAddSubPage(tableId)
-}
-
-// Actions
-async function handleAddDocument() {
-  const name = t('document.untitled')
-  const newId = await tableStore.addDocument(name)
-  if (newId) {
-    await tableStore.loadTableFull(newId)
-    router.push(`/wiki/doc/${newId}`)
-    emit('selectDoc', newId)
-  }
-}
-
-async function handleAddSubPage(parentId: string) {
-  const name = t('document.untitled')
-  const newId = await tableStore.addSubPage(parentId, name)
-  if (newId) {
-    expandedIds.value = new Set([...expandedIds.value, parentId])
-    await tableStore.loadTableFull(newId)
-    router.push(`/wiki/doc/${newId}`)
-    emit('selectDoc', newId)
-  }
-}
-
-function handleSelectDoc(tableId: string) {
-  if (renamingId.value === tableId) return
-  tableStore.activeTableId = tableId
-  router.push(`/wiki/doc/${tableId}`)
-  emit('selectDoc', tableId)
-}
-
-function handleShowSpaces() {
-  router.push('/wiki')
-  emit('showSpaces')
-}
-
-function getNodeIcon(type: SmartItemType) {
-  return type === SmartItemType.Document ? FileText : Grid
-}
-</script>
-
-<template>
-  <div
-    class="zq-sidebar"
-    :class="{ 'is-resizing': isResizing }"
-    :style="{ width: `${sidebarWidth}px` }"
-  >
-    <div class="zq-sidebar__inner" :style="{ width: `${sidebarWidth}px` }">
-      <!-- Header -->
-      <div class="zq-sidebar__header">
-        <div class="zq-sidebar__brand">
-          <div class="zq-sidebar__logo">
-            <BookOpen class="w-4 h-4" />
-          </div>
-          <span class="zq-sidebar__brand-title">{{ t('wiki.title') }}</span>
-        </div>
-      </div>
-
-      <!-- Search -->
-      <div class="zq-sidebar__search">
-        <Search class="zq-sidebar__search-icon" />
-        <input
-          v-model="searchText"
-          class="zq-sidebar__search-input"
-          :placeholder="t('wiki.searchDocPlaceholder')"
-        />
-      </div>
-
-      <!-- Scrollable content -->
-      <div class="zq-sidebar__content">
-        <!-- Wiki Spaces entry -->
-        <div class="zq-sidebar__section">
-          <div
-            class="zq-sidebar__section-header"
-            :class="{ 'is-active': activeView.type === 'spaces' }"
-            @click="handleShowSpaces"
-          >
-            <BookOpen class="zq-sidebar__section-icon" />
-            <span class="zq-sidebar__section-title">{{ t('wiki.wikiSpaces') }}</span>
-          </div>
-        </div>
-
-        <!-- Divider -->
-        <div class="zq-sidebar__divider" />
-
-        <!-- My Documents Section -->
-        <div class="zq-sidebar__section">
-          <div class="zq-sidebar__section-header zq-sidebar__section-header--docs">
-            <FileText class="zq-sidebar__section-icon" />
-            <span class="zq-sidebar__section-title">{{ t('wiki.myDocuments') }}</span>
-          </div>
-
-          <!-- Document tree -->
-          <template v-if="flatList.length > 0">
-            <div
-              v-for="node in flatList"
-              :key="node.id"
-              class="zq-sidebar__item"
-              :style="{ '--depth': node.depth }"
-              :class="[
-                {
-                  'is-active': activeView.type === 'doc' && activeView.id === node.id,
-                  'is-dragging': dragId === node.id,
-                },
-                getItemDropClass(node.id),
-              ]"
-              draggable="true"
-              @dragstart="onDragStart($event, node.id)"
-              @dragover="onDragOver($event, node.id)"
-              @dragleave="onDragLeave"
-              @drop="onDrop($event)"
-              @dragend="resetDrag"
-              @click="handleSelectDoc(node.id)"
-            >
-              <button
-                v-if="node.hasChildren"
-                class="zq-sidebar__expand-toggle"
-                @click.stop="toggleExpand(node.id)"
-              >
-                <component
-                  :is="expandedIds.has(node.id) ? ChevronDown : ChevronRight"
-                  class="w-3.5 h-3.5"
-                />
-              </button>
-              <span v-else class="zq-sidebar__expand-spacer" />
-
-              <component :is="getNodeIcon(node.type)" class="zq-sidebar__item-icon" />
-
-              <input
-                v-if="renamingId === node.id"
-                :ref="setRenameRef"
-                v-model="renameValue"
-                class="zq-sidebar__rename-input"
-                @blur="confirmRename(node.id)"
-                @keyup.enter="confirmRename(node.id)"
-                @keyup.escape="renamingId = null"
-                @click.stop
-              />
-              <span v-else class="zq-sidebar__item-name">{{ node.name }}</span>
-
-              <el-dropdown
-                v-if="renamingId !== node.id"
-                trigger="click"
-                class="zq-sidebar__item-actions"
-                @command="(cmd: string) => handleContextCommand(cmd, node.id, node.name)"
-              >
-                <button class="zq-sidebar__more-btn" @click.stop>
-                  <Ellipsis class="w-3.5 h-3.5" />
-                </button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item command="addSubPage">
-                      <div class="flex items-center gap-2">
-                        <FilePlus2 class="w-3.5 h-3.5" />
-                        <span>{{ t('sidebar.newSubPage') }}</span>
-                      </div>
-                    </el-dropdown-item>
-                    <el-dropdown-item command="rename">
-                      <div class="flex items-center gap-2">
-                        <Pencil class="w-3.5 h-3.5" />
-                        <span>{{ t('common.rename') }}</span>
-                      </div>
-                    </el-dropdown-item>
-                    <el-dropdown-item command="delete" divided>
-                      <div class="flex items-center gap-2" style="color: var(--zq-danger-color)">
-                        <Trash2 class="w-3.5 h-3.5" />
-                        <span>{{ t('common.delete') }}</span>
-                      </div>
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </div>
-          </template>
-
-          <!-- Empty my docs -->
-          <div v-if="!searchText && flatList.length === 0 && !tableStore.loading" class="zq-sidebar__empty">
-            {{ t('wiki.emptyMyDocs') }}
-          </div>
-
-          <!-- Search no results -->
-          <div v-if="searchText && !hasSearchResults" class="zq-sidebar__no-results">
-            <Search class="w-6 h-6" style="color: var(--zq-text-placeholder)" />
-            <span>{{ t('wiki.noResults') }}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Bottom actions -->
-      <div class="zq-sidebar__footer">
-        <button class="zq-sidebar__footer-btn" @click="handleAddDocument">
-          <FilePlus2 class="w-4 h-4" />
-          <span>{{ t('sidebar.newDocument') }}</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Resize handle -->
-    <div
-      class="zq-sidebar__resize-handle"
-      @mousedown="onResizeStart"
-      @dblclick="onResizeDblClick"
-    />
-
-  </div>
-</template>
-
-<style scoped>
-.zq-sidebar {
-  position: relative;
-  flex-shrink: 0;
-  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: visible;
-  z-index: 20;
-}
-
-.zq-sidebar.is-resizing {
-  transition: none;
-}
-
-.zq-sidebar__inner {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--zq-bg-sidebar);
-  border-right: 1px solid var(--zq-border-color-light);
-}
-
-/* Resize handle */
-.zq-sidebar__resize-handle {
-  position: absolute;
-  top: 0;
-  right: -3px;
-  width: 3px;
-  height: 100%;
-  cursor: col-resize;
-  z-index: 30;
-  transition: background-color 0.15s;
-}
-
-.zq-sidebar__resize-handle:hover,
-.zq-sidebar.is-resizing .zq-sidebar__resize-handle {
-  background-color: var(--zq-brand-color);
-}
-
-/* Header */
-.zq-sidebar__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 12px 8px;
-  flex-shrink: 0;
-}
-
-.zq-sidebar__brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.zq-sidebar__logo {
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  background: var(--zq-brand-color);
-  flex-shrink: 0;
-}
-
-.zq-sidebar__brand-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--zq-text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Search */
-.zq-sidebar__search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 4px 12px 8px;
-  padding: 7px 10px;
-  border-radius: 8px;
-  background: var(--zq-bg-primary);
-  border: 1px solid transparent;
-  transition: all 0.15s;
-}
-
-.zq-sidebar__search:focus-within {
-  border-color: var(--zq-brand-color);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--zq-brand-color) 15%, transparent);
-}
-
-.zq-sidebar__search-icon {
-  width: 14px;
-  height: 14px;
-  color: var(--zq-text-placeholder);
-  flex-shrink: 0;
-}
-
-.zq-sidebar__search-input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: 13px;
-  color: var(--zq-text-primary);
-  line-height: 1;
-}
-
-.zq-sidebar__search-input::placeholder {
-  color: var(--zq-text-placeholder);
-}
-
-/* Scrollable content */
-.zq-sidebar__content {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 4px 0 16px;
-}
-
-.zq-sidebar__content::-webkit-scrollbar {
-  width: 4px;
-}
-
-.zq-sidebar__content::-webkit-scrollbar-thumb {
-  background: var(--zq-border-color);
-  border-radius: 4px;
-}
-
-.zq-sidebar__content::-webkit-scrollbar-thumb:hover {
-  background: var(--zq-text-placeholder);
-}
-
-/* Section */
-.zq-sidebar__section {
-  padding: 0 8px;
-}
-
-.zq-sidebar__section-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  margin: 2px 0;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--zq-text-secondary);
-  transition: all 0.15s;
-}
-
-.zq-sidebar__section-header:hover {
-  background: var(--zq-bg-cell-hover);
-  color: var(--zq-text-primary);
-}
-
-.zq-sidebar__section-header.is-active {
-  background: var(--zq-brand-color-light);
-  color: var(--zq-brand-color);
-}
-
-.zq-sidebar__section-header--docs {
-  cursor: default;
-}
-
-.zq-sidebar__section-header--docs:hover {
-  background: transparent;
-  color: var(--zq-text-secondary);
-}
-
-.zq-sidebar__section-icon {
-  width: 15px;
-  height: 15px;
-  flex-shrink: 0;
-}
-
-.zq-sidebar__section-title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.zq-sidebar__section-add {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-placeholder);
-  cursor: pointer;
-  transition: all 0.15s;
-  flex-shrink: 0;
-}
-
-.zq-sidebar__section-add:hover {
-  background: var(--zq-bg-cell-hover);
-  color: var(--zq-brand-color);
-}
-
-
-/* Divider */
-.zq-sidebar__divider {
-  height: 1px;
-  margin: 6px 12px;
-  background: var(--zq-border-color-light);
-}
-
-/* Tree items (same as ZqTableSidebar) */
-.zq-sidebar__item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 5px 8px 5px calc(8px + var(--depth, 0) * 16px);
-  margin: 1px 0;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--zq-text-primary);
-  transition: background-color 0.15s, color 0.15s;
-  position: relative;
-  user-select: none;
-}
-
-.zq-sidebar__item:hover {
-  background: var(--zq-bg-cell-hover);
-}
-
-.zq-sidebar__item.is-active {
-  background: var(--zq-brand-color-light);
-  color: var(--zq-brand-color);
-}
-
-.zq-sidebar__item.is-active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 6px;
-  bottom: 6px;
-  width: 3px;
-  border-radius: 0 2px 2px 0;
-  background: var(--zq-brand-color);
-}
-
-.zq-sidebar__item.is-dragging {
-  opacity: 0.4;
-}
-
-.zq-sidebar__item.drop-inside {
-  background: color-mix(in srgb, var(--zq-brand-color) 12%, transparent);
-  outline: 2px solid var(--zq-brand-color);
-  outline-offset: -2px;
-  border-radius: 6px;
-}
-
-.zq-sidebar__item.drop-before {
-  box-shadow: inset 0 2px 0 0 var(--zq-brand-color);
-}
-
-.zq-sidebar__item.drop-after {
-  box-shadow: inset 0 -2px 0 0 var(--zq-brand-color);
-}
-
-.zq-sidebar__expand-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-placeholder);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all 0.15s;
-}
-
-.zq-sidebar__expand-toggle:hover {
-  background: var(--zq-bg-cell-hover);
-  color: var(--zq-text-secondary);
-}
-
-.zq-sidebar__expand-spacer {
-  width: 18px;
-  flex-shrink: 0;
-}
-
-.zq-sidebar__item-icon {
-  width: 15px;
-  height: 15px;
-  flex-shrink: 0;
-  opacity: 0.7;
-}
-
-.zq-sidebar__item.is-active .zq-sidebar__item-icon {
-  opacity: 1;
-}
-
-.zq-sidebar__item-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.4;
-}
-
-.zq-sidebar__rename-input {
-  flex: 1;
-  min-width: 0;
-  font-size: 13px;
-  line-height: 1.4;
-  padding: 1px 6px;
-  border-radius: 4px;
-  border: 1px solid var(--zq-brand-color);
-  outline: none;
-  background: var(--zq-bg-primary);
-  color: var(--zq-text-primary);
-}
-
-.zq-sidebar__item-actions {
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.zq-sidebar__more-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-placeholder);
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.15s;
-  flex-shrink: 0;
-}
-
-.zq-sidebar__item:hover .zq-sidebar__more-btn {
-  opacity: 1;
-}
-
-.zq-sidebar__more-btn:hover {
-  background: var(--zq-bg-secondary);
-  color: var(--zq-text-secondary);
-}
-
-/* Empty & No Results */
-.zq-sidebar__empty {
-  padding: 16px;
-  font-size: 12px;
-  color: var(--zq-text-placeholder);
-  text-align: center;
-}
-
-.zq-sidebar__no-results {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 24px 16px;
-  font-size: 13px;
-  color: var(--zq-text-placeholder);
-}
-
-/* Footer */
-.zq-sidebar__footer {
-  flex-shrink: 0;
-  border-top: 1px solid var(--zq-border-color-light);
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.zq-sidebar__footer-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 12px;
-  border-radius: 6px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-secondary);
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.zq-sidebar__footer-btn:hover {
-  background: var(--zq-bg-cell-hover);
-  color: var(--zq-text-primary);
-}
-
-</style>
diff --git a/web/apps/web-ele/src/components/workflow/DocumentPreviewDialog.vue b/web/apps/web-ele/src/components/workflow/DocumentPreviewDialog.vue
deleted file mode 100644
index 481b86b..0000000
--- a/web/apps/web-ele/src/components/workflow/DocumentPreviewDialog.vue
+++ /dev/null
@@ -1,256 +0,0 @@
-<script lang="ts" setup>
-import type { InstanceDocument } from '#/api/online-dev/workflow';
-
-import { computed, ref, watch } from 'vue';
-
-import { Download, RefreshCw } from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import { ElButton, ElEmpty, ElMessage } from 'element-plus';
-
-import {
-  generateInstanceDocumentsApi,
-  getInstanceDocumentsApi,
-} from '#/api/online-dev/workflow';
-import { ZqDialog } from '#/components/zq-dialog';
-import { ZqTabs } from '#/components/zq-tabs/index';
-import { getFileUrl } from '#/composables/useFileUrl';
-
-interface Props {
-  instanceId: string;
-}
-
-const props = defineProps<Props>();
-
-const visible = defineModel<boolean>('visible', { default: false });
-
-const documentsLoading = ref(false);
-const documentsList = ref<InstanceDocument[]>([]);
-const generating = ref(false);
-
-const activeDocId = ref('');
-const previewUrls = ref<Record<string, string>>({});
-const previewLoading = ref(false);
-
-const currentPreviewDoc = computed(
-  () =>
-    documentsList.value.find((doc) => doc.id === activeDocId.value) ||
-    documentsList.value[0] ||
-    null,
-);
-
-function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-async function loadPreviewUrl(doc: InstanceDocument) {
-  if (previewUrls.value[doc.id]) return;
-
-  previewLoading.value = true;
-  try {
-    const url = await getFileUrl(doc.file_id);
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error(`${$t('common.loadFailed')}: ${response.status}`);
-    }
-    const blob = await response.blob();
-    previewUrls.value[doc.id] = URL.createObjectURL(blob);
-  } catch (error: any) {
-    ElMessage.error(error?.message || $t('common.loadFailed'));
-  } finally {
-    previewLoading.value = false;
-  }
-}
-
-async function loadDocuments() {
-  if (!props.instanceId) return;
-
-  documentsLoading.value = true;
-  documentsList.value = [];
-  activeDocId.value = '';
-  Object.values(previewUrls.value).forEach((url) => URL.revokeObjectURL(url));
-  previewUrls.value = {};
-
-  try {
-    let docs = await getInstanceDocumentsApi(props.instanceId);
-
-    if (docs.length === 0) {
-      generating.value = true;
-      try {
-        await generateInstanceDocumentsApi(props.instanceId);
-        docs = await getInstanceDocumentsApi(props.instanceId);
-      } catch (genError: any) {
-        ElMessage.error(
-          genError?.message || $t('workflow.generateDocumentsFailed'),
-        );
-      } finally {
-        generating.value = false;
-      }
-    }
-
-    documentsList.value = docs;
-
-    if (docs.length > 0) {
-      activeDocId.value = docs[0].id;
-      await loadPreviewUrl(docs[0]);
-    }
-  } catch (error: any) {
-    ElMessage.error(error?.message || $t('common.loadFailed'));
-  } finally {
-    documentsLoading.value = false;
-  }
-}
-
-async function handleTabChange(docId: string) {
-  activeDocId.value = docId;
-  const doc = documentsList.value.find((d) => d.id === docId);
-  if (doc) {
-    await loadPreviewUrl(doc);
-  }
-}
-
-async function handleDownloadDocument(doc: InstanceDocument) {
-  try {
-    const cachedUrl = previewUrls.value[doc.id];
-    let downloadUrl: string;
-    let needRevoke = false;
-
-    if (cachedUrl) {
-      downloadUrl = cachedUrl;
-    } else {
-      const url = await getFileUrl(doc.file_id);
-      const response = await fetch(url);
-      if (!response.ok) {
-        throw new Error(`${$t('common.downloadFailed')}: ${response.status}`);
-      }
-      const blob = await response.blob();
-      downloadUrl = window.URL.createObjectURL(blob);
-      needRevoke = true;
-    }
-
-    const link = document.createElement('a');
-    link.href = downloadUrl;
-    link.download = `${doc.document_name}.pdf`;
-    document.body.append(link);
-    link.click();
-    link.remove();
-    if (needRevoke) {
-      window.URL.revokeObjectURL(downloadUrl);
-    }
-  } catch (error: any) {
-    ElMessage.error(error?.message || $t('common.downloadFailed'));
-  }
-}
-
-async function handleRegenerateDocuments() {
-  if (!props.instanceId) return;
-
-  generating.value = true;
-  Object.values(previewUrls.value).forEach((url) => URL.revokeObjectURL(url));
-  previewUrls.value = {};
-
-  try {
-    await generateInstanceDocumentsApi(props.instanceId);
-    const docs = await getInstanceDocumentsApi(props.instanceId);
-    documentsList.value = docs;
-
-    if (docs.length > 0) {
-      activeDocId.value = docs[0].id;
-      await loadPreviewUrl(docs[0]);
-    }
-
-    ElMessage.success($t('workflow.regenerateDocumentsSuccess'));
-  } catch (error: any) {
-    ElMessage.error(error?.message || $t('workflow.regenerateDocumentsFailed'));
-  } finally {
-    generating.value = false;
-  }
-}
-
-function handleDialogClosed() {
-  activeDocId.value = '';
-  Object.values(previewUrls.value).forEach((url) => URL.revokeObjectURL(url));
-  previewUrls.value = {};
-}
-
-watch(visible, (val) => {
-  if (val && props.instanceId) {
-    loadDocuments();
-  }
-});
-</script>
-
-<template>
-  <ZqDialog
-    v-model="visible"
-    :title="$t('workflow.documents')"
-    width="1000px"
-    :show-footer="false"
-    @closed="handleDialogClosed"
-  >
-    <div
-      v-loading="documentsLoading || generating"
-      class="bg-background min-h-[calc(100vh-160px)]"
-    >
-      <template
-        v-if="!documentsLoading && !generating && documentsList.length === 0"
-      >
-        <ElEmpty :description="$t('workflow.noDocuments')" />
-      </template>
-
-      <template v-else-if="documentsList.length > 0">
-        <template v-if="documentsList.length > 1">
-          <ZqTabs
-            :items="
-              documentsList.map((doc) => ({
-                key: doc.id,
-                label: doc.document_name,
-              }))
-            "
-            :model-value="activeDocId"
-            @update:model-value="handleTabChange"
-          />
-        </template>
-
-        <div
-          v-if="currentPreviewDoc"
-          class="mb-3 flex items-center justify-between"
-        >
-          <div class="text-muted-foreground text-sm">
-            {{ currentPreviewDoc.template_name }} ·
-            {{ formatFileSize(currentPreviewDoc.file_size) }} ·
-            {{ currentPreviewDoc.page_count }} {{ $t('workflow.pages') }}
-          </div>
-          <div class="flex gap-2">
-            <ElButton
-              size="small"
-              :loading="generating"
-              @click="handleRegenerateDocuments"
-            >
-              <RefreshCw class="mr-1 h-4 w-4" />
-              {{ $t('workflow.regenerateDocuments') }}
-            </ElButton>
-            <ElButton
-              type="primary"
-              size="small"
-              @click="handleDownloadDocument(currentPreviewDoc)"
-            >
-              <Download class="mr-1 h-4 w-4" />
-              {{ $t('common.download') }}
-            </ElButton>
-          </div>
-        </div>
-
-        <div v-loading="previewLoading" class="h-[calc(100vh-200px)]">
-          <iframe
-            v-if="currentPreviewDoc && previewUrls[currentPreviewDoc.id]"
-            :src="previewUrls[currentPreviewDoc.id]"
-            class="h-full w-full border-none"
-          ></iframe>
-        </div>
-      </template>
-    </div>
-  </ZqDialog>
-</template>
diff --git a/web/apps/web-ele/src/components/workflow/detial/FlowPathPreview.vue b/web/apps/web-ele/src/components/workflow/detial/FlowPathPreview.vue
deleted file mode 100644
index 741e791..0000000
--- a/web/apps/web-ele/src/components/workflow/detial/FlowPathPreview.vue
+++ /dev/null
@@ -1,527 +0,0 @@
-<script lang="ts" setup>
-import type { FlowDefinition, FlowNode } from '../designer/types';
-
-/**
- * 流程路径预览组件
- * 基于流程定义展示审批路径（用于发起流程时预览）
- */
-import { computed, ref, watch } from 'vue';
-
-import {
-  Circle,
-  Clock,
-  Forward,
-  GitBranch,
-  PenLine,
-  Play,
-  Square,
-  User,
-  Users,
-} from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import { ElEmpty, ElSkeleton, ElTag } from 'element-plus';
-
-import { getDeptUsersApi } from '#/api/core/dept';
-import { getRoleUsersApi } from '#/api/core/role';
-import { getNodeDisplayName } from '#/components/workflow/designer/utils/node-display';
-import { UserAvatar } from '#/components/user-avatar/index';
-
-interface Props {
-  flowDefinition: FlowDefinition | null;
-  loading?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  loading: false,
-});
-
-// 缓存角色和部门下的用户
-const roleUsersCache = ref<Record<string, string[]>>({});
-const deptUsersCache = ref<Record<string, string[]>>({});
-
-// 节点类型图标配置
-const nodeIconConfig: Record<string, any> = {
-  start: Play,
-  end: Square,
-  approval: User,
-  handle: User,
-  copy: Forward,
-  condition: GitBranch,
-  parallel: Users,
-  delay: Clock,
-  notify: Forward,
-  service: Circle,
-  subflow: GitBranch,
-  data_update: PenLine,
-};
-
-// 需要显示的节点类型
-const visibleNodeTypes = new Set([
-  'approval',
-  'copy',
-  'data_update',
-  'delay',
-  'end',
-  'handle',
-  'start',
-]);
-
-// 扁平化流程节点（递归遍历树形结构）
-function flattenNodes(
-  node: FlowNode | undefined,
-  result: FlowNode[] = [],
-): FlowNode[] {
-  if (!node) return result;
-
-  // 只添加可见的节点类型
-  if (visibleNodeTypes.has(node.type)) {
-    result.push(node);
-  }
-
-  // 处理条件分支和并行分支
-  if (node.branches && node.branches.length > 0) {
-    // 对于条件分支，只显示第一个分支的节点（简化显示）
-    if (node.type === 'condition' && node.branches[0]?.children) {
-      flattenNodes(node.branches[0].children, result);
-    }
-    // 对于并行分支，显示所有分支的节点
-    if (node.type === 'parallel') {
-      for (const branch of node.branches) {
-        if (branch.children) {
-          flattenNodes(branch.children, result);
-        }
-      }
-    }
-  }
-
-  // 递归处理子节点
-  if (node.children) {
-    flattenNodes(node.children, result);
-  }
-
-  return result;
-}
-
-// 扁平化后的节点列表
-const flatNodes = computed(() => {
-  if (!props.flowDefinition?.nodes) return [];
-  return flattenNodes(props.flowDefinition.nodes);
-});
-
-// 获取节点图标
-function getNodeIcon(type: string) {
-  return nodeIconConfig[type] || Circle;
-}
-
-// 获取节点显示名称
-function getNodeName(node: FlowNode) {
-  return getNodeDisplayName(node);
-}
-
-// 获取节点状态样式（预览时使用主题色）
-function getStatusStyle() {
-  return {
-    '--node-color': 'var(--el-color-primary)',
-    '--node-bg': 'var(--el-color-primary-light-9)',
-  };
-}
-
-// 获取审批人类型文本
-function getAssigneeTypeText(type: string): string {
-  const key = `workflow-designer.preview.assigneeTypes.${type}`;
-  const translated = $t(key);
-  return translated === key ? type : translated;
-}
-
-// 获取审批人信息
-function getAssigneeInfo(node: FlowNode): null | {
-  assignees: string[];
-  field?: string;
-  level?: number;
-  type: string;
-} {
-  const config = node.config as any;
-  if (!config) return null;
-
-  return {
-    type: config.assigneeType || 'user',
-    assignees: config.assignees || [],
-    level: config.assigneeLevel,
-    field: config.assigneeField,
-  };
-}
-
-// 加载角色下的用户
-async function loadRoleUsers(roleIds: string[]) {
-  for (const roleId of roleIds) {
-    if (roleUsersCache.value[roleId]) continue;
-    try {
-      const res = await getRoleUsersApi(roleId, { page: 1, pageSize: 50 });
-      // RoleUser 接口返回 id 字段
-      roleUsersCache.value[roleId] = res.items.map((u: any) => String(u.id));
-    } catch {
-      roleUsersCache.value[roleId] = [];
-    }
-  }
-}
-
-// 加载部门下的用户
-async function loadDeptUsers(deptIds: string[]) {
-  for (const deptId of deptIds) {
-    if (deptUsersCache.value[deptId]) continue;
-    try {
-      const res = await getDeptUsersApi(deptId, { page: 1, pageSize: 50 });
-      // DeptUser 接口返回 id 字段
-      deptUsersCache.value[deptId] = res.items.map((u: any) => String(u.id));
-    } catch {
-      deptUsersCache.value[deptId] = [];
-    }
-  }
-}
-
-// 获取角色下的所有用户ID
-function getRoleUserIds(roleIds: string[]): string[] {
-  const userIds: string[] = [];
-  for (const roleId of roleIds) {
-    const users = roleUsersCache.value[roleId] || [];
-    userIds.push(...users);
-  }
-  return [...new Set(userIds)];
-}
-
-// 获取部门下的所有用户ID
-function getDeptUserIds(deptIds: string[]): string[] {
-  const userIds: string[] = [];
-  for (const deptId of deptIds) {
-    const users = deptUsersCache.value[deptId] || [];
-    userIds.push(...users);
-  }
-  return [...new Set(userIds)];
-}
-
-// 监听流程定义变化，预加载角色和部门用户
-watch(
-  () => props.flowDefinition,
-  async (flowDef) => {
-    if (!flowDef?.nodes) return;
-
-    const roleIds: string[] = [];
-    const deptIds: string[] = [];
-
-    // 收集所有角色和部门ID
-    function collectIds(node: FlowNode | undefined) {
-      if (!node) return;
-      const config = node.config as any;
-      if (config?.assigneeType === 'role' && config.assignees?.length) {
-        roleIds.push(...config.assignees);
-      }
-      if (config?.assigneeType === 'department' && config.assignees?.length) {
-        deptIds.push(...config.assignees);
-      }
-      if (node.children) collectIds(node.children);
-      if (node.branches) {
-        for (const branch of node.branches) {
-          if (branch.children) collectIds(branch.children);
-        }
-      }
-    }
-
-    collectIds(flowDef.nodes);
-
-    // 加载用户
-    if (roleIds.length > 0) await loadRoleUsers([...new Set(roleIds)]);
-    if (deptIds.length > 0) await loadDeptUsers([...new Set(deptIds)]);
-  },
-  { immediate: true },
-);
-</script>
-
-<template>
-  <div class="flow-path-preview">
-    <ElSkeleton v-if="loading" :rows="6" animated />
-
-    <template v-else-if="flatNodes.length > 0">
-      <!-- 流程节点列表 -->
-      <div class="progress-timeline">
-        <div
-          v-for="(node, index) in flatNodes"
-          :key="node.id"
-          class="progress-node"
-          :class="{ 'is-last': index === flatNodes.length - 1 }"
-          :style="getStatusStyle()"
-        >
-          <!-- 节点图标 -->
-          <div class="node-icon">
-            <component :is="getNodeIcon(node.type)" class="icon" />
-          </div>
-
-          <!-- 连接线 -->
-          <div v-if="index < flatNodes.length - 1" class="node-line"></div>
-
-          <!-- 节点内容 -->
-          <div
-            class="node-content bg-background min-h-12 rounded-[8px] px-4 py-2"
-          >
-            <div class="node-header">
-              <span class="node-name">{{ getNodeName(node) }}</span>
-              <ElTag type="info" size="small">
-                {{
-                  $t('workflow-designer.detail.flowProgress.nodeStatus.pending')
-                }}
-              </ElTag>
-            </div>
-
-            <!-- 审批人信息 -->
-            <div
-              v-if="
-                ['approval', 'handle', 'copy'].includes(node.type) &&
-                getAssigneeInfo(node)
-              "
-              class="node-handlers mb-2"
-            >
-              <div class="assignee-info">
-                <span class="assignee-type">
-                  {{ getAssigneeTypeText(getAssigneeInfo(node)!.type) }}
-                </span>
-
-                <!-- 指定成员 -->
-                <div
-                  v-if="
-                    getAssigneeInfo(node)!.type === 'user' &&
-                    getAssigneeInfo(node)!.assignees.length > 0
-                  "
-                  class="assignee-avatars"
-                >
-                  <UserAvatar
-                    v-for="userId in getAssigneeInfo(node)!.assignees"
-                    :key="userId"
-                    :user-id="userId"
-                    :size="32"
-                    :font-size="12"
-                    :shadow="false"
-                    auto-load
-                    show-info
-                  />
-                </div>
-
-                <!-- 指定角色 - 显示角色下的用户 -->
-                <div
-                  v-if="
-                    getAssigneeInfo(node)!.type === 'role' &&
-                    getAssigneeInfo(node)!.assignees.length > 0
-                  "
-                  class="assignee-avatars"
-                >
-                  <template
-                    v-if="
-                      getRoleUserIds(getAssigneeInfo(node)!.assignees).length >
-                      0
-                    "
-                  >
-                    <UserAvatar
-                      v-for="userId in getRoleUserIds(
-                        getAssigneeInfo(node)!.assignees,
-                      )"
-                      :key="userId"
-                      :user-id="userId"
-                      :size="32"
-                      :font-size="12"
-                      :shadow="false"
-                      auto-load
-                      show-info
-                    />
-                  </template>
-                  <span v-else class="text-muted-foreground text-xs">{{
-                    $t('workflow.start.loadingUsers')
-                  }}</span>
-                </div>
-
-                <!-- 指定部门 - 显示部门下的用户 -->
-                <div
-                  v-if="
-                    getAssigneeInfo(node)!.type === 'department' &&
-                    getAssigneeInfo(node)!.assignees.length > 0
-                  "
-                  class="assignee-avatars"
-                >
-                  <template
-                    v-if="
-                      getDeptUserIds(getAssigneeInfo(node)!.assignees).length >
-                      0
-                    "
-                  >
-                    <UserAvatar
-                      v-for="userId in getDeptUserIds(
-                        getAssigneeInfo(node)!.assignees,
-                      )"
-                      :key="userId"
-                      :user-id="userId"
-                      :size="32"
-                      :font-size="12"
-                      :shadow="false"
-                      auto-load
-                      show-info
-                    />
-                  </template>
-                  <span v-else class="text-muted-foreground text-xs">{{
-                    $t('workflow.start.loadingUsers')
-                  }}</span>
-                </div>
-
-                <!-- 上级主管/经理 -->
-                <span
-                  v-if="
-                    getAssigneeInfo(node)!.type === 'superior' ||
-                    getAssigneeInfo(node)!.type === 'manager'
-                  "
-                  class="assignee-level"
-                >
-                  {{ $t('workflow-designer.preview.labels.level')
-                  }}{{ getAssigneeInfo(node)!.level || 1
-                  }}{{ $t('workflow-designer.preview.labels.levelSuffix')
-                  }}{{
-                    getAssigneeInfo(node)!.type === 'superior'
-                      ? $t('workflow-designer.preview.labels.superior')
-                      : $t('workflow-designer.preview.labels.manager')
-                  }}
-                </span>
-
-                <!-- 发起人 -->
-                <span
-                  v-if="getAssigneeInfo(node)!.type === 'initiator'"
-                  class="assignee-level"
-                >
-                  {{ $t('workflow-designer.preview.assigneeTypes.initiator') }}
-                </span>
-
-                <!-- 表单字段 -->
-                <span
-                  v-if="getAssigneeInfo(node)!.type === 'form_field'"
-                  class="assignee-level"
-                >
-                  {{
-                    $t('workflow-designer.preview.assigneeTypes.form_field')
-                  }}: {{ getAssigneeInfo(node)!.field }}
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <ElEmpty
-      v-else
-      :description="$t('workflow-designer.detail.flowProgress.noData')"
-    />
-  </div>
-</template>
-
-<style scoped>
-.flow-path-preview {
-  padding: 16px;
-}
-
-/* 流程时间线 */
-.progress-timeline {
-  position: relative;
-}
-
-.progress-node {
-  position: relative;
-  display: flex;
-  padding-bottom: 24px;
-}
-
-.progress-node.is-last {
-  padding-bottom: 0;
-}
-
-/* 节点图标 */
-.node-icon {
-  z-index: 1;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: var(--node-bg);
-  border: 2px solid var(--node-color);
-  border-radius: 50%;
-  border-style: dashed;
-  margin-top: 8px;
-}
-
-.node-icon .icon {
-  width: 16px;
-  height: 16px;
-  color: var(--node-color);
-}
-
-/* 连接线 */
-.node-line {
-  position: absolute;
-  top: 32px;
-  bottom: 0;
-  left: 15px;
-  width: 2px;
-  background: var(--el-border-color-light);
-  margin-top: 16px;
-}
-
-/* 节点内容 */
-.node-content {
-  flex: 1;
-  min-width: 0;
-  margin-left: 12px;
-}
-
-.node-header {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  min-height: 32px;
-}
-
-.node-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-/* 审批人信息 */
-.node-handlers {
-  padding: 12px;
-  margin-top: 8px;
-  background: var(--el-fill-color-lighter);
-  border-radius: 6px;
-}
-
-.assignee-info {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.assignee-type {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.assignee-avatars {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.assignee-selector {
-  max-width: 100%;
-}
-
-.assignee-level {
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/workflow/detial/FlowProgressTab.vue b/web/apps/web-ele/src/components/workflow/detial/FlowProgressTab.vue
deleted file mode 100644
index 25ccbdc..0000000
--- a/web/apps/web-ele/src/components/workflow/detial/FlowProgressTab.vue
+++ /dev/null
@@ -1,908 +0,0 @@
-<script lang="ts" setup>
-import type { FlowProgress, ProgressNode } from '#/api/online-dev/workflow';
-import type { NodeType } from '#/components/workflow/designer/types';
-
-/**
- * 流程进度 Tab 组件
- * 展示完整的审批流程路径和状态
- */
-import { computed, ref, watch } from 'vue';
-
-import {
-  Circle,
-  Clock,
-  CornerDownLeft,
-  Forward,
-  GitBranch,
-  PenLine,
-  Play,
-  Square,
-  User,
-  Users,
-} from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import { ElEmpty, ElImage, ElMessage, ElSkeleton, ElTag } from 'element-plus';
-
-import { getInstanceProgressApi } from '#/api/online-dev/workflow';
-import { getNodeDisplayName } from '#/components/workflow/designer/utils/node-display';
-import { UserAvatar } from '#/components/user-avatar/index';
-import { getFileUrl } from '#/composables/useFileUrl';
-
-interface Props {
-  instanceId: string;
-}
-
-const props = defineProps<Props>();
-
-const loading = ref(false);
-const progress = ref<FlowProgress | null>(null);
-
-// 签名图片URL缓存
-const signatureUrls = ref<Record<string, string>>({});
-
-// 节点类型图标配置（静态）
-const nodeIconConfig: Record<string, any> = {
-  start: Play,
-  end: Square,
-  approval: User,
-  handle: User,
-  copy: Forward,
-  condition: GitBranch,
-  parallel: Users,
-  delay: Clock,
-  notify: Forward,
-  service: Circle,
-  subflow: GitBranch,
-  data_update: PenLine,
-};
-
-// 节点状态配置
-const statusConfig = computed<
-  Record<string, { bgColor: string; color: string; label: string }>
->(() => ({
-  completed: {
-    label: $t('workflow-designer.detail.flowProgress.nodeStatus.completed'),
-    color: 'var(--el-color-success)',
-    bgColor: 'var(--el-color-success-light-9)',
-  },
-  active: {
-    label: $t('workflow-designer.detail.flowProgress.nodeStatus.active'),
-    color: 'var(--el-color-primary)',
-    bgColor: 'var(--el-color-primary-light-9)',
-  },
-  pending: {
-    label: $t('workflow-designer.detail.flowProgress.nodeStatus.pending'),
-    color: 'var(--el-text-color-secondary)',
-    bgColor: 'var(--el-fill-color-light)',
-  },
-  skipped: {
-    label: $t('workflow-designer.detail.flowProgress.nodeStatus.skipped'),
-    color: 'var(--el-text-color-placeholder)',
-    bgColor: 'var(--el-fill-color-lighter)',
-  },
-  rejected: {
-    label: $t('workflow-designer.detail.flowProgress.nodeStatus.rejected'),
-    color: 'var(--el-color-danger)',
-    bgColor: 'var(--el-color-danger-light-9)',
-  },
-}));
-
-// 操作类型配置
-const actionConfig = computed<Record<string, { label: string; type: string }>>(
-  () => ({
-    approve: {
-      label: $t('workflow-designer.detail.flowProgress.actions.approve'),
-      type: 'success',
-    },
-    reject: {
-      label: $t('workflow-designer.detail.flowProgress.actions.reject'),
-      type: 'danger',
-    },
-    return: {
-      label: $t('workflow-designer.detail.flowProgress.actions.return'),
-      type: 'warning',
-    },
-    transfer: {
-      label: $t('workflow-designer.detail.flowProgress.actions.transfer'),
-      type: 'warning',
-    },
-    delegate: {
-      label: $t('workflow-designer.detail.flowProgress.actions.delegate'),
-      type: 'info',
-    },
-    handle: {
-      label: $t('workflow-designer.detail.flowProgress.actions.handle'),
-      type: 'success',
-    },
-    add_sign: {
-      label: $t('workflow-designer.detail.flowProgress.actions.add_sign'),
-      type: 'warning',
-    },
-  }),
-);
-
-// 加签类型配置
-const signTypeConfig = computed<Record<string, string>>(() => ({
-  before: $t('workflow-designer.detail.flowProgress.signTypes.before'),
-  after: $t('workflow-designer.detail.flowProgress.signTypes.after'),
-  parallel: $t('workflow-designer.detail.flowProgress.signTypes.parallel'),
-}));
-
-// 额外操作类型配置
-const extraActionConfig = computed<
-  Record<string, { label: string; type: string }>
->(() => ({
-  add_sign: {
-    label: $t('workflow-designer.detail.flowProgress.extraActions.add_sign'),
-    type: 'warning',
-  },
-  reduce_sign: {
-    label: $t('workflow-designer.detail.flowProgress.extraActions.reduce_sign'),
-    type: 'danger',
-  },
-  transfer: {
-    label: $t('workflow-designer.detail.flowProgress.extraActions.transfer'),
-    type: 'warning',
-  },
-  delegate: {
-    label: $t('workflow-designer.detail.flowProgress.extraActions.delegate'),
-    type: 'info',
-  },
-  return: {
-    label: $t('workflow-designer.detail.flowProgress.extraActions.return'),
-    type: 'danger',
-  },
-}));
-
-// 加载数据
-async function loadProgress() {
-  if (!props.instanceId) return;
-
-  loading.value = true;
-  try {
-    progress.value = await getInstanceProgressApi(props.instanceId);
-    // 加载签名图片URL
-    if (progress.value?.nodes) {
-      await loadSignatureUrls(progress.value.nodes);
-    }
-  } catch (error: any) {
-    ElMessage.error(
-      error?.message || $t('workflow-designer.detail.flowProgress.loadFailed'),
-    );
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 加载签名图片URL
-async function loadSignatureUrls(nodes: ProgressNode[]) {
-  const fileIds: string[] = [];
-  for (const node of nodes) {
-    for (const handler of node.handlers || []) {
-      if ((handler as any).signature_file_id) {
-        fileIds.push((handler as any).signature_file_id);
-      }
-    }
-  }
-
-  if (fileIds.length === 0) return;
-
-  const results = await Promise.all(
-    fileIds.map(async (fileId) => {
-      try {
-        const url = await getFileUrl(fileId);
-        return { fileId, url };
-      } catch {
-        return { fileId, url: '' };
-      }
-    }),
-  );
-
-  for (const { fileId, url } of results) {
-    if (url) {
-      signatureUrls.value[fileId] = url;
-    }
-  }
-}
-
-// 监听 instanceId 变化
-watch(
-  () => props.instanceId,
-  (newId) => {
-    if (newId) {
-      loadProgress();
-    }
-  },
-  { immediate: true },
-);
-
-// 获取节点图标
-function getNodeIcon(type: string) {
-  return nodeIconConfig[type] || Circle;
-}
-
-// 获取节点显示名称
-function getNodeName(node: ProgressNode) {
-  return getNodeDisplayName({
-    name: node.name,
-    type: node.type as NodeType,
-  });
-}
-
-// 获取节点状态样式
-function getStatusStyle(status: string) {
-  const config = statusConfig.value[status] ?? statusConfig.value.pending!;
-  return {
-    '--node-color': config?.color,
-    '--node-bg': config?.bgColor,
-  };
-}
-
-// 获取节点状态标签
-function getStatusLabel(status: string) {
-  return statusConfig.value[status]?.label || status;
-}
-
-// 获取节点状态 ElTag type
-function getStatusTagType(status: string): string {
-  const typeMap: Record<string, string> = {
-    completed: 'success',
-    active: 'primary',
-    rejected: 'danger',
-    pending: 'info',
-    skipped: 'info',
-  };
-  return typeMap[status] || 'info';
-}
-
-// 获取操作标签
-function getActionLabel(action: string) {
-  return actionConfig.value[action]?.label || action;
-}
-
-// 获取操作 ElTag type
-function getActionTagType(action: string): string {
-  return actionConfig.value[action]?.type || 'info';
-}
-
-// 获取额外操作标签
-function getExtraActionLabel(action: { sign_type: string; type: string }) {
-  if (action.type === 'add_sign') {
-    return (
-      signTypeConfig.value[action.sign_type] ||
-      $t('workflow-designer.detail.flowProgress.extraActions.add_sign')
-    );
-  }
-  return extraActionConfig.value[action.type]?.label || action.type;
-}
-
-// 获取额外操作 ElTag type
-function getExtraActionTagType(type: string): string {
-  return extraActionConfig.value[type]?.type || 'info';
-}
-
-// 格式化时间
-function formatTime(time: null | string | undefined) {
-  if (!time) return '';
-  return time;
-}
-
-// 是否显示处理人详情
-function hasHandlerDetails(node: ProgressNode) {
-  return node.handlers.length > 0 || node.extra_actions.length > 0;
-}
-
-// 需要显示的节点类型（过滤掉条件分支、并行分支、延时、通知、服务调用、子流程等非人工处理节点）
-const visibleNodeTypes = new Set([
-  'approval',
-  'copy',
-  'data_update',
-  'delay',
-  'end',
-  'handle',
-  'start',
-]);
-
-const filteredNodes = computed(() => {
-  if (!progress.value) return [];
-  return progress.value.nodes.filter((node) => visibleNodeTypes.has(node.type));
-});
-</script>
-
-<template>
-  <div class="flow-progress m-4 rounded-[8px]">
-    <ElSkeleton v-if="loading" :rows="8" animated />
-
-    <template v-else-if="progress && filteredNodes.length > 0">
-      <!-- 驳回记录提示 -->
-      <div v-if="progress.returns.length > 0" class="return-records">
-        <div class="return-title">
-          <CornerDownLeft class="return-icon" />
-          {{ $t('workflow-designer.detail.flowProgress.returnRecords') }}
-        </div>
-        <div
-          v-for="(ret, index) in progress.returns"
-          :key="index"
-          class="return-item"
-        >
-          <span class="return-from">{{ ret.from_node_name }}</span>
-          <CornerDownLeft class="return-arrow" />
-          <span class="return-to">{{ ret.to_node_name }}</span>
-          <span class="return-info">
-            {{ ret.operator_name }} · {{ ret.time }}
-          </span>
-          <span v-if="ret.reason" class="return-reason">{{ ret.reason }}</span>
-        </div>
-      </div>
-
-      <!-- 流程节点列表 -->
-      <div class="progress-timeline">
-        <div
-          v-for="(node, index) in filteredNodes"
-          :key="node.id"
-          class="progress-node"
-          :class="[
-            `status-${node.status}`,
-            { 'is-last': index === filteredNodes.length - 1 },
-          ]"
-          :style="getStatusStyle(node.status)"
-        >
-          <!-- 节点图标 -->
-          <div class="node-icon">
-            <component :is="getNodeIcon(node.type)" class="icon" />
-          </div>
-
-          <!-- 连接线 -->
-          <div v-if="index < filteredNodes.length - 1" class="node-line"></div>
-
-          <!-- 节点内容 -->
-          <div
-            class="node-content bg-background min-h-12 rounded-[8px] px-4 py-2"
-          >
-            <div class="node-header">
-              <span class="node-name">{{ getNodeName(node) }}</span>
-              <ElTag :type="getStatusTagType(node.status) as any" size="small">
-                {{ getStatusLabel(node.status) }}
-              </ElTag>
-              <span v-if="node.completed_at" class="node-time">
-                {{ formatTime(node.completed_at) }}
-              </span>
-            </div>
-
-            <!-- 延时节点信息 -->
-            <div
-              v-if="
-                node.type === 'delay' &&
-                node.status === 'active' &&
-                node.delay_until
-              "
-              class="delay-info"
-            >
-              <Clock class="delay-icon" />
-              <span>{{
-                $t('workflow-designer.detail.flowProgress.delayWaiting')
-              }}</span>
-              <span class="delay-time">{{ node.delay_until }}</span>
-            </div>
-
-            <!-- 处理人信息（审批/办理/抄送节点） -->
-            <div v-if="hasHandlerDetails(node)" class="node-handlers mb-2">
-              <!-- 处理人列表 -->
-              <div class="handlers-list">
-                <div
-                  v-for="handler in node.handlers"
-                  :key="handler.user_id || handler.user_name"
-                  class="handler-item"
-                >
-                  <div class="handler-avatar-wrapper">
-                    <UserAvatar
-                      v-if="handler.user_id"
-                      :user-id="handler.user_id"
-                      :name="handler.user_name"
-                      :size="36"
-                      :font-size="13"
-                      :show-info="true"
-                      :shadow="false"
-                      auto-load
-                    />
-                    <template v-else>
-                      <div class="handler-placeholder">
-                        {{ handler.user_name.charAt(0) }}
-                      </div>
-                      <div class="handler-name-text">
-                        {{ handler.user_name }}
-                      </div>
-                    </template>
-                  </div>
-                  <!-- 状态标签 -->
-                  <ElTag
-                    v-if="handler.action"
-                    :type="getActionTagType(handler.action) as any"
-                    size="small"
-                  >
-                    {{ getActionLabel(handler.action) }}
-                  </ElTag>
-                  <ElTag
-                    v-else-if="handler.status === 'pending'"
-                    type="warning"
-                    size="small"
-                  >
-                    {{ $t('workflow-designer.detail.flowProgress.pending') }}
-                  </ElTag>
-                  <ElTag
-                    v-else-if="handler.status === 'waiting'"
-                    type="info"
-                    size="small"
-                  >
-                    {{ $t('workflow-designer.detail.flowProgress.waiting') }}
-                  </ElTag>
-                  <ElTag
-                    v-else-if="handler.status === 'copied'"
-                    type="success"
-                    size="small"
-                  >
-                    {{ $t('workflow-designer.detail.flowProgress.copied') }}
-                  </ElTag>
-                  <ElTag
-                    v-else-if="handler.status === 'skipped'"
-                    type="info"
-                    size="small"
-                  >
-                    {{ $t('workflow-designer.detail.flowProgress.skipped') }}
-                  </ElTag>
-                  <div v-if="handler.handled_at" class="handler-time">
-                    {{ formatTime(handler.handled_at) }}
-                  </div>
-                </div>
-              </div>
-
-              <!-- 处理意见和签名（如果有） -->
-              <div
-                v-for="handler in node.handlers.filter(
-                  (h) => h.comment || (h as any).signature_file_id,
-                )"
-                :key="`comment-${handler.user_id}`"
-                class="handler-comment-item"
-              >
-                <div v-if="handler.comment" class="comment-content">
-                  <span class="comment-user">{{ handler.user_name }}：</span>
-                  <span class="comment-text">{{ handler.comment }}</span>
-                </div>
-                <!-- 签名图片 -->
-                <div
-                  v-if="
-                    (handler as any).signature_file_id &&
-                    signatureUrls[(handler as any).signature_file_id]
-                  "
-                  class="handler-signature"
-                >
-                  <span class="signature-label"
-                    >{{ $t('workflow.pending.signature') }}:</span
-                  >
-                  <ElImage
-                    :src="
-                      signatureUrls[(handler as any).signature_file_id] || ''
-                    "
-                    :preview-src-list="[
-                      signatureUrls[(handler as any).signature_file_id] || '',
-                    ]"
-                    fit="contain"
-                    class="signature-image"
-                  />
-                </div>
-              </div>
-
-              <!-- 额外操作（驳回等，加签/转交/委派已在 handlers 中显示） -->
-              <div
-                v-for="(action, actionIndex) in node.extra_actions.filter(
-                  (a) =>
-                    ![
-                      'add_sign',
-                      'reduce_sign',
-                      'transfer',
-                      'delegate',
-                    ].includes(a.type),
-                )"
-                :key="`action-${actionIndex}`"
-                class="extra-action-item"
-              >
-                <div class="action-row">
-                  <!-- 操作发起人 -->
-                  <UserAvatar
-                    v-if="action.from_user_id"
-                    :user-id="action.from_user_id"
-                    :name="action.from_user_name"
-                    :size="24"
-                    :font-size="10"
-                    :show-info="false"
-                    :shadow="false"
-                    auto-load
-                  />
-                  <span class="action-user-name">{{
-                    action.from_user_name
-                  }}</span>
-
-                  <!-- 操作类型标签 -->
-                  <ElTag
-                    :type="getExtraActionTagType(action.type) as any"
-                    size="small"
-                  >
-                    {{ getExtraActionLabel(action) }}
-                  </ElTag>
-
-                  <!-- 目标用户（非驳回操作） -->
-                  <template
-                    v-if="action.type !== 'return' && action.to_user_id"
-                  >
-                    <span class="action-arrow">→</span>
-                    <UserAvatar
-                      :user-id="action.to_user_id"
-                      :name="action.to_user_name"
-                      :size="24"
-                      :font-size="10"
-                      :show-info="false"
-                      :shadow="false"
-                      auto-load
-                    />
-                    <span class="action-user-name">{{
-                      action.to_user_name
-                    }}</span>
-                  </template>
-
-                  <!-- 驳回目标节点 -->
-                  <template v-else-if="action.type === 'return'">
-                    <span class="action-arrow">→</span>
-                    <span class="action-target-node">{{
-                      action.to_user_name
-                    }}</span>
-                  </template>
-
-                  <span class="action-time">{{ action.time }}</span>
-                </div>
-
-                <!-- 操作说明/驳回原因 -->
-                <div v-if="action.comment" class="action-comment">
-                  {{ action.comment }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <ElEmpty
-      v-else
-      :description="$t('workflow-designer.detail.flowProgress.noData')"
-    />
-  </div>
-</template>
-
-<style scoped>
-.flow-progress {
-  padding: 16px;
-}
-
-/* 驳回记录 */
-.return-records {
-  padding: 12px 16px;
-  margin-bottom: 20px;
-  background: var(--el-color-warning-light-9);
-  /* border-left: 3px solid var(--el-color-warning); */
-  border-radius: 8px;
-}
-
-.return-title {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  margin-bottom: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--el-color-warning-dark-2);
-}
-
-.return-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.return-item {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  align-items: center;
-  padding: 6px 0;
-  font-size: 12px;
-  color: var(--el-text-color-regular);
-}
-
-.return-item + .return-item {
-  border-top: 1px dashed var(--el-border-color-lighter);
-}
-
-.return-from,
-.return-to {
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.return-arrow {
-  width: 14px;
-  height: 14px;
-  color: var(--el-color-warning);
-}
-
-.return-info {
-  color: var(--el-text-color-secondary);
-}
-
-.return-reason {
-  flex-basis: 100%;
-  padding-left: 20px;
-  font-style: italic;
-  color: var(--el-text-color-secondary);
-}
-
-/* 流程时间线 */
-.progress-timeline {
-  position: relative;
-}
-
-.progress-node {
-  position: relative;
-  display: flex;
-  padding-bottom: 24px;
-}
-
-.progress-node.is-last {
-  padding-bottom: 0;
-}
-
-/* 节点图标 */
-.node-icon {
-  z-index: 1;
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: var(--node-bg);
-  border: 2px solid var(--node-color);
-  border-radius: 50%;
-}
-
-.node-icon .icon {
-  width: 16px;
-  height: 16px;
-  color: var(--node-color);
-}
-
-/* 连接线 */
-.node-line {
-  position: absolute;
-  top: 32px;
-  bottom: 0;
-  left: 15px;
-  width: 2px;
-  background: var(--el-border-color-light);
-}
-
-.progress-node.status-completed .node-line {
-  background: var(--el-color-success-light-5);
-}
-
-.progress-node.status-active .node-line {
-  background: linear-gradient(
-    to bottom,
-    var(--el-color-primary-light-5) 0%,
-    var(--el-border-color-light) 100%
-  );
-}
-
-/* 节点内容 */
-.node-content {
-  flex: 1;
-  min-width: 0;
-  margin-left: 12px;
-}
-
-.node-header {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  min-height: 32px;
-}
-
-.node-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.node-time {
-  margin-left: auto;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-/* 处理人信息 */
-.node-handlers {
-  padding: 12px;
-  margin-top: 8px;
-  background: var(--el-fill-color-lighter);
-  border-radius: 6px;
-}
-
-.handlers-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.handler-item {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: center;
-  min-width: 70px;
-}
-
-.handler-avatar-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.handler-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-color-info);
-  background: var(--el-color-info-light-7);
-  border-radius: 50%;
-}
-
-.handler-name-text {
-  max-width: 70px;
-  margin-top: 4px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  color: var(--el-text-color-primary);
-  text-align: center;
-  white-space: nowrap;
-}
-
-.handler-time {
-  font-size: 10px;
-  color: var(--el-text-color-secondary);
-}
-
-/* 处理意见 */
-.handler-comment-item {
-  padding: 8px 10px;
-  margin-top: 10px;
-  font-size: 12px;
-  background: var(--el-bg-color);
-  border-radius: 4px;
-}
-
-.comment-user {
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.comment-text {
-  color: var(--el-text-color-regular);
-}
-
-/* 签名图片 */
-.handler-signature {
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
-  margin-top: 8px;
-}
-
-.handler-signature .signature-label {
-  flex-shrink: 0;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.handler-signature .signature-image {
-  max-width: 120px;
-  max-height: 60px;
-  border-radius: 4px;
-  background: #fff;
-}
-
-/* 额外操作 */
-.extra-action-item {
-  padding: 8px 0;
-  border-top: 1px dashed var(--el-border-color-lighter);
-}
-
-.action-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  align-items: center;
-}
-
-.action-user-name {
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-}
-
-.action-arrow {
-  margin: 0 2px;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.action-target-node {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--el-color-primary);
-}
-
-.action-time {
-  margin-left: auto;
-  font-size: 11px;
-  color: var(--el-text-color-secondary);
-}
-
-.action-comment {
-  padding: 6px 8px;
-  margin-top: 6px;
-  margin-left: 30px;
-  font-size: 12px;
-  color: var(--el-text-color-regular);
-  background: var(--el-bg-color);
-  border-radius: 4px;
-}
-
-/* 状态样式 */
-.progress-node.status-skipped .node-icon {
-  opacity: 0.5;
-}
-
-.progress-node.status-skipped .node-content {
-  opacity: 0.6;
-}
-
-.progress-node.status-pending .node-icon {
-  border-style: dashed;
-}
-
-/* 延时节点信息 */
-.delay-info {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  padding: 8px 12px;
-  margin-top: 8px;
-  font-size: 12px;
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  border-radius: 6px;
-}
-
-.delay-icon {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-}
-
-.delay-time {
-  font-weight: 500;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/workflow/detial/InstanceDetailPanel.vue b/web/apps/web-ele/src/components/workflow/detial/InstanceDetailPanel.vue
deleted file mode 100644
index c88e9db..0000000
--- a/web/apps/web-ele/src/components/workflow/detial/InstanceDetailPanel.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<script lang="ts" setup>
-import type { Component } from 'vue';
-
-import type {
-  WorkflowInstance,
-  WorkflowInstanceListItem,
-} from '#/api/online-dev/workflow';
-
-import { computed, ref, watch } from 'vue';
-
-import { FileText, Route, Workflow } from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import { ElEmpty } from 'element-plus';
-
-import FlowProgressTab from '#/components/workflow/detial/FlowProgressTab.vue';
-import FlowchartTab from '#/components/workflow/detial/tabs/FlowchartTab.vue';
-import FormTab from '#/components/workflow/detial/tabs/FormTab.vue';
-import ProgressTab from '#/components/workflow/detial/tabs/ProgressTab.vue';
-import { ZqTabs } from '#/components/zq-tabs';
-
-interface TabItem {
-  key: string;
-  label: string;
-  icon?: Component;
-}
-
-interface InstanceLike {
-  id: string;
-  title?: string;
-  workflow_name?: string;
-}
-
-interface Props {
-  instance: InstanceLike | null | WorkflowInstanceListItem;
-  defaultTab?: string;
-  extraTabs?: TabItem[];
-  emptyText?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  defaultTab: 'progress',
-  extraTabs: () => [],
-  emptyText: '',
-});
-
-const emit = defineEmits<{
-  loaded: [instance: WorkflowInstance];
-}>();
-
-// 状态
-const activeTab = ref(props.defaultTab);
-const instanceDetail = ref<null | WorkflowInstance>(null);
-
-// Tab 加载状态（懒加载）
-const loadedTabs = ref<Set<string>>(new Set([props.defaultTab]));
-
-// 默认 Tab 配置
-const defaultTabItems = computed(() => [
-  {
-    key: 'progress',
-    label: $t('workflow-designer.detail.tabs.progress'),
-    icon: Workflow,
-  },
-  {
-    key: 'form',
-    label: $t('workflow-designer.detail.tabs.form'),
-    icon: FileText,
-  },
-  {
-    key: 'flowchart',
-    label: $t('workflow-designer.detail.tabs.flowchart'),
-    icon: Workflow,
-  },
-  {
-    key: 'flowProgress',
-    label: $t('workflow-designer.detail.tabs.flowProgress'),
-    icon: Route,
-  },
-]);
-
-// 合并 Tab 配置
-const tabItems = computed(() => {
-  // 如果有额外的 tabs，插入到最前面
-  if (props.extraTabs.length > 0) {
-    return [...props.extraTabs, ...defaultTabItems.value];
-  }
-  return defaultTabItems.value;
-});
-
-// 空状态文本
-const emptyDescription = computed(() => {
-  return props.emptyText || $t('workflow.initiated.selectInstance');
-});
-
-// ProgressTab 加载完成回调
-function handleProgressLoaded(inst: WorkflowInstance) {
-  instanceDetail.value = inst;
-  emit('loaded', inst);
-}
-
-// 监听实例变化
-watch(
-  () => props.instance?.id,
-  (newId, oldId) => {
-    if (newId && newId !== oldId) {
-      // 重置状态
-      activeTab.value = props.defaultTab;
-      instanceDetail.value = null;
-      loadedTabs.value = new Set([props.defaultTab]);
-    }
-  },
-);
-
-// 监听 tab 切换，记录已加载的 tab
-watch(activeTab, (tab) => {
-  loadedTabs.value.add(tab);
-});
-
-// 暴露给父组件
-defineExpose({
-  activeTab,
-  instanceDetail,
-});
-</script>
-
-<template>
-  <div class="instance-detail-panel h-[calc(100vh-120px)] overflow-hidden">
-    <template v-if="instance">
-      <div class="detail-content flex h-full flex-col overflow-hidden">
-        <!-- Tabs 头部 -->
-        <div class="tabs-header flex-shrink-0 px-4 py-4">
-          <ZqTabs v-model="activeTab" :items="tabItems" class="w-fit" />
-        </div>
-
-        <!-- Tab 内容区域 -->
-        <div
-          :key="instance.id"
-          class="tabs-content bg-background-deep mx-4 mb-4 min-h-0 flex-1 overflow-hidden rounded-[8px]"
-        >
-          <!-- 额外的 Tab 内容插槽 -->
-          <template v-for="tab in extraTabs" :key="tab.key">
-            <div v-show="activeTab === tab.key" class="h-full">
-              <slot
-                :name="`tab-${tab.key}`"
-                :instance="instance"
-                :instance-detail="instanceDetail"
-              ></slot>
-            </div>
-          </template>
-
-          <!-- 流程进度 -->
-          <div v-show="activeTab === 'progress'" class="h-full">
-            <ProgressTab
-              :instance-id="instance.id"
-              @loaded="handleProgressLoaded"
-            />
-          </div>
-
-          <!-- 表单内容 -->
-          <div v-show="activeTab === 'form'" class="h-full">
-            <FormTab
-              v-if="loadedTabs.has('form')"
-              :instance-id="instance.id"
-              :form-code="instanceDetail?.form_code"
-            />
-          </div>
-
-          <!-- 流程图 -->
-          <div v-show="activeTab === 'flowchart'" class="h-full">
-            <FlowchartTab
-              v-if="loadedTabs.has('flowchart')"
-              :instance-id="instance.id"
-              :workflow-id="instanceDetail?.workflow_id"
-              :current-node-id="instanceDetail?.current_node_id"
-              :instance-status="instanceDetail?.status"
-            />
-          </div>
-
-          <!-- 审批路径 -->
-          <div
-            v-show="activeTab === 'flowProgress'"
-            class="h-full overflow-auto"
-          >
-            <FlowProgressTab
-              v-if="loadedTabs.has('flowProgress')"
-              :instance-id="instance.id"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <div v-else class="flex h-full items-center justify-center">
-      <ElEmpty :description="emptyDescription" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.detail-content {
-  overflow: hidden;
-}
-
-.tabs-content {
-  padding: 0;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/workflow/detial/tabs/DocumentTab.vue b/web/apps/web-ele/src/components/workflow/detial/tabs/DocumentTab.vue
deleted file mode 100644
index 2976171..0000000
--- a/web/apps/web-ele/src/components/workflow/detial/tabs/DocumentTab.vue
+++ /dev/null
@@ -1,327 +0,0 @@
-<script setup lang="ts">
-import type {
-  DocumentTemplateListItem,
-  GeneratedDocument,
-} from '#/api/online-dev/document-generator';
-
-import { ref, watch } from 'vue';
-import { $t } from '@vben/locales';
-
-import { Download, FileText, Plus, RefreshCw } from '@vben/icons';
-
-import {
-  ElButton,
-  ElDialog,
-  ElEmpty,
-  ElMessage,
-  ElOption,
-  ElSelect,
-  ElTable,
-  ElTableColumn,
-  ElTag,
-} from 'element-plus';
-
-import {
-  downloadDocumentApi,
-  generateDocumentApi,
-  getDocumentListApi,
-  getTemplateListApi,
-  regenerateDocumentApi,
-} from '#/api/online-dev/document-generator';
-
-const props = defineProps<{
-  formCode?: string;
-  instanceId: string;
-  workflowCode?: string;
-}>();
-
-
-// 状态
-const loading = ref(false);
-const documents = ref<GeneratedDocument[]>([]);
-const templates = ref<DocumentTemplateListItem[]>([]);
-
-// 生成弹窗
-const generateDialogVisible = ref(false);
-const selectedTemplateId = ref('');
-const generating = ref(false);
-
-// 加载文档列表
-async function loadDocuments() {
-  if (!props.instanceId) return;
-
-  loading.value = true;
-  try {
-    const res = await getDocumentListApi({
-      instanceId: props.instanceId,
-      pageSize: 100,
-    });
-    documents.value = res.items;
-  } catch (error) {
-    console.error('Load documents failed:', error);
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 加载可用模板
-async function loadTemplates() {
-  try {
-    const res = await getTemplateListApi({
-      status: 'published',
-      workflowCode: props.workflowCode || undefined,
-      pageSize: 100,
-    });
-    templates.value = res.items;
-  } catch (error) {
-    console.error('Load templates failed:', error);
-  }
-}
-
-// 打开生成弹窗
-function handleOpenGenerate() {
-  selectedTemplateId.value = '';
-  generateDialogVisible.value = true;
-  loadTemplates();
-}
-
-// 生成文档
-async function handleGenerate() {
-  if (!selectedTemplateId.value) {
-    ElMessage.warning($t('documentGenerator.pleaseSelectTemplate'));
-    return;
-  }
-
-  generating.value = true;
-  try {
-    await generateDocumentApi({
-      template_id: selectedTemplateId.value,
-      instance_id: props.instanceId,
-    });
-    ElMessage.success($t('documentGenerator.generateSuccess'));
-    generateDialogVisible.value = false;
-    loadDocuments();
-  } catch (error: any) {
-    ElMessage.error(error?.message || $t('documentGenerator.generateFailed'));
-  } finally {
-    generating.value = false;
-  }
-}
-
-// 下载文档
-async function handleDownload(doc: GeneratedDocument) {
-  try {
-    const blob = await downloadDocumentApi(doc.id);
-    const url = URL.createObjectURL(blob as Blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${doc.document_name}.pdf`;
-    a.click();
-    URL.revokeObjectURL(url);
-  } catch (error: any) {
-    ElMessage.error(error?.message || $t('common.downloadFailed'));
-  }
-}
-
-// 重新生成
-async function handleRegenerate(doc: GeneratedDocument) {
-  try {
-    await regenerateDocumentApi(doc.id);
-    ElMessage.success($t('documentGenerator.regenerateSuccess'));
-    loadDocuments();
-  } catch (error: any) {
-    ElMessage.error(error?.message || $t('documentGenerator.regenerateFailed'));
-  }
-}
-
-// 格式化文件大小
-function formatFileSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-// 监听实例变化
-watch(
-  () => props.instanceId,
-  (newId) => {
-    if (newId) {
-      loadDocuments();
-    }
-  },
-  { immediate: true },
-);
-</script>
-
-<template>
-  <div class="document-tab">
-    <!-- 工具栏 -->
-    <div class="toolbar">
-      <ElButton type="primary" @click="handleOpenGenerate">
-        <Plus class="mr-1 h-4 w-4" />
-        {{ $t('documentGenerator.generateDocument') }}
-      </ElButton>
-      <ElButton @click="loadDocuments">
-        <RefreshCw class="mr-1 h-4 w-4" />
-        {{ $t('common.refresh') }}
-      </ElButton>
-    </div>
-
-    <!-- 文档列表 -->
-    <div v-loading="loading" class="document-list">
-      <ElTable v-if="documents.length > 0" :data="documents" stripe>
-        <ElTableColumn
-          prop="document_name"
-          :label="$t('documentGenerator.documentName')"
-          min-width="200"
-        >
-          <template #default="{ row }">
-            <div class="flex items-center gap-2">
-              <FileText class="text-primary h-4 w-4" />
-              <span>{{ row.document_name }}</span>
-            </div>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          prop="template_name"
-          :label="$t('documentGenerator.templateName')"
-          width="150"
-        />
-        <ElTableColumn
-          prop="page_count"
-          :label="$t('documentGenerator.pageCount')"
-          width="80"
-          align="center"
-        />
-        <ElTableColumn
-          prop="file_size"
-          :label="$t('documentGenerator.fileSize')"
-          width="100"
-          align="center"
-        >
-          <template #default="{ row }">
-            {{ formatFileSize(row.file_size) }}
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          prop="generate_type"
-          :label="$t('documentGenerator.generateType')"
-          width="100"
-          align="center"
-        >
-          <template #default="{ row }">
-            <ElTag
-              :type="row.generate_type === 'auto' ? 'success' : 'info'"
-              size="small"
-            >
-              {{
-                row.generate_type === 'auto'
-                  ? $t('documentGenerator.auto')
-                  : $t('documentGenerator.manual')
-              }}
-            </ElTag>
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          prop="sys_create_datetime"
-          :label="$t('documentGenerator.generateTime')"
-          width="160"
-        >
-          <template #default="{ row }">
-            {{ row.sys_create_datetime?.slice(0, 16).replace('T', ' ') }}
-          </template>
-        </ElTableColumn>
-        <ElTableColumn :label="$t('common.actions')" width="150" fixed="right">
-          <template #default="{ row }">
-            <div class="flex gap-2">
-              <ElButton link type="primary" @click="handleDownload(row)">
-                <Download class="mr-1 h-4 w-4" />
-                {{ $t('common.download') }}
-              </ElButton>
-              <ElButton link @click="handleRegenerate(row)">
-                <RefreshCw class="mr-1 h-4 w-4" />
-              </ElButton>
-            </div>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-
-      <ElEmpty v-else :description="$t('documentGenerator.noDocuments')" />
-    </div>
-
-    <!-- 生成文档弹窗 -->
-    <ElDialog
-      v-model="generateDialogVisible"
-      :title="$t('documentGenerator.generateDocument')"
-      width="500px"
-    >
-      <div class="generate-form">
-        <div class="form-item">
-          <label>{{ $t('documentGenerator.selectTemplate') }}</label>
-          <ElSelect
-            v-model="selectedTemplateId"
-            :placeholder="$t('documentGenerator.pleaseSelectTemplate')"
-            style="width: 100%"
-          >
-            <ElOption
-              v-for="tpl in templates"
-              :key="tpl.id"
-              :label="tpl.name"
-              :value="tpl.id"
-            >
-              <div class="flex items-center justify-between">
-                <span>{{ tpl.name }}</span>
-                <ElTag size="small" type="info">{{ tpl.category }}</ElTag>
-              </div>
-            </ElOption>
-          </ElSelect>
-        </div>
-      </div>
-
-      <template #footer>
-        <ElButton @click="generateDialogVisible = false">
-          {{ $t('common.cancel') }}
-        </ElButton>
-        <ElButton type="primary" :loading="generating" @click="handleGenerate">
-          {{ $t('documentGenerator.generate') }}
-        </ElButton>
-      </template>
-    </ElDialog>
-  </div>
-</template>
-
-<style scoped>
-.document-tab {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 16px;
-}
-
-.toolbar {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 16px;
-  flex-shrink: 0;
-}
-
-.document-list {
-  flex: 1;
-  overflow: auto;
-}
-
-.generate-form {
-  padding: 16px 0;
-}
-
-.form-item {
-  margin-bottom: 16px;
-}
-
-.form-item label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: var(--el-text-color-regular);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/workflow/detial/tabs/FlowchartTab.vue b/web/apps/web-ele/src/components/workflow/detial/tabs/FlowchartTab.vue
deleted file mode 100644
index 8c7587f..0000000
--- a/web/apps/web-ele/src/components/workflow/detial/tabs/FlowchartTab.vue
+++ /dev/null
@@ -1,234 +0,0 @@
-<script lang="ts" setup>
-import type { WorkflowLog } from '#/api/online-dev/workflow';
-
-/**
- * 流程图 Tab
- */
-import { computed, onMounted, ref } from 'vue';
-
-import { ElEmpty, ElSkeleton, ElSkeletonItem } from 'element-plus';
-
-import {
-  getInstanceLogsApi,
-  getWorkflowDetailApi,
-} from '#/api/online-dev/workflow';
-import FlowPreviewContent from '#/components/workflow/designer/components/FlowPreviewContent.vue';
-
-interface Props {
-  instanceId: string;
-  workflowId?: string;
-  currentNodeId?: string;
-  instanceStatus?: string;
-}
-
-const props = defineProps<Props>();
-
-// 状态
-const loading = ref(false);
-const flowDefinition = ref<any>(null);
-const workflowName = ref('');
-const logs = ref<WorkflowLog[]>([]);
-
-// 计算节点状态
-const nodeStatuses = computed(() => {
-  const statuses: Record<
-    string,
-    'active' | 'completed' | 'pending' | 'rejected'
-  > = {};
-
-  if (!flowDefinition.value?.nodes) return statuses;
-
-  // 从日志中提取已执行的节点
-  const executedNodes = new Set<string>();
-  const rejectedNodes = new Set<string>();
-
-  for (const log of logs.value) {
-    if (log.node_id) {
-      executedNodes.add(log.node_id);
-      if (log.action === 'reject') {
-        rejectedNodes.add(log.node_id);
-      }
-    }
-  }
-
-  // 流程是否已结束
-  const isFinished =
-    props.instanceStatus === 'approved' ||
-    props.instanceStatus === 'rejected' ||
-    props.instanceStatus === 'cancelled';
-
-  // 遍历流程定义，为所有节点设置状态
-  function processNode(node: any) {
-    if (!node) return;
-
-    const nodeId = node.id;
-
-    if (node.type === 'start') {
-      statuses[nodeId] = 'completed';
-    } else if (rejectedNodes.has(nodeId)) {
-      statuses[nodeId] = 'rejected';
-    } else if (nodeId === props.currentNodeId && !isFinished) {
-      // 如果节点已有执行日志且不是当前活跃节点（条件分支推进遗留），标记为已完成
-      statuses[nodeId] = executedNodes.has(nodeId) ? 'completed' : 'active';
-    } else if (executedNodes.has(nodeId)) {
-      statuses[nodeId] = 'completed';
-    } else if (
-      node.type === 'end' &&
-      isFinished &&
-      props.instanceStatus === 'approved'
-    ) {
-      statuses[nodeId] = 'completed';
-    } else {
-      statuses[nodeId] = 'pending';
-    }
-
-    if (node.children) {
-      processNode(node.children);
-    }
-
-    if (node.branches) {
-      for (const branch of node.branches) {
-        if (branch.children) {
-          processNode(branch.children);
-        }
-      }
-    }
-  }
-
-  processNode(flowDefinition.value.nodes);
-
-  return statuses;
-});
-
-// 加载数据
-async function loadData() {
-  if (!props.workflowId) return;
-
-  loading.value = true;
-  try {
-    const [workflowRes, logsRes] = await Promise.all([
-      getWorkflowDetailApi(props.workflowId),
-      getInstanceLogsApi(props.instanceId).catch(() => []),
-    ]);
-    flowDefinition.value = workflowRes.flow_definition;
-    workflowName.value = workflowRes.name;
-    logs.value = logsRes || [];
-  } catch {
-    // 忽略加载失败
-  } finally {
-    loading.value = false;
-  }
-}
-
-onMounted(() => {
-  loadData();
-});
-
-defineExpose({
-  reload: loadData,
-});
-</script>
-
-<template>
-  <div class="flowchart-tab">
-    <!-- 骨架屏 -->
-    <div v-if="loading" class="flowchart-skeleton">
-      <ElSkeleton animated>
-        <template #template>
-          <div class="skeleton-flowchart">
-            <!-- 模拟流程图节点 -->
-            <div class="skeleton-node start">
-              <ElSkeletonItem
-                variant="circle"
-                style="width: 60px; height: 60px"
-              />
-            </div>
-            <div class="skeleton-line"></div>
-            <div class="skeleton-node">
-              <ElSkeletonItem
-                variant="rect"
-                style="width: 120px; height: 60px; border-radius: 8px"
-              />
-            </div>
-            <div class="skeleton-line"></div>
-            <div class="skeleton-node">
-              <ElSkeletonItem
-                variant="rect"
-                style="width: 120px; height: 60px; border-radius: 8px"
-              />
-            </div>
-            <div class="skeleton-line"></div>
-            <div class="skeleton-node">
-              <ElSkeletonItem
-                variant="rect"
-                style="width: 120px; height: 60px; border-radius: 8px"
-              />
-            </div>
-            <div class="skeleton-line"></div>
-            <div class="skeleton-node end">
-              <ElSkeletonItem
-                variant="circle"
-                style="width: 60px; height: 60px"
-              />
-            </div>
-          </div>
-        </template>
-      </ElSkeleton>
-    </div>
-
-    <!-- 内容 -->
-    <div v-else-if="flowDefinition?.nodes" class="flowchart-content">
-      <FlowPreviewContent
-        :flow-definition="flowDefinition"
-        :flow-name="workflowName"
-        :show-header="false"
-        :node-statuses="nodeStatuses"
-        height="100%"
-      />
-    </div>
-
-    <ElEmpty v-else description="暂无流程图" />
-  </div>
-</template>
-
-<style scoped>
-.flowchart-tab {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-/* 骨架屏 */
-.flowchart-skeleton {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: center;
-  padding: 40px;
-}
-
-.skeleton-flowchart {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  align-items: center;
-}
-
-.skeleton-node {
-  display: flex;
-  justify-content: center;
-}
-
-.skeleton-line {
-  width: 2px;
-  height: 30px;
-  background: var(--el-border-color);
-}
-
-/* 内容 */
-.flowchart-content {
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/workflow/detial/tabs/FormTab.vue b/web/apps/web-ele/src/components/workflow/detial/tabs/FormTab.vue
deleted file mode 100644
index d14110b..0000000
--- a/web/apps/web-ele/src/components/workflow/detial/tabs/FormTab.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<script lang="ts" setup>
-/**
- * 表单内容 Tab
- */
-import { computed, onMounted, ref } from 'vue';
-
-import { $t } from '@vben/locales';
-
-import {
-  ElEmpty,
-  ElForm,
-  ElMessage,
-  ElScrollbar,
-  ElSkeleton,
-  ElSkeletonItem,
-} from 'element-plus';
-
-import { getFormByCodeApi } from '#/api/online-dev/form-manager';
-import { getInstanceFormDataApi } from '#/api/online-dev/workflow';
-import PreviewItem from '#/components/form-design/components/PreviewItem.vue';
-
-interface Props {
-  instanceId: string;
-  formCode?: string;
-}
-
-const props = defineProps<Props>();
-
-// 状态
-const loading = ref(false);
-const formData = ref<Record<string, any>>({});
-const formConfig = ref<any>(null);
-
-// 表单项（只读模式）
-const formItems = computed(() => {
-  if (!formConfig.value?.items) return [];
-  return processFormItems(formConfig.value.items);
-});
-
-// 递归处理表单项为只读
-function processFormItems(items: any[]): any[] {
-  return items.map((item) => {
-    const newItem = JSON.parse(JSON.stringify(item));
-    newItem.props = { ...newItem.props, disabled: true };
-
-    // 子表禁用操作
-    if (item.type === 'sub-table') {
-      newItem.props = {
-        ...newItem.props,
-        addable: false,
-        deletable: false,
-        sortable: false,
-        copyable: false,
-      };
-    }
-
-    if (item.columns) {
-      newItem.columns = item.columns.map((col: any) => ({
-        ...col,
-        children: processFormItems(col.children || []),
-      }));
-    }
-
-    if (item.children) {
-      newItem.children = processFormItems(item.children);
-    }
-
-    return newItem;
-  });
-}
-
-// 加载数据
-async function loadData() {
-  if (!props.instanceId || !props.formCode) return;
-
-  loading.value = true;
-  try {
-    const [formMetaRes, formDataRes] = await Promise.all([
-      getFormByCodeApi(props.formCode).catch(() => null),
-      getInstanceFormDataApi(props.instanceId).catch(() => ({})),
-    ]);
-
-    if (formMetaRes) {
-      formConfig.value = formMetaRes.form_config;
-    }
-
-    // 处理表单数据
-    const data = (formDataRes as Record<string, any>) || {};
-    Object.keys(data).forEach((key) => {
-      if (key !== 'sub_tables') {
-        formData.value[key] = data[key];
-      }
-    });
-    if (data.sub_tables) {
-      Object.keys(data.sub_tables).forEach((tableName: string) => {
-        formData.value[tableName] = data.sub_tables[tableName];
-      });
-    }
-  } catch (error: any) {
-    ElMessage.error(
-      error?.message || $t('workflow-designer.detail.loadFormDataFailed'),
-    );
-  } finally {
-    loading.value = false;
-  }
-}
-
-onMounted(() => {
-  loadData();
-});
-
-defineExpose({
-  reload: loadData,
-});
-</script>
-
-<template>
-  <div class="form-tab">
-    <ElScrollbar class="bg-background h-full rounded-[8px]">
-      <!-- 骨架屏 -->
-      <div v-if="loading" class="form-skeleton">
-        <ElSkeleton animated>
-          <template #template>
-            <div class="skeleton-form">
-              <div v-for="i in 6" :key="i" class="skeleton-form-item">
-                <ElSkeletonItem
-                  variant="text"
-                  style="width: 80px; margin-bottom: 8px"
-                />
-                <ElSkeletonItem
-                  variant="rect"
-                  style="width: 100%; height: 32px"
-                />
-              </div>
-            </div>
-          </template>
-        </ElSkeleton>
-      </div>
-
-      <!-- 内容 -->
-      <div v-else-if="formItems.length > 0" class="form-content">
-        <ElForm
-          :model="formData"
-          :label-width="formConfig?.labelWidth || 100"
-          :label-position="formConfig?.labelPosition || 'right'"
-          :size="formConfig?.size || 'default'"
-        >
-          <PreviewItem
-            v-for="item in formItems"
-            :key="item.id"
-            :item="item"
-            :model-value="formData"
-          />
-        </ElForm>
-      </div>
-
-      <ElEmpty
-        v-else
-        :description="$t('workflow-designer.detail.noFormContent')"
-      />
-    </ElScrollbar>
-  </div>
-</template>
-
-<style scoped>
-.form-tab {
-  height: 100%;
-  padding: 16px;
-}
-
-/* 骨架屏 */
-.form-skeleton {
-  padding: 16px;
-  background: var(--el-bg-color);
-  border-radius: 8px;
-}
-
-.skeleton-form {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 24px;
-}
-
-.skeleton-form-item {
-  display: flex;
-  flex-direction: column;
-}
-
-/* 内容 */
-.form-content {
-  padding: 16px;
-  background: var(--el-bg-color);
-  border-radius: 8px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/workflow/detial/tabs/ProgressTab.vue b/web/apps/web-ele/src/components/workflow/detial/tabs/ProgressTab.vue
deleted file mode 100644
index fcb1ddd..0000000
--- a/web/apps/web-ele/src/components/workflow/detial/tabs/ProgressTab.vue
+++ /dev/null
@@ -1,972 +0,0 @@
-<script lang="ts" setup>
-import type {
-  WorkflowInstance,
-  WorkflowLog,
-  WorkflowTaskListItem,
-} from '#/api/online-dev/workflow';
-
-/**
- * 流程进度 Tab
- */
-import { computed, onMounted, ref } from 'vue';
-
-import { Clock, Users } from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import {
-  ElEmpty,
-  ElImage,
-  ElMessage,
-  ElScrollbar,
-  ElSkeleton,
-  ElSkeletonItem,
-  ElTag,
-  ElTimeline,
-  ElTimelineItem,
-} from 'element-plus';
-
-import {
-  getInstanceDetailApi,
-  getInstanceLogsApi,
-  getInstancePendingTasksApi,
-} from '#/api/online-dev/workflow';
-import { UserAvatar } from '#/components/user-avatar/index';
-import { getFileUrl } from '#/composables/useFileUrl';
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-  loaded: [instance: WorkflowInstance];
-}>();
-
-// 签名图片URL缓存
-const signatureUrls = ref<Record<string, string>>({});
-
-interface Props {
-  instanceId: string;
-}
-
-// 状态
-const loading = ref(false);
-const instance = ref<null | WorkflowInstance>(null);
-const logs = ref<WorkflowLog[]>([]);
-const pendingTasks = ref<WorkflowTaskListItem[]>([]);
-
-// 按节点分组的待办任务
-const groupedPendingTasks = computed(() => {
-  const groups: { nodeName: string; tasks: WorkflowTaskListItem[] }[] = [];
-  const nodeMap = new Map<string, WorkflowTaskListItem[]>();
-
-  for (const task of pendingTasks.value) {
-    const key = task.node_name || $t('workflow-designer.detail.unknownNode');
-    if (!nodeMap.has(key)) {
-      nodeMap.set(key, []);
-    }
-    nodeMap.get(key)!.push(task);
-  }
-
-  for (const [nodeName, tasks] of nodeMap) {
-    groups.push({ nodeName, tasks });
-  }
-
-  return groups;
-});
-
-// 状态配置
-const statusConfig = computed(() => ({
-  pending: {
-    type: 'warning' as const,
-    label: $t('workflow-designer.detail.status.pending'),
-  },
-  approved: {
-    type: 'success' as const,
-    label: $t('workflow-designer.detail.status.approved'),
-  },
-  rejected: {
-    type: 'danger' as const,
-    label: $t('workflow-designer.detail.status.rejected'),
-  },
-  cancelled: {
-    type: 'info' as const,
-    label: $t('workflow-designer.detail.status.cancelled'),
-  },
-  canceled: {
-    type: 'info' as const,
-    label: $t('workflow-designer.detail.status.cancelled'),
-  },
-}));
-
-// 操作配置
-const actionConfig = computed(() => ({
-  start: {
-    label: $t('workflow-designer.detail.actions.start'),
-    type: 'primary',
-  },
-  approve: {
-    label: $t('workflow-designer.detail.actions.approve'),
-    type: 'success',
-  },
-  reject: {
-    label: $t('workflow-designer.detail.actions.reject'),
-    type: 'danger',
-  },
-  return: {
-    label: $t('workflow-designer.detail.actions.return'),
-    type: 'warning',
-  },
-  transfer: {
-    label: $t('workflow-designer.detail.actions.transfer'),
-    type: 'warning',
-  },
-  delegate: {
-    label: $t('workflow-designer.detail.actions.delegate'),
-    type: 'warning',
-  },
-  add_sign: {
-    label: $t('workflow-designer.detail.actions.add_sign'),
-    type: 'warning',
-  },
-  revise: {
-    label: $t('workflow-designer.detail.actions.revise'),
-    type: 'primary',
-  },
-  cancel: {
-    label: $t('workflow-designer.detail.actions.cancel'),
-    type: 'info',
-  },
-  copy: { label: $t('workflow-designer.detail.actions.copy'), type: 'info' },
-  handle: {
-    label: $t('workflow-designer.detail.actions.handle'),
-    type: 'primary',
-  },
-  urge: { label: $t('workflow-designer.detail.actions.urge'), type: 'warning' },
-  task_timeout: {
-    label: $t('workflow-designer.detail.actions.task_timeout'),
-    type: 'danger',
-  },
-  task_timeout_notify: {
-    label: $t('workflow-designer.detail.actions.task_timeout_notify'),
-    type: 'warning',
-  },
-  task_auto_approve: {
-    label: $t('workflow-designer.detail.actions.task_auto_approve'),
-    type: 'success',
-  },
-  task_auto_reject: {
-    label: $t('workflow-designer.detail.actions.task_auto_reject'),
-    type: 'danger',
-  },
-  condition: {
-    label: $t('workflow-designer.detail.actions.condition'),
-    type: 'info',
-  },
-  delay_start: {
-    label: $t('workflow-designer.detail.actions.delay_start'),
-    type: 'info',
-  },
-  delay_complete: {
-    label: $t('workflow-designer.detail.actions.delay_complete'),
-    type: 'info',
-  },
-  delay_skip: {
-    label: $t('workflow-designer.detail.actions.delay_skip'),
-    type: 'warning',
-  },
-  notify: {
-    label: $t('workflow-designer.detail.actions.notify'),
-    type: 'info',
-  },
-  parallel_start: {
-    label: $t('workflow-designer.detail.actions.parallel_start'),
-    type: 'info',
-  },
-  parallel_complete: {
-    label: $t('workflow-designer.detail.actions.parallel_complete'),
-    type: 'info',
-  },
-  subflow_start: {
-    label: $t('workflow-designer.detail.actions.subflow_start'),
-    type: 'info',
-  },
-  subflow_complete: {
-    label: $t('workflow-designer.detail.actions.subflow_complete'),
-    type: 'info',
-  },
-}));
-
-// 加载数据
-async function loadData() {
-  if (!props.instanceId) return;
-
-  loading.value = true;
-  try {
-    const [instanceRes, logsRes, pendingTasksRes] = await Promise.all([
-      getInstanceDetailApi(props.instanceId),
-      getInstanceLogsApi(props.instanceId),
-      getInstancePendingTasksApi(props.instanceId).catch(() => []),
-    ]);
-    instance.value = instanceRes;
-    logs.value = logsRes || [];
-    pendingTasks.value = pendingTasksRes || [];
-    emit('loaded', instanceRes);
-
-    // 加载签名图片URL
-    await loadSignatureUrls(logsRes || []);
-  } catch (error: any) {
-    ElMessage.error(
-      error?.message || $t('workflow-designer.detail.loadDataFailed'),
-    );
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 加载签名图片URL
-async function loadSignatureUrls(logList: WorkflowLog[]) {
-  const fileIds = logList
-    .filter((log) => log.extra_data?.signature_file_id)
-    .map((log) => log.extra_data!.signature_file_id!);
-
-  if (fileIds.length === 0) return;
-
-  // 并行加载所有签名图片URL
-  const results = await Promise.all(
-    fileIds.map(async (fileId) => {
-      try {
-        const url = await getFileUrl(fileId);
-        return { fileId, url };
-      } catch {
-        return { fileId, url: '' };
-      }
-    }),
-  );
-
-  // 更新缓存
-  for (const { fileId, url } of results) {
-    if (url) {
-      signatureUrls.value[fileId] = url;
-    }
-  }
-}
-
-// 格式化时间
-function formatTime(time: null | string | undefined) {
-  if (!time) return '-';
-  return time;
-}
-
-// 格式化剩余时间
-function formatRemainingTime(timeoutAt: null | string | undefined) {
-  if (!timeoutAt) return '';
-
-  const timeout = new Date(timeoutAt).getTime();
-  const now = Date.now();
-  const diff = timeout - now;
-
-  if (diff <= 0) return $t('workflow-designer.detail.timeout');
-
-  const hours = Math.floor(diff / (1000 * 60 * 60));
-  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-
-  if (hours > 24) {
-    const days = Math.floor(hours / 24);
-    return `${days}${$t('workflow-designer.detail.daysLater')}`;
-  }
-  if (hours > 0) return `${hours}${$t('workflow-designer.detail.hoursLater')}`;
-  return `${minutes}${$t('workflow-designer.detail.minutesLater')}`;
-}
-
-// 计算耗时
-const duration = computed(() => {
-  if (!instance.value?.started_at) return '-';
-  const start = new Date(instance.value.started_at).getTime();
-  const end = instance.value.completed_at
-    ? new Date(instance.value.completed_at).getTime()
-    : Date.now();
-  const diff = end - start;
-
-  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
-
-  if (days > 0)
-    return `${days}${$t('workflow-designer.detail.days')}${hours}${$t('workflow-designer.detail.hours')}`;
-  if (hours > 0)
-    return `${hours}${$t('workflow-designer.detail.hours')}${minutes}${$t('workflow-designer.detail.minutes')}`;
-  return `${minutes}${$t('workflow-designer.detail.minutes')}`;
-});
-
-onMounted(() => {
-  loadData();
-});
-
-// 暴露实例数据
-defineExpose({
-  instance,
-  reload: loadData,
-});
-</script>
-
-<template>
-  <div class="progress-tab">
-    <!-- 骨架屏 -->
-    <div v-if="loading" class="progress-skeleton">
-      <div class="skeleton-left">
-        <ElSkeleton animated>
-          <template #template>
-            <div class="skeleton-title">
-              <ElSkeletonItem variant="text" style="width: 100px" />
-            </div>
-            <div class="skeleton-card">
-              <div v-for="i in 20" :key="i" class="skeleton-row">
-                <ElSkeletonItem variant="text" style="width: 60px" />
-                <ElSkeletonItem variant="text" style="width: 150px" />
-              </div>
-            </div>
-          </template>
-        </ElSkeleton>
-      </div>
-      <div class="skeleton-right">
-        <ElSkeleton animated>
-          <template #template>
-            <div class="skeleton-title">
-              <ElSkeletonItem variant="text" style="width: 100px" />
-            </div>
-            <div class="skeleton-timeline">
-              <div v-for="i in 12" :key="i" class="skeleton-timeline-item">
-                <ElSkeletonItem
-                  variant="circle"
-                  style="width: 32px; height: 32px"
-                />
-                <div class="skeleton-timeline-content">
-                  <ElSkeletonItem variant="text" style="width: 200px" />
-                  <ElSkeletonItem
-                    variant="text"
-                    style="width: 150px; margin-top: 8px"
-                  />
-                </div>
-              </div>
-            </div>
-          </template>
-        </ElSkeleton>
-      </div>
-    </div>
-
-    <!-- 内容 -->
-    <div v-else-if="instance" class="progress-layout">
-      <!-- 左侧：流程信息 -->
-      <div class="info-panel">
-        <!-- 当前待办 -->
-        <template v-if="groupedPendingTasks.length > 0">
-          <div class="pending-section">
-            <div class="panel-title flex-shrink-0">
-              <Clock class="panel-icon" />
-              {{ $t('workflow-designer.detail.currentPending') }}
-            </div>
-            <ElScrollbar class="pending-scroll bg-background rounded-[8px]">
-              <div class="pending-groups">
-                <div
-                  v-for="group in groupedPendingTasks"
-                  :key="group.nodeName"
-                  class="pending-group"
-                >
-                  <div class="group-header">
-                    <span class="group-node">{{ group.nodeName }}</span>
-                    <ElTag
-                      v-if="group.tasks.length > 1"
-                      type="info"
-                      size="small"
-                    >
-                      {{ group.tasks.length
-                      }}{{ $t('workflow-designer.detail.person') }}
-                    </ElTag>
-                  </div>
-                  <div class="group-users">
-                    <div
-                      v-for="task in group.tasks"
-                      :key="task.id"
-                      class="pending-user"
-                    >
-                      <UserAvatar
-                        :user-id="task.assignee_id"
-                        :name="task.assignee_name"
-                        :size="32"
-                        :font-size="12"
-                        :show-info="true"
-                        :shadow="false"
-                        auto-load
-                      />
-                      <ElTag
-                        v-if="task.is_timeout"
-                        type="danger"
-                        size="small"
-                        class="user-status"
-                      >
-                        {{ $t('workflow-designer.detail.timeout') }}
-                      </ElTag>
-                      <ElTag
-                        v-else-if="task.timeout_at && !task.is_timeout"
-                        type="warning"
-                        size="small"
-                        class="user-status"
-                        :title="`超时时间: ${task.timeout_at}`"
-                      >
-                        {{ formatRemainingTime(task.timeout_at) }}
-                      </ElTag>
-                      <ElTag
-                        v-else-if="task.status === 'waiting'"
-                        type="info"
-                        size="small"
-                        class="user-status"
-                      >
-                        {{ $t('workflow-designer.detail.waiting') }}
-                      </ElTag>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </ElScrollbar>
-          </div>
-        </template>
-
-        <!-- 流程信息 -->
-        <div class="flow-info-section">
-          <div class="panel-title flex-shrink-0">
-            <Users class="panel-icon" />
-            {{ $t('workflow-designer.detail.flowInfo') }}
-          </div>
-          <ElScrollbar class="flow-info-scroll bg-background rounded-[8px]">
-            <div class="info-card">
-              <div class="info-row">
-                <span class="info-label">{{
-                  $t('workflow-designer.detail.flowTitle')
-                }}</span>
-                <span class="info-value title-value">{{ instance.title }}</span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">{{
-                  $t('workflow-designer.detail.flowType')
-                }}</span>
-                <span class="info-value">{{ instance.workflow_name }}</span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">{{
-                  $t('workflow-designer.detail.flowStatus')
-                }}</span>
-                <span class="info-value">
-                  <ElTag
-                    v-if="instance?.status && statusConfig[instance.status]"
-                    :type="statusConfig[instance.status]?.type"
-                    size="small"
-                  >
-                    {{ statusConfig[instance.status]?.label }}
-                  </ElTag>
-                </span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">{{
-                  $t('workflow-designer.detail.flowNo')
-                }}</span>
-                <span class="info-value mono">{{ instance.instance_no }}</span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">{{
-                  $t('workflow-designer.detail.initiator')
-                }}</span>
-                <span class="info-value">
-                  <UserAvatar
-                    :user-id="instance.initiator_id"
-                    :name="instance.initiator_name"
-                    :size="28"
-                    :font-size="12"
-                    :show-info="true"
-                    :shadow="false"
-                    auto-load
-                  />
-                </span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">{{
-                  $t('workflow-designer.detail.currentNode')
-                }}</span>
-                <span class="info-value highlight">{{
-                  instance.current_node_name || '-'
-                }}</span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">{{
-                  $t('workflow-designer.detail.startTime')
-                }}</span>
-                <span class="info-value">{{
-                  formatTime(instance.started_at)
-                }}</span>
-              </div>
-              <div v-if="instance.completed_at" class="info-row">
-                <span class="info-label">{{
-                  $t('workflow-designer.detail.completeTime')
-                }}</span>
-                <span class="info-value">{{
-                  formatTime(instance.completed_at)
-                }}</span>
-              </div>
-              <div class="info-row">
-                <span class="info-label">{{
-                  $t('workflow-designer.detail.duration')
-                }}</span>
-                <span class="info-value">
-                  <Clock class="inline-icon" />
-                  {{ duration }}
-                </span>
-              </div>
-            </div>
-          </ElScrollbar>
-        </div>
-      </div>
-
-      <!-- 右侧：审批记录 -->
-      <div class="timeline-panel">
-        <div class="panel-title flex-shrink-0">
-          <Clock class="panel-icon" />
-          {{ $t('workflow-designer.detail.approvalRecord') }}
-        </div>
-        <ElScrollbar class="bg-background flex-1 rounded-[8px] px-4 pt-4">
-          <div class="timeline-content">
-            <ElTimeline v-if="logs.length > 0">
-              <ElTimelineItem
-                v-for="log in logs"
-                :key="log.id"
-                :type="(actionConfig[log.action]?.type || 'info') as any"
-              >
-                <template #dot>
-                  <div
-                    class="timeline-dot"
-                    :class="actionConfig[log.action]?.type || 'info'"
-                  >
-                    <span class="dot-circle"></span>
-                    <span class="dot-node-name">{{
-                      log.node_name || $t('workflow-designer.detail.start')
-                    }}</span>
-                  </div>
-                </template>
-                <div class="log-card">
-                  <div class="log-header">
-                    <template v-if="log.operator_id">
-                      <UserAvatar
-                        :user-id="log.operator_id"
-                        :name="log.operator_name"
-                        :size="32"
-                        :font-size="12"
-                        :show-info="true"
-                        :shadow="false"
-                        auto-load
-                      />
-                    </template>
-                    <div v-else class="system-auto-label">
-                      {{ $t('workflow-designer.detail.systemAuto') }}
-                    </div>
-                    <div class="log-action">
-                      <ElTag
-                        :type="
-                          (actionConfig[log.action]?.type || 'info') as any
-                        "
-                        size="small"
-                      >
-                        {{ actionConfig[log.action]?.label || log.action }}
-                      </ElTag>
-                      <span class="log-time">{{
-                        formatTime(log.sys_create_datetime)
-                      }}</span>
-                    </div>
-                  </div>
-                  <div v-if="log.comment" class="log-comment">
-                    {{ log.comment }}
-                  </div>
-                  <!-- 签名图片 -->
-                  <div
-                    v-if="
-                      log.extra_data?.signature_file_id &&
-                      signatureUrls[log.extra_data.signature_file_id]
-                    "
-                    class="log-signature"
-                  >
-                    <span class="signature-label"
-                      >{{ $t('workflow.pending.signature') }}:</span
-                    >
-                    <ElImage
-                      :src="
-                        signatureUrls[log.extra_data.signature_file_id] || ''
-                      "
-                      :preview-src-list="[
-                        signatureUrls[log.extra_data.signature_file_id] || '',
-                      ]"
-                      fit="contain"
-                      class="signature-image"
-                    />
-                  </div>
-                </div>
-              </ElTimelineItem>
-            </ElTimeline>
-            <ElEmpty
-              v-else
-              :description="$t('workflow-designer.detail.noApprovalRecord')"
-            />
-          </div>
-        </ElScrollbar>
-      </div>
-    </div>
-
-    <ElEmpty v-else :description="$t('workflow-designer.detail.noData')" />
-  </div>
-</template>
-
-<style scoped>
-.progress-tab {
-  height: 100%;
-  padding: 16px;
-}
-
-/* 骨架屏 */
-.progress-skeleton {
-  display: flex;
-  gap: 16px;
-  height: 100%;
-}
-
-.skeleton-left {
-  flex-shrink: 0;
-  width: 360px;
-}
-
-.skeleton-right {
-  flex: 1;
-}
-
-.skeleton-title {
-  padding-bottom: 12px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.skeleton-card {
-  padding: 16px;
-  background: var(--el-bg-color);
-  border-radius: 8px;
-}
-
-.skeleton-row {
-  display: flex;
-  gap: 16px;
-  padding: 10px 0;
-  border-bottom: 1px dashed var(--el-border-color-lighter);
-}
-
-.skeleton-row:last-child {
-  border-bottom: none;
-}
-
-.skeleton-timeline {
-  padding: 16px;
-  background: var(--el-bg-color);
-  border-radius: 8px;
-}
-
-.skeleton-timeline-item {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 24px;
-}
-
-.skeleton-timeline-content {
-  flex: 1;
-}
-
-/* 内容布局 */
-.progress-layout {
-  display: flex;
-  gap: 16px;
-  height: 100%;
-}
-
-.info-panel {
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  gap: 16px;
-  width: 360px;
-}
-
-/* 当前待办区域 */
-.pending-section {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  max-height: 300px;
-}
-
-.pending-scroll {
-  flex: 1;
-  min-height: 0;
-}
-
-/* 流程信息区域 */
-.flow-info-section {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.flow-info-scroll {
-  flex: 1;
-  min-height: 0;
-}
-
-.timeline-panel {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.panel-title {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-bottom: 12px;
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.panel-icon {
-  width: 18px;
-  height: 18px;
-  color: var(--el-color-primary);
-}
-
-/* 流程信息卡片 */
-.info-card {
-  flex: 1;
-  padding: 16px;
-  background: var(--el-bg-color);
-  border-radius: 8px;
-}
-
-.info-row {
-  display: flex;
-  align-items: flex-start;
-  padding: 10px 0;
-  border-bottom: 1px dashed var(--el-border-color-lighter);
-}
-
-.info-row:last-child {
-  border-bottom: none;
-}
-
-.info-label {
-  flex-shrink: 0;
-  width: 80px;
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
-}
-
-.info-value {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-}
-
-.info-value.title-value {
-  font-weight: 500;
-}
-
-.info-value.mono {
-  font-family: monospace;
-  font-size: 12px;
-}
-
-.info-value.highlight {
-  font-weight: 500;
-  color: var(--el-color-primary);
-}
-
-.inline-icon {
-  width: 14px;
-  height: 14px;
-  margin-right: 4px;
-  color: var(--el-text-color-secondary);
-}
-
-/* 审批记录时间线 */
-.timeline-content {
-  flex: 1;
-  padding: 16px;
-  overflow: auto;
-  border-radius: 8px;
-}
-
-/* 时间线圆点 */
-.timeline-dot {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.dot-circle {
-  flex-shrink: 0;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-.timeline-dot.primary .dot-circle {
-  background: var(--el-color-primary);
-}
-
-.timeline-dot.success .dot-circle {
-  background: var(--el-color-success);
-}
-
-.timeline-dot.danger .dot-circle {
-  background: var(--el-color-danger);
-}
-
-.timeline-dot.warning .dot-circle {
-  background: var(--el-color-warning);
-}
-
-.timeline-dot.info .dot-circle {
-  background: var(--el-color-info);
-}
-
-.dot-node-name {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.log-card {
-  padding: 14px 14px;
-  margin-left: 60px;
-  background: var(--el-bg-color);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 6px;
-}
-
-.log-header {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-}
-
-.system-auto-label {
-  display: flex;
-  align-items: center;
-  height: 32px;
-  padding: 0 8px;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  background: var(--el-fill-color-light);
-  border-radius: 4px;
-}
-
-.log-action {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.log-time {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.log-comment {
-  padding: 8px 10px;
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--el-text-color-regular);
-  background: var(--el-fill-color-lighter);
-  border-radius: 4px;
-}
-
-/* 签名图片 */
-.log-signature {
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
-  margin-top: 8px;
-  padding: 8px;
-  background: var(--el-fill-color-lighter);
-  border-radius: 4px;
-}
-
-.signature-label {
-  flex-shrink: 0;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.signature-image {
-  max-width: 120px;
-  max-height: 60px;
-  border-radius: 4px;
-  background: #fff;
-}
-
-/* 当前待办 */
-.pending-groups {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 8px;
-  background: var(--el-bg-color);
-  border-radius: 8px;
-}
-
-.pending-group {
-  padding: 10px 12px;
-  background: var(--el-bg-color);
-  border-radius: 6px;
-}
-
-.group-header {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  padding-bottom: 8px;
-  margin-bottom: 10px;
-  border-bottom: 1px dashed var(--el-border-color-lighter);
-}
-
-.group-node {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-}
-
-.group-users {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-
-.pending-user {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  align-items: center;
-}
-
-.user-status {
-  position: absolute;
-  top: -4px;
-  right: -8px;
-  transform: scale(0.8);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/workflow/index.ts b/web/apps/web-ele/src/components/workflow/index.ts
deleted file mode 100644
index 9f8a788..0000000
--- a/web/apps/web-ele/src/components/workflow/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as DocumentPreviewDialog } from './DocumentPreviewDialog.vue';
-export { default as InstanceDetailPanel } from './detial/InstanceDetailPanel.vue';
diff --git a/web/apps/web-ele/src/components/zq-draw/DrawPreview.vue b/web/apps/web-ele/src/components/zq-draw/DrawPreview.vue
deleted file mode 100644
index 085987a..0000000
--- a/web/apps/web-ele/src/components/zq-draw/DrawPreview.vue
+++ /dev/null
@@ -1,140 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, watch, nextTick } from 'vue';
-
-import type { DrawData, DrawElement, AppState, BinaryFiles } from './types';
-import type { NormalizedZoomValue } from './types';
-import { getCommonBounds } from './elements/bounds';
-import { renderStaticScene } from './core/renderer/static-scene';
-import { loadDrawFonts } from './fonts';
-
-const props = withDefaults(
-  defineProps<{
-    data: DrawData;
-    width: number;
-    height: number;
-  }>(),
-  {
-    width: 800,
-    height: 450,
-  },
-);
-
-const canvasRef = ref<HTMLCanvasElement>();
-const containerRef = ref<HTMLDivElement>();
-const imageCache = new Map<string, HTMLImageElement>();
-
-function buildImageCache(files: BinaryFiles): Promise<void> {
-  const promises: Promise<void>[] = [];
-  for (const [id, file] of Object.entries(files)) {
-    if (imageCache.has(id)) continue;
-    promises.push(
-      new Promise<void>((resolve) => {
-        const img = new Image();
-        img.onload = () => {
-          imageCache.set(id, img);
-          resolve();
-        };
-        img.onerror = () => resolve();
-        img.src = file.dataURL;
-      }),
-    );
-  }
-  return Promise.all(promises).then(() => {});
-}
-
-function render() {
-  const canvas = canvasRef.value;
-  if (!canvas || !props.data) return;
-
-  const elements = (props.data.elements || []).filter(
-    (el) => !el.isDeleted,
-  ) as DrawElement[];
-  if (elements.length === 0) return;
-
-  const [x1, y1, x2, y2] = getCommonBounds(elements);
-  const contentWidth = x2 - x1;
-  const contentHeight = y2 - y1;
-  if (contentWidth <= 0 || contentHeight <= 0) return;
-
-  const displayWidth = props.width;
-  const displayHeight = props.height;
-
-  const padding = 20;
-  const zoom = Math.min(
-    displayWidth / (contentWidth + padding * 2),
-    displayHeight / (contentHeight + padding * 2),
-  );
-
-  const scrollX = -x1 + padding + (displayWidth / zoom - contentWidth - padding * 2) / 2;
-  const scrollY = -y1 + padding + (displayHeight / zoom - contentHeight - padding * 2) / 2;
-
-  const appState: AppState = {
-    viewBackgroundColor:
-      props.data.appState?.viewBackgroundColor || 'transparent',
-    zoom: { value: zoom as NormalizedZoomValue },
-    scrollX,
-    scrollY,
-    width: displayWidth,
-    height: displayHeight,
-    offsetTop: 0,
-    offsetLeft: 0,
-    theme: props.data.appState?.theme || 'light',
-    gridModeEnabled: false,
-    gridSize: 20,
-    gridStep: 5,
-    frameRendering: { enabled: true, name: true, outline: true, clip: true },
-    exportBackground: true,
-    exportScale: 2,
-    exportWithDarkMode: false,
-  } as AppState;
-
-  renderStaticScene(
-    canvas,
-    elements,
-    appState,
-    props.data.files || {},
-    imageCache,
-  );
-}
-
-async function doRender() {
-  if (props.data?.files) {
-    await buildImageCache(props.data.files);
-  }
-  await nextTick();
-  render();
-}
-
-onMounted(async () => {
-  await loadDrawFonts();
-  await doRender();
-});
-
-watch(
-  () => [props.data, props.width, props.height],
-  () => doRender(),
-  { deep: true },
-);
-
-defineExpose({ render: doRender });
-</script>
-
-<template>
-  <div
-    ref="containerRef"
-    class="draw-preview"
-    :style="{ width: `${width}px`, height: `${height}px` }"
-  >
-    <canvas ref="canvasRef" class="draw-preview__canvas" />
-  </div>
-</template>
-
-<style scoped>
-.draw-preview {
-  overflow: hidden;
-}
-
-.draw-preview__canvas {
-  display: block;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-draw/ZqDraw.vue b/web/apps/web-ele/src/components/zq-draw/ZqDraw.vue
deleted file mode 100644
index 50a15bf..0000000
--- a/web/apps/web-ele/src/components/zq-draw/ZqDraw.vue
+++ /dev/null
@@ -1,397 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import type { DrawData, DrawProps } from './types';
-import { useDrawStore } from './store/draw-store';
-import { useDrawEngine } from './composables/use-draw-engine';
-import { useKeyboard } from './composables/use-keyboard';
-import DrawCanvas from './components/DrawCanvas.vue';
-import DrawToolbar from './components/DrawToolbar.vue';
-import ZoomControls from './components/ZoomControls.vue';
-import UndoRedoControls from './components/UndoRedoControls.vue';
-import TextEditor from './components/TextEditor.vue';
-import PropertyPanel from './components/PropertyPanel.vue';
-import ContextMenu from './components/ContextMenu.vue';
-import HyperlinkPopup from './components/HyperlinkPopup.vue';
-import StatsPanel from './components/StatsPanel.vue';
-import MainMenu from './components/MainMenu.vue';
-import { $t } from '@vben/locales';
-import { Magnet, BarChart, Minimize2 } from '@vben/icons';
-import { exportToBlob } from './data/export-canvas';
-import { exportToSvgString } from './data/export-svg';
-import { serializeAsJSON } from './data/json';
-import { loadDrawFonts } from './fonts';
-
-const contextMenuRef = ref<InstanceType<typeof ContextMenu> | null>(null);
-
-function onContextMenu(e: MouseEvent) {
-  e.preventDefault();
-  contextMenuRef.value?.show(e);
-}
-
-const props = withDefaults(defineProps<DrawProps>(), {
-  readonly: false,
-  width: '100%',
-  height: '100%',
-});
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', data: DrawData): void;
-  (e: 'change', elements: any[], appState: any): void;
-  (e: 'save', data: DrawData): void;
-}>();
-
-const store = useDrawStore();
-
-useDrawEngine({
-  initialData: props.modelValue ?? null,
-  readonly: props.readonly,
-});
-
-useKeyboard();
-
-loadDrawFonts().then(() => {
-  store.requestRender();
-});
-
-// sync props
-watch(
-  () => props.theme,
-  (val) => {
-    if (val) store.theme = val;
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.gridMode,
-  (val) => {
-    if (val !== undefined) store.gridModeEnabled = val;
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.zenMode,
-  (val) => {
-    if (val !== undefined) store.zenModeEnabled = val;
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.readonly,
-  (val) => {
-    store.viewModeEnabled = !!val;
-    store.requestRender();
-  },
-);
-
-// watch model value changes from outside
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (val) {
-      store.loadDrawData(val);
-    }
-  },
-);
-
-// emit changes
-watch(
-  () => store.sceneVersion,
-  () => {
-    const data = store.getDrawData();
-    emit('update:modelValue', data);
-    emit('change', [...data.elements], data.appState);
-  },
-);
-
-const containerStyle = ref({
-  width: typeof props.width === 'number' ? `${props.width}px` : props.width,
-  height: typeof props.height === 'number' ? `${props.height}px` : props.height,
-});
-
-// Exposed API
-function getJSON(): string {
-  return serializeAsJSON(
-    store.scene.getElements(),
-    store.getAppState(),
-    store.files,
-  );
-}
-
-async function getThumbnail(
-  opts: { scale?: number; maxWidth?: number } = {},
-): Promise<string> {
-  const blob = await exportToBlob(
-    store.scene.getNonDeletedElements(),
-    store.getAppState(),
-    store.files,
-    store.imageCache,
-    { scale: opts.scale ?? 1 },
-  );
-  return URL.createObjectURL(blob);
-}
-
-function save(): void {
-  const data = store.getDrawData();
-  emit('save', data);
-}
-
-function getElements() {
-  return store.scene.getNonDeletedElements();
-}
-
-function getDrawData(): DrawData {
-  return store.getDrawData();
-}
-
-async function exportToPng(
-  opts: { background?: boolean; scale?: number; darkMode?: boolean } = {},
-): Promise<Blob> {
-  const appState = store.getAppState();
-  const background = opts.background ?? appState.exportBackground;
-  const scale = opts.scale ?? appState.exportScale;
-  if (opts.darkMode ?? appState.exportWithDarkMode) {
-    appState.viewBackgroundColor = '#121212';
-  }
-  return exportToBlob(
-    store.scene.getNonDeletedElements(),
-    appState,
-    store.files,
-    store.imageCache,
-    { background, scale },
-  );
-}
-
-function exportToSvg(
-  opts: { background?: boolean } = {},
-): string {
-  const appState = store.getAppState();
-  const background = opts.background ?? appState.exportBackground;
-  return exportToSvgString(
-    store.scene.getNonDeletedElements(),
-    appState,
-    store.files,
-    { background },
-  );
-}
-
-async function copyAsPng(
-  opts: { background?: boolean; scale?: number } = {},
-): Promise<void> {
-  const blob = await exportToPng(opts);
-  await navigator.clipboard.write([
-    new ClipboardItem({ 'image/png': blob }),
-  ]);
-}
-
-async function copyAsSvg(
-  opts: { background?: boolean } = {},
-): Promise<void> {
-  const svgStr = exportToSvg(opts);
-  await navigator.clipboard.writeText(svgStr);
-}
-
-defineExpose({
-  getJSON,
-  getThumbnail,
-  save,
-  getElements,
-  getDrawData,
-  exportToPng,
-  exportToSvg,
-  copyAsPng,
-  copyAsSvg,
-  store,
-});
-</script>
-
-<template>
-  <div class="zq-draw" :style="containerStyle" @contextmenu="onContextMenu">
-    <DrawCanvas />
-
-    <TextEditor />
-    <PropertyPanel
-      :class="{ 'zq-draw-zen-hidden': store.zenModeEnabled }"
-    />
-    <HyperlinkPopup />
-    <ContextMenu ref="contextMenuRef" />
-    <StatsPanel
-      :class="{ 'zq-draw-zen-hidden': store.zenModeEnabled }"
-    />
-
-    <template v-if="!props.readonly">
-      <div
-        class="zq-draw-top-toolbar"
-        :class="{ 'zq-draw-zen-hidden': store.zenModeEnabled }"
-      >
-        <DrawToolbar />
-      </div>
-
-      <div
-        class="zq-draw-top-left"
-        :class="{ 'zq-draw-zen-hidden': store.zenModeEnabled }"
-      >
-        <MainMenu />
-      </div>
-
-      <div
-        class="zq-draw-bottom-left"
-        :class="{ 'zq-draw-zen-hidden': store.zenModeEnabled }"
-      >
-        <UndoRedoControls />
-        <ZoomControls />
-        <div class="zq-draw-toggle-group">
-          <button
-            class="zq-draw-toggle-btn"
-            :class="{ 'is-active': store.objectsSnapModeEnabled }"
-            :title="$t('draw.action.toggleSnap') + ' (Alt+S)'"
-            @click="store.objectsSnapModeEnabled = !store.objectsSnapModeEnabled"
-          >
-            <Magnet class="zq-draw-toggle-icon" />
-          </button>
-          <button
-            class="zq-draw-toggle-btn"
-            :class="{ 'is-active': store.showStats }"
-            :title="$t('draw.action.toggleStats') + ' (Alt+I)'"
-            @click="store.showStats = !store.showStats"
-          >
-            <BarChart class="zq-draw-toggle-icon" />
-          </button>
-        </div>
-      </div>
-    </template>
-
-    <template v-else>
-      <div class="zq-draw-bottom-left">
-        <ZoomControls />
-      </div>
-    </template>
-
-    <!-- Zen Mode exit hint -->
-    <div
-      v-if="store.zenModeEnabled && !props.readonly"
-      class="zq-draw-zen-exit"
-      :title="$t('draw.action.toggleZenMode') + ' (Alt+Z)'"
-      @click="store.zenModeEnabled = false"
-    >
-      <Minimize2 class="h-4 w-4" />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.zq-draw {
-  position: relative;
-  overflow: hidden;
-  background: var(--el-bg-color);
-}
-
-.zq-draw-top-toolbar {
-  position: absolute;
-  top: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
-}
-
-.zq-draw-top-left {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  z-index: 10;
-}
-
-.zq-draw-bottom-left {
-  position: absolute;
-  bottom: 12px;
-  left: 12px;
-  z-index: 10;
-  display: flex;
-  gap: 8px;
-  align-items: flex-end;
-}
-
-.zq-draw-toggle-group {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-}
-
-.zq-draw-toggle-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-  transition: all 0.15s;
-
-  &:hover {
-    background: var(--el-fill-color-light);
-  }
-
-  &.is-active {
-    background: var(--el-color-primary-light-9);
-    color: var(--el-color-primary);
-  }
-}
-
-.zq-draw-toggle-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.zq-draw-zen-hidden {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(8px);
-  transition:
-    opacity 0.25s ease,
-    transform 0.25s ease;
-}
-
-.zq-draw-top-toolbar,
-.zq-draw-top-left,
-.zq-draw-bottom-left,
-.zq-draw-property-panel {
-  transition:
-    opacity 0.25s ease,
-    transform 0.25s ease;
-}
-
-.zq-draw-zen-exit {
-  position: absolute;
-  bottom: 12px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-  opacity: 0.15;
-  transition: opacity 0.2s ease;
-
-  &:hover {
-    opacity: 1;
-    box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
-  }
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/ContextMenu.vue b/web/apps/web-ele/src/components/zq-draw/components/ContextMenu.vue
deleted file mode 100644
index 6fc0a7e..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/ContextMenu.vue
+++ /dev/null
@@ -1,436 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
-import { useI18n } from '@vben/locales';
-import {
-  Copy,
-  Scissors,
-  Clipboard,
-  Trash2,
-  Layers,
-  Lock,
-  Unlock,
-  Group,
-  Ungroup,
-  FlipHorizontal2,
-  FlipVertical2,
-  Link,
-  ChevronRight,
-  AlignLeft,
-  Paintbrush,
-} from '@vben/icons';
-import { useDrawStore } from '../store/draw-store';
-
-const { t } = useI18n();
-const store = useDrawStore();
-
-const visible = ref(false);
-const menuX = ref(0);
-const menuY = ref(0);
-const expandedSub = ref<string | null>(null);
-
-const hasSelection = computed(() => store.selectedElements.length > 0);
-const isMultiSelect = computed(() => store.selectedElements.length > 1);
-const isLocked = computed(() => store.isSelectedLocked);
-
-const hasGroup = computed(() => {
-  return store.selectedElements.some((el) => el.groupIds.length > 0);
-});
-
-function show(e: MouseEvent) {
-  e.preventDefault();
-  e.stopPropagation();
-  visible.value = true;
-  menuX.value = e.clientX;
-  menuY.value = e.clientY;
-  expandedSub.value = null;
-}
-
-function hide() {
-  visible.value = false;
-  expandedSub.value = null;
-}
-
-function handleAction(action: string) {
-  hide();
-  switch (action) {
-    case 'copy':
-      store.copySelectedElements();
-      break;
-    case 'cut':
-      store.cutSelectedElements();
-      break;
-    case 'paste':
-      store.pasteFromClipboard();
-      break;
-    case 'duplicate':
-      store.duplicateSelectedElements();
-      break;
-    case 'delete':
-      store.deleteSelectedElementsWithBindings();
-      break;
-    case 'selectAll':
-      store.selectAll();
-      break;
-    case 'bringToFront':
-      store.bringToFront();
-      break;
-    case 'sendToBack':
-      store.sendToBack();
-      break;
-    case 'bringForward':
-      store.bringForward();
-      break;
-    case 'sendBackward':
-      store.sendBackward();
-      break;
-    case 'lock':
-      store.lockSelected();
-      break;
-    case 'unlock':
-      store.unlockSelected();
-      break;
-    case 'group':
-      store.groupSelected();
-      break;
-    case 'ungroup':
-      store.ungroupSelected();
-      break;
-    case 'flipH':
-      store.flipSelectedHorizontal();
-      break;
-    case 'flipV':
-      store.flipSelectedVertical();
-      break;
-    case 'addLink':
-      store.showHyperlinkPopup = 'editor';
-      break;
-    case 'alignLeft':
-      store.alignSelected({ position: 'start', axis: 'x' });
-      break;
-    case 'alignCenter':
-      store.alignSelected({ position: 'center', axis: 'x' });
-      break;
-    case 'alignRight':
-      store.alignSelected({ position: 'end', axis: 'x' });
-      break;
-    case 'alignTop':
-      store.alignSelected({ position: 'start', axis: 'y' });
-      break;
-    case 'alignMiddle':
-      store.alignSelected({ position: 'center', axis: 'y' });
-      break;
-    case 'alignBottom':
-      store.alignSelected({ position: 'end', axis: 'y' });
-      break;
-    case 'distributeH':
-      store.distributeSelected({ space: 'between', axis: 'x' });
-      break;
-    case 'distributeV':
-      store.distributeSelected({ space: 'between', axis: 'y' });
-      break;
-    case 'copyStyle':
-      store.copyStyle();
-      break;
-    case 'pasteStyle':
-      store.pasteStyle();
-      break;
-    case 'toggleGrid':
-      store.gridModeEnabled = !store.gridModeEnabled;
-      store.requestRender();
-      break;
-  }
-}
-
-function onDocumentClick() {
-  if (visible.value) hide();
-}
-
-onMounted(() => {
-  document.addEventListener('click', onDocumentClick);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener('click', onDocumentClick);
-});
-
-defineExpose({ show });
-</script>
-
-<template>
-  <Teleport to="body">
-    <div
-      v-if="visible"
-      class="fixed z-[9999] min-w-48 rounded-lg border border-border bg-popover py-1 text-sm text-popover-foreground shadow-lg"
-      :style="{ left: `${menuX}px`, top: `${menuY}px` }"
-      @click.stop
-      @contextmenu.prevent
-    >
-      <!-- With selection -->
-      <template v-if="hasSelection">
-        <button class="menu-item" @click="handleAction('copy')">
-          <Copy class="menu-icon" />
-          {{ t('draw.menu.copy') }}
-          <span class="menu-shortcut">Ctrl+C</span>
-        </button>
-        <button class="menu-item" @click="handleAction('cut')">
-          <Scissors class="menu-icon" />
-          {{ t('draw.menu.cut') }}
-          <span class="menu-shortcut">Ctrl+X</span>
-        </button>
-        <button class="menu-item" @click="handleAction('paste')">
-          <Clipboard class="menu-icon" />
-          {{ t('draw.menu.paste') }}
-          <span class="menu-shortcut">Ctrl+V</span>
-        </button>
-        <button class="menu-item" @click="handleAction('duplicate')">
-          <Copy class="menu-icon" />
-          {{ t('draw.menu.duplicate') }}
-          <span class="menu-shortcut">Ctrl+D</span>
-        </button>
-
-        <div class="menu-separator" />
-
-        <button class="menu-item" @click="handleAction('copyStyle')">
-          <Paintbrush class="menu-icon" />
-          {{ t('draw.menu.copyStyle') }}
-          <span class="menu-shortcut">Ctrl+Alt+C</span>
-        </button>
-        <button
-          class="menu-item"
-          :class="{ 'opacity-50 pointer-events-none': !store.copiedStyle }"
-          @click="handleAction('pasteStyle')"
-        >
-          <Paintbrush class="menu-icon" />
-          {{ t('draw.menu.pasteStyle') }}
-          <span class="menu-shortcut">Ctrl+Alt+V</span>
-        </button>
-
-        <div class="menu-separator" />
-
-        <!-- Layer submenu -->
-        <div
-          class="menu-item-sub"
-          @mouseenter="expandedSub = 'layer'"
-          @mouseleave="expandedSub = null"
-        >
-          <button class="menu-item w-full">
-            <Layers class="menu-icon" />
-            {{ t('draw.menu.layer') }}
-            <ChevronRight class="ml-auto h-3.5 w-3.5" />
-          </button>
-          <div v-if="expandedSub === 'layer'" class="submenu">
-            <button class="menu-item" @click="handleAction('bringToFront')">
-              {{ t('draw.menu.bringToFront') }}
-              <span class="menu-shortcut">Ctrl+Shift+]</span>
-            </button>
-            <button class="menu-item" @click="handleAction('bringForward')">
-              {{ t('draw.menu.bringForward') }}
-              <span class="menu-shortcut">Ctrl+]</span>
-            </button>
-            <button class="menu-item" @click="handleAction('sendBackward')">
-              {{ t('draw.menu.sendBackward') }}
-              <span class="menu-shortcut">Ctrl+[</span>
-            </button>
-            <button class="menu-item" @click="handleAction('sendToBack')">
-              {{ t('draw.menu.sendToBack') }}
-              <span class="menu-shortcut">Ctrl+Shift+[</span>
-            </button>
-          </div>
-        </div>
-
-        <!-- Flip submenu -->
-        <div
-          class="menu-item-sub"
-          @mouseenter="expandedSub = 'flip'"
-          @mouseleave="expandedSub = null"
-        >
-          <button class="menu-item w-full">
-            <FlipHorizontal2 class="menu-icon" />
-            {{ t('draw.menu.flip') }}
-            <ChevronRight class="ml-auto h-3.5 w-3.5" />
-          </button>
-          <div v-if="expandedSub === 'flip'" class="submenu">
-            <button class="menu-item" @click="handleAction('flipH')">
-              <FlipHorizontal2 class="menu-icon" />
-              {{ t('draw.menu.flipH') }}
-            </button>
-            <button class="menu-item" @click="handleAction('flipV')">
-              <FlipVertical2 class="menu-icon" />
-              {{ t('draw.menu.flipV') }}
-            </button>
-          </div>
-        </div>
-
-        <!-- Align submenu (multi-select only) -->
-        <div
-          v-if="isMultiSelect"
-          class="menu-item-sub"
-          @mouseenter="expandedSub = 'align'"
-          @mouseleave="expandedSub = null"
-        >
-          <button class="menu-item w-full">
-            <AlignLeft class="menu-icon" />
-            {{ t('draw.menu.align') }}
-            <ChevronRight class="ml-auto h-3.5 w-3.5" />
-          </button>
-          <div v-if="expandedSub === 'align'" class="submenu">
-            <button class="menu-item" @click="handleAction('alignLeft')">
-              {{ t('draw.menu.alignLeft') }}
-            </button>
-            <button class="menu-item" @click="handleAction('alignCenter')">
-              {{ t('draw.menu.alignCenter') }}
-            </button>
-            <button class="menu-item" @click="handleAction('alignRight')">
-              {{ t('draw.menu.alignRight') }}
-            </button>
-            <div class="menu-separator" />
-            <button class="menu-item" @click="handleAction('alignTop')">
-              {{ t('draw.menu.alignTop') }}
-            </button>
-            <button class="menu-item" @click="handleAction('alignMiddle')">
-              {{ t('draw.menu.alignMiddle') }}
-            </button>
-            <button class="menu-item" @click="handleAction('alignBottom')">
-              {{ t('draw.menu.alignBottom') }}
-            </button>
-            <div class="menu-separator" />
-            <button class="menu-item" @click="handleAction('distributeH')">
-              {{ t('draw.menu.distributeH') }}
-            </button>
-            <button class="menu-item" @click="handleAction('distributeV')">
-              {{ t('draw.menu.distributeV') }}
-            </button>
-          </div>
-        </div>
-
-        <div class="menu-separator" />
-
-        <!-- Group / Ungroup -->
-        <button
-          v-if="isMultiSelect"
-          class="menu-item"
-          @click="handleAction('group')"
-        >
-          <Group class="menu-icon" />
-          {{ t('draw.menu.group') }}
-          <span class="menu-shortcut">Ctrl+G</span>
-        </button>
-        <button
-          v-if="hasGroup"
-          class="menu-item"
-          @click="handleAction('ungroup')"
-        >
-          <Ungroup class="menu-icon" />
-          {{ t('draw.menu.ungroup') }}
-          <span class="menu-shortcut">Ctrl+Shift+G</span>
-        </button>
-
-        <!-- Lock / Unlock -->
-        <button
-          v-if="!isLocked"
-          class="menu-item"
-          @click="handleAction('lock')"
-        >
-          <Lock class="menu-icon" />
-          {{ t('draw.menu.lock') }}
-          <span class="menu-shortcut">Ctrl+L</span>
-        </button>
-        <button
-          v-if="isLocked"
-          class="menu-item"
-          @click="handleAction('unlock')"
-        >
-          <Unlock class="menu-icon" />
-          {{ t('draw.menu.unlock') }}
-        </button>
-
-        <!-- Hyperlink -->
-        <button class="menu-item" @click="handleAction('addLink')">
-          <Link class="menu-icon" />
-          {{ t('draw.menu.addLink') }}
-          <span class="menu-shortcut">Ctrl+K</span>
-        </button>
-
-        <div class="menu-separator" />
-
-        <button class="menu-item text-destructive" @click="handleAction('delete')">
-          <Trash2 class="menu-icon" />
-          {{ t('draw.menu.delete') }}
-          <span class="menu-shortcut">Del</span>
-        </button>
-      </template>
-
-      <!-- No selection (canvas context menu) -->
-      <template v-else>
-        <button class="menu-item" @click="handleAction('paste')">
-          <Clipboard class="menu-icon" />
-          {{ t('draw.menu.paste') }}
-          <span class="menu-shortcut">Ctrl+V</span>
-        </button>
-        <button class="menu-item" @click="handleAction('selectAll')">
-          {{ t('draw.menu.selectAll') }}
-          <span class="menu-shortcut">Ctrl+A</span>
-        </button>
-        <div class="menu-separator" />
-        <button class="menu-item" @click="handleAction('toggleGrid')">
-          {{ t('draw.menu.toggleGrid') }}
-        </button>
-      </template>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-.menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 12px;
-  text-align: left;
-  cursor: pointer;
-  border: none;
-  background: none;
-  font-size: 13px;
-  white-space: nowrap;
-}
-
-.menu-item:hover {
-  background-color: hsl(var(--accent));
-}
-
-.menu-icon {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-}
-
-.menu-shortcut {
-  margin-left: auto;
-  font-size: 11px;
-  opacity: 0.5;
-}
-
-.menu-separator {
-  height: 1px;
-  margin: 4px 0;
-  background-color: hsl(var(--border));
-}
-
-.menu-item-sub {
-  position: relative;
-}
-
-.submenu {
-  position: absolute;
-  left: 100%;
-  top: 0;
-  min-width: 180px;
-  border-radius: 8px;
-  border: 1px solid hsl(var(--border));
-  background-color: hsl(var(--popover));
-  padding: 4px 0;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
-  z-index: 1;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/DrawCanvas.vue b/web/apps/web-ele/src/components/zq-draw/components/DrawCanvas.vue
deleted file mode 100644
index e9f0deb..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/DrawCanvas.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
-import { useDrawStore } from '../store/draw-store';
-import { useCanvasResize } from '../composables/use-canvas-resize';
-import { useScrollWheel } from '../composables/use-scroll-wheel';
-import { usePointerEvents } from '../composables/use-pointer-events';
-
-const containerRef = ref<HTMLElement | null>(null);
-const staticCanvasRef = ref<HTMLCanvasElement | null>(null);
-const interactiveCanvasRef = ref<HTMLCanvasElement | null>(null);
-
-const store = useDrawStore();
-
-useCanvasResize(containerRef);
-useScrollWheel(containerRef);
-const pointer = usePointerEvents(containerRef);
-
-onMounted(() => {
-  store.staticCanvas = staticCanvasRef.value;
-  store.interactiveCanvas = interactiveCanvasRef.value;
-  pointer.attach();
-  store.requestRender();
-});
-
-onBeforeUnmount(() => {
-  pointer.detach();
-});
-
-watch(
-  () => store.sceneVersion,
-  () => {
-    store.requestRender();
-  },
-);
-</script>
-
-<template>
-  <div ref="containerRef" class="zq-draw-canvas-container">
-    <canvas ref="staticCanvasRef" class="zq-draw-static-canvas" />
-    <canvas ref="interactiveCanvasRef" class="zq-draw-interactive-canvas" />
-  </div>
-</template>
-
-<style scoped lang="scss">
-.zq-draw-canvas-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  touch-action: none;
-}
-
-.zq-draw-static-canvas,
-.zq-draw-interactive-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.zq-draw-interactive-canvas {
-  z-index: 1;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/DrawToolbar.vue b/web/apps/web-ele/src/components/zq-draw/components/DrawToolbar.vue
deleted file mode 100644
index 92ccd7a..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/DrawToolbar.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { $t } from '@vben/locales';
-import {
-  MousePointer2,
-  Hand,
-  Square,
-  Circle,
-  Diamond,
-  Minus,
-  MoveRight,
-  Pencil,
-  Type,
-  Image,
-  Eraser,
-  Frame,
-} from '@vben/icons';
-import { useDrawStore } from '../store/draw-store';
-import type { ToolType } from '../types';
-
-const store = useDrawStore();
-
-interface ToolItem {
-  type: ToolType;
-  icon: any;
-  labelKey: string;
-  shortcut: string;
-}
-
-const tools: ToolItem[] = [
-  { type: 'selection', icon: MousePointer2, labelKey: 'draw.tool.selection', shortcut: 'V' },
-  { type: 'hand', icon: Hand, labelKey: 'draw.tool.hand', shortcut: 'H' },
-  { type: 'rectangle', icon: Square, labelKey: 'draw.tool.rectangle', shortcut: 'R' },
-  { type: 'ellipse', icon: Circle, labelKey: 'draw.tool.ellipse', shortcut: 'O' },
-  { type: 'diamond', icon: Diamond, labelKey: 'draw.tool.diamond', shortcut: 'D' },
-  { type: 'line', icon: Minus, labelKey: 'draw.tool.line', shortcut: 'L' },
-  { type: 'arrow', icon: MoveRight, labelKey: 'draw.tool.arrow', shortcut: 'A' },
-  { type: 'freedraw', icon: Pencil, labelKey: 'draw.tool.freedraw', shortcut: 'P' },
-  { type: 'text', icon: Type, labelKey: 'draw.tool.text', shortcut: 'T' },
-  { type: 'image', icon: Image, labelKey: 'draw.tool.image', shortcut: 'I' },
-  { type: 'eraser', icon: Eraser, labelKey: 'draw.tool.eraser', shortcut: 'E' },
-  { type: 'frame', icon: Frame, labelKey: 'draw.tool.frame', shortcut: 'F' },
-];
-
-const currentTool = computed(() => store.activeTool.type);
-
-function selectTool(type: ToolType) {
-  store.setActiveTool(type);
-}
-</script>
-
-<template>
-  <div class="zq-draw-toolbar">
-    <div
-      v-for="tool in tools"
-      :key="tool.type"
-      class="zq-draw-toolbar-item"
-      :class="{ 'is-active': currentTool === tool.type }"
-      :title="`${$t(tool.labelKey)} (${tool.shortcut})`"
-      @click="selectTool(tool.type)"
-    >
-      <component :is="tool.icon" class="zq-draw-toolbar-icon" />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.zq-draw-toolbar {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px 8px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 10px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-}
-
-.zq-draw-toolbar-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-  transition: all 0.15s;
-
-  &:hover {
-    background: var(--el-fill-color-light);
-  }
-
-  &.is-active {
-    background: var(--el-color-primary-light-9);
-    color: var(--el-color-primary);
-  }
-}
-
-.zq-draw-toolbar-icon {
-  width: 18px;
-  height: 18px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/HyperlinkPopup.vue b/web/apps/web-ele/src/components/zq-draw/components/HyperlinkPopup.vue
deleted file mode 100644
index 8f8f91f..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/HyperlinkPopup.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue';
-import { useI18n } from '@vben/locales';
-import { ElInput } from 'element-plus';
-import { Link, ExternalLink, Trash2, X } from '@vben/icons';
-import { useDrawStore } from '../store/draw-store';
-
-const { t } = useI18n();
-const store = useDrawStore();
-
-const linkValue = ref('');
-const inputRef = ref<InstanceType<typeof ElInput> | null>(null);
-
-const isVisible = computed(() => store.showHyperlinkPopup !== false);
-const isEditor = computed(() => store.showHyperlinkPopup === 'editor');
-const isInfo = computed(() => store.showHyperlinkPopup === 'info');
-
-const selectedElement = computed(() => {
-  if (store.selectedElements.length !== 1) return null;
-  return store.selectedElements[0]!;
-});
-
-const currentLink = computed(() => selectedElement.value?.link || '');
-
-watch(
-  () => store.showHyperlinkPopup,
-  (val) => {
-    if (val === 'editor') {
-      linkValue.value = currentLink.value;
-      nextTick(() => {
-        inputRef.value?.focus();
-      });
-    }
-  },
-);
-
-function saveLink() {
-  if (!selectedElement.value) return;
-  const link = linkValue.value.trim() || null;
-  store.setElementLink(selectedElement.value.id, link);
-  store.showHyperlinkPopup = link ? 'info' : false;
-}
-
-function removeLink() {
-  if (!selectedElement.value) return;
-  store.setElementLink(selectedElement.value.id, null);
-  store.showHyperlinkPopup = false;
-}
-
-function openLink() {
-  if (currentLink.value) {
-    window.open(currentLink.value, '_blank', 'noopener,noreferrer');
-  }
-}
-
-function editLink() {
-  store.showHyperlinkPopup = 'editor';
-}
-
-function close() {
-  store.showHyperlinkPopup = false;
-}
-
-function onKeyDown(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    e.preventDefault();
-    saveLink();
-  }
-  if (e.key === 'Escape') {
-    e.preventDefault();
-    close();
-  }
-}
-</script>
-
-<template>
-  <div
-    v-if="isVisible && selectedElement"
-    class="absolute left-1/2 top-2 z-30 -translate-x-1/2 rounded-lg border border-border bg-card p-3 shadow-lg"
-    @click.stop
-  >
-    <!-- Editor mode -->
-    <div v-if="isEditor" class="flex items-center gap-2">
-      <Link class="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-      <ElInput
-        ref="inputRef"
-        v-model="linkValue"
-        size="small"
-        :placeholder="t('draw.property.linkPlaceholder')"
-        class="w-60"
-        @keydown="onKeyDown"
-      />
-      <button
-        class="rounded-md bg-primary px-3 py-1 text-xs text-primary-foreground hover:opacity-90"
-        @click="saveLink"
-      >
-        OK
-      </button>
-      <button
-        class="rounded-md p-1 text-muted-foreground hover:bg-accent"
-        @click="close"
-      >
-        <X class="h-4 w-4" />
-      </button>
-    </div>
-
-    <!-- Info mode -->
-    <div v-if="isInfo" class="flex items-center gap-2">
-      <Link class="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-      <a
-        :href="currentLink"
-        class="max-w-60 truncate text-sm text-primary underline"
-        target="_blank"
-        rel="noopener noreferrer"
-        @click.prevent="openLink"
-      >
-        {{ currentLink }}
-      </a>
-      <button
-        class="rounded-md p-1 text-muted-foreground hover:bg-accent"
-        :title="t('draw.menu.editLink')"
-        @click="editLink"
-      >
-        <ExternalLink class="h-3.5 w-3.5" />
-      </button>
-      <button
-        class="rounded-md p-1 text-destructive hover:bg-accent"
-        :title="t('draw.menu.removeLink')"
-        @click="removeLink"
-      >
-        <Trash2 class="h-3.5 w-3.5" />
-      </button>
-      <button
-        class="rounded-md p-1 text-muted-foreground hover:bg-accent"
-        @click="close"
-      >
-        <X class="h-4 w-4" />
-      </button>
-    </div>
-  </div>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/MainMenu.vue b/web/apps/web-ele/src/components/zq-draw/components/MainMenu.vue
deleted file mode 100644
index 801ccba..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/MainMenu.vue
+++ /dev/null
@@ -1,336 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue';
-import { $t } from '@vben/locales';
-import {
-  Menu,
-  FolderOpen,
-  Save,
-  Download,
-  FileImage,
-  FileJson,
-  FileCode,
-  Copy,
-  ChevronRight,
-} from '@vben/icons';
-import { useDrawStore } from '../store/draw-store';
-import { serializeAsJSON, deserializeFromJSON } from '../data/json';
-import { exportToBlob } from '../data/export-canvas';
-import { exportToSvgString } from '../data/export-svg';
-
-const store = useDrawStore();
-
-const exportSubOpen = ref(false);
-const menuRef = ref<HTMLElement | null>(null);
-
-function toggleMenu() {
-  store.mainMenuOpen = !store.mainMenuOpen;
-  if (!store.mainMenuOpen) {
-    exportSubOpen.value = false;
-  }
-}
-
-function closeMenu() {
-  store.mainMenuOpen = false;
-  exportSubOpen.value = false;
-}
-
-function onClickOutside(e: MouseEvent) {
-  if (menuRef.value && !menuRef.value.contains(e.target as Node)) {
-    closeMenu();
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('mousedown', onClickOutside);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener('mousedown', onClickOutside);
-});
-
-function handleOpen() {
-  closeMenu();
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.accept = '.json,.excalidraw';
-  input.onchange = async () => {
-    const file = input.files?.[0];
-    if (!file) return;
-    const text = await file.text();
-    const data = deserializeFromJSON(text);
-    if (data) {
-      store.loadDrawData(data);
-    }
-  };
-  input.click();
-}
-
-function handleSaveTo() {
-  closeMenu();
-  const json = serializeAsJSON(
-    store.scene.getElements(),
-    store.getAppState(),
-    store.files,
-  );
-  const blob = new Blob([json], { type: 'application/json' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `${store.getAppState().name || 'drawing'}.zqdraw.json`;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-async function handleExportPng() {
-  closeMenu();
-  const appState = store.getAppState();
-  const blob = await exportToBlob(
-    store.scene.getNonDeletedElements(),
-    appState,
-    store.files,
-    store.imageCache,
-    { scale: appState.exportScale, background: appState.exportBackground },
-  );
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `${appState.name || 'drawing'}.png`;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-function handleExportSvg() {
-  closeMenu();
-  const appState = store.getAppState();
-  const svgStr = exportToSvgString(
-    store.scene.getNonDeletedElements(),
-    appState,
-    store.files,
-    { background: appState.exportBackground },
-  );
-  const blob = new Blob([svgStr], { type: 'image/svg+xml' });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `${appState.name || 'drawing'}.svg`;
-  a.click();
-  URL.revokeObjectURL(url);
-}
-
-function handleExportJson() {
-  closeMenu();
-  handleSaveTo();
-}
-
-async function handleCopyPng() {
-  closeMenu();
-  const appState = store.getAppState();
-  const blob = await exportToBlob(
-    store.scene.getNonDeletedElements(),
-    appState,
-    store.files,
-    store.imageCache,
-    { scale: appState.exportScale, background: appState.exportBackground },
-  );
-  await navigator.clipboard.write([
-    new ClipboardItem({ 'image/png': blob }),
-  ]);
-}
-
-async function handleCopySvg() {
-  closeMenu();
-  const appState = store.getAppState();
-  const svgStr = exportToSvgString(
-    store.scene.getNonDeletedElements(),
-    appState,
-    store.files,
-    { background: appState.exportBackground },
-  );
-  await navigator.clipboard.writeText(svgStr);
-}
-</script>
-
-<template>
-  <div ref="menuRef" class="zq-draw-main-menu">
-    <button
-      class="zq-draw-main-menu-trigger"
-      :title="$t('draw.menu.openFile')"
-      @click="toggleMenu"
-    >
-      <Menu class="h-[18px] w-[18px]" />
-    </button>
-
-    <Transition name="zq-menu-fade">
-      <div v-if="store.mainMenuOpen" class="zq-draw-main-menu-dropdown">
-        <button class="zq-menu-item" @click="handleOpen">
-          <FolderOpen class="zq-menu-item-icon" />
-          <span>{{ $t('draw.menu.openFile') }}</span>
-          <span class="zq-menu-item-shortcut">Ctrl+O</span>
-        </button>
-
-        <button class="zq-menu-item" @click="handleSaveTo">
-          <Save class="zq-menu-item-icon" />
-          <span>{{ $t('draw.menu.saveTo') }}</span>
-          <span class="zq-menu-item-shortcut">Ctrl+Shift+S</span>
-        </button>
-
-        <div class="zq-menu-separator" />
-
-        <div
-          class="zq-menu-sub"
-          @mouseenter="exportSubOpen = true"
-          @mouseleave="exportSubOpen = false"
-        >
-          <button class="zq-menu-item">
-            <Download class="zq-menu-item-icon" />
-            <span>{{ $t('draw.menu.export') }}</span>
-            <ChevronRight class="zq-menu-item-arrow" />
-          </button>
-
-          <Transition name="zq-menu-fade">
-            <div v-if="exportSubOpen" class="zq-draw-main-menu-submenu">
-              <button class="zq-menu-item" @click="handleExportPng">
-                <FileImage class="zq-menu-item-icon" />
-                <span>{{ $t('draw.menu.exportPng') }}</span>
-              </button>
-              <button class="zq-menu-item" @click="handleExportSvg">
-                <FileCode class="zq-menu-item-icon" />
-                <span>{{ $t('draw.menu.exportSvg') }}</span>
-              </button>
-              <button class="zq-menu-item" @click="handleExportJson">
-                <FileJson class="zq-menu-item-icon" />
-                <span>{{ $t('draw.menu.exportJson') }}</span>
-              </button>
-
-              <div class="zq-menu-separator" />
-
-              <button class="zq-menu-item" @click="handleCopyPng">
-                <Copy class="zq-menu-item-icon" />
-                <span>{{ $t('draw.menu.exportCopyPng') }}</span>
-              </button>
-              <button class="zq-menu-item" @click="handleCopySvg">
-                <Copy class="zq-menu-item-icon" />
-                <span>{{ $t('draw.menu.exportCopySvg') }}</span>
-              </button>
-            </div>
-          </Transition>
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.zq-draw-main-menu {
-  position: relative;
-}
-
-.zq-draw-main-menu-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-  background: var(--el-bg-color);
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-  transition: all 0.15s;
-
-  &:hover {
-    background: var(--el-fill-color-light);
-  }
-}
-
-.zq-draw-main-menu-dropdown {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  min-width: 220px;
-  padding: 4px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
-  z-index: 100;
-}
-
-.zq-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 8px 12px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--el-text-color-regular);
-  font-size: 13px;
-  cursor: pointer;
-  transition: background 0.15s;
-  white-space: nowrap;
-
-  &:hover {
-    background: var(--el-fill-color-light);
-  }
-}
-
-.zq-menu-item-icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  color: var(--el-text-color-secondary);
-}
-
-.zq-menu-item-shortcut {
-  margin-left: auto;
-  font-size: 12px;
-  color: var(--el-text-color-placeholder);
-}
-
-.zq-menu-item-arrow {
-  width: 14px;
-  height: 14px;
-  margin-left: auto;
-  flex-shrink: 0;
-  color: var(--el-text-color-placeholder);
-}
-
-.zq-menu-separator {
-  height: 1px;
-  margin: 4px 8px;
-  background: var(--el-border-color-lighter);
-}
-
-.zq-menu-sub {
-  position: relative;
-}
-
-.zq-draw-main-menu-submenu {
-  position: absolute;
-  top: -4px;
-  left: calc(100% + 4px);
-  min-width: 200px;
-  padding: 4px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
-  z-index: 101;
-}
-
-.zq-menu-fade-enter-active,
-.zq-menu-fade-leave-active {
-  transition:
-    opacity 0.15s ease,
-    transform 0.15s ease;
-}
-
-.zq-menu-fade-enter-from,
-.zq-menu-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/PropertyPanel.vue b/web/apps/web-ele/src/components/zq-draw/components/PropertyPanel.vue
deleted file mode 100644
index 115ff40..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/PropertyPanel.vue
+++ /dev/null
@@ -1,972 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import { useI18n } from '@vben/locales';
-import { ElSlider } from 'element-plus';
-import {
-  Link,
-  Minus as MinusIcon,
-  Plus as PlusIcon,
-  AlignStartHorizontal,
-  AlignCenterHorizontal,
-  AlignEndHorizontal,
-  AlignStartVertical,
-  AlignCenterVertical,
-  AlignEndVertical,
-  AlignHorizontalSpaceAround,
-  AlignVerticalSpaceAround,
-  ArrowDownToLine,
-  ArrowDown,
-  ArrowUp,
-  ArrowUpToLine,
-  Copy,
-  Trash2,
-} from '@vben/icons';
-import { useDrawStore } from '../store/draw-store';
-import type {
-  FillStyle,
-  StrokeStyle,
-  Arrowhead,
-  DrawLinearElement,
-  DrawArrowElement,
-  DrawTextElement,
-  TextAlign,
-  VerticalAlign,
-} from '../types';
-import {
-  PRESET_STROKE_COLORS,
-  PRESET_BACKGROUND_COLORS,
-  FONT_FAMILY,
-  FONT_METADATA,
-  ROUNDNESS,
-} from '../constants';
-import {
-  FillHachureIcon,
-  FillCrossHatchIcon,
-  FillSolidIcon,
-  FillZigZagIcon,
-  StrokeWidthThinIcon,
-  StrokeWidthBoldIcon,
-  StrokeWidthExtraBoldIcon,
-  StrokeStyleSolidIcon,
-  StrokeStyleDashedIcon,
-  StrokeStyleDottedIcon,
-  SloppinessArchitectIcon,
-  SloppinessArtistIcon,
-  SloppinessCartoonistIcon,
-  EdgeSharpIcon,
-  EdgeRoundIcon,
-  ArrowTypeSharpIcon,
-  ArrowTypeRoundIcon,
-  ArrowTypeElbowIcon,
-  ArrowheadNoneIcon,
-  ArrowheadArrowIcon,
-  ArrowheadTriangleIcon,
-  ArrowheadBarIcon,
-  ArrowheadCircleIcon,
-  ArrowheadDiamondIcon,
-  ArrowheadArrowStartIcon,
-  ArrowheadTriangleStartIcon,
-  ArrowheadBarStartIcon,
-  ArrowheadCircleStartIcon,
-  ArrowheadDiamondStartIcon,
-  ArrowheadNoneStartIcon,
-  FontHandDrawnIcon,
-  FontNormalIcon,
-  FontCodeIcon,
-  TextAlignLeftIcon,
-  TextAlignCenterIcon,
-  TextAlignRightIcon,
-  VerticalAlignTopIcon,
-  VerticalAlignMiddleIcon,
-  VerticalAlignBottomIcon,
-} from './icons/property-icons';
-import {
-  redrawTextBoundingBox,
-  getContainerElement,
-  getBoundTextElement,
-} from '../elements/bound-text';
-
-const { t } = useI18n();
-const store = useDrawStore();
-
-const strokeColorInputRef = ref<HTMLInputElement | null>(null);
-const bgColorInputRef = ref<HTMLInputElement | null>(null);
-
-function openStrokeColorPicker() {
-  strokeColorInputRef.value?.click();
-}
-function onStrokeColorInput(e: Event) {
-  const val = (e.target as HTMLInputElement).value;
-  if (val) strokeColor.value = val;
-}
-function openBgColorPicker() {
-  bgColorInputRef.value?.click();
-}
-function onBgColorInput(e: Event) {
-  const val = (e.target as HTMLInputElement).value;
-  if (val) backgroundColor.value = val;
-}
-
-const isDrawingTool = computed(() => {
-  const t = store.activeTool.type;
-  return ['rectangle', 'ellipse', 'diamond', 'freedraw', 'arrow', 'line'].includes(t);
-});
-
-const showPanel = computed(() => {
-  return !store.viewModeEnabled && !store.mainMenuOpen && (store.selectedElements.length > 0 || isDrawingTool.value);
-});
-
-const isSingleSelect = computed(() => store.selectedElements.length === 1);
-const isMultiSelect = computed(() => store.selectedElements.length > 1);
-
-const primaryElement = computed(() => {
-  if (store.selectedElements.length === 0) return null;
-  return store.selectedElements[0]!;
-});
-
-const activeToolType = computed(() => store.activeTool.type);
-
-const effectiveType = computed(() => {
-  if (primaryElement.value) return primaryElement.value.type;
-  if (isDrawingTool.value) return activeToolType.value;
-  return null;
-});
-
-const hasStrokeColor = computed(() => {
-  if (!effectiveType.value) return false;
-  return ['rectangle', 'ellipse', 'diamond', 'freedraw', 'arrow', 'line', 'text'].includes(effectiveType.value);
-});
-
-const hasBackground = computed(() => {
-  if (!effectiveType.value) return false;
-  return ['rectangle', 'ellipse', 'diamond', 'line', 'freedraw'].includes(effectiveType.value);
-});
-
-const showFillStyle = computed(() => {
-  if (!hasBackground.value) return false;
-  if (primaryElement.value) return primaryElement.value.backgroundColor !== 'transparent';
-  return store.currentItemBackgroundColor !== 'transparent';
-});
-
-const hasStrokeWidth = computed(() => {
-  if (!effectiveType.value) return false;
-  return ['rectangle', 'ellipse', 'diamond', 'freedraw', 'arrow', 'line'].includes(effectiveType.value);
-});
-
-const hasStrokeStyle = computed(() => {
-  if (!effectiveType.value) return false;
-  return ['rectangle', 'ellipse', 'diamond', 'arrow', 'line'].includes(effectiveType.value);
-});
-
-const canChangeRoundness = computed(() => {
-  if (!effectiveType.value) return false;
-  return ['rectangle', 'diamond', 'line', 'arrow', 'image'].includes(effectiveType.value);
-});
-
-const isLinearElement = computed(() => {
-  return effectiveType.value === 'arrow' || effectiveType.value === 'line';
-});
-const isArrowElement = computed(() => effectiveType.value === 'arrow');
-
-const isTextOrHasText = computed(() => {
-  if (!primaryElement.value) return false;
-  if (primaryElement.value.type === 'text') return true;
-  return primaryElement.value.boundElements?.some((b) => b.type === 'text') ?? false;
-});
-
-const textElement = computed((): DrawTextElement | null => {
-  if (!primaryElement.value) return null;
-  if (primaryElement.value.type === 'text') return primaryElement.value as DrawTextElement;
-  const bound = primaryElement.value.boundElements?.find((b) => b.type === 'text');
-  if (bound) {
-    const el = store.scene.getElement(bound.id);
-    if (el && !el.isDeleted && el.type === 'text') return el as DrawTextElement;
-  }
-  return null;
-});
-
-// ---- Property values ----
-const strokeColor = computed({
-  get: () => primaryElement.value?.strokeColor ?? store.currentItemStrokeColor,
-  set: (val: string) => {
-    store.recordHistory();
-    store.currentItemStrokeColor = val;
-    for (const el of store.selectedElements) {
-      store.updateElement(el.id, { strokeColor: val } as any);
-    }
-  },
-});
-
-const backgroundColor = computed({
-  get: () => primaryElement.value?.backgroundColor ?? store.currentItemBackgroundColor,
-  set: (val: string) => {
-    store.recordHistory();
-    store.currentItemBackgroundColor = val;
-    for (const el of store.selectedElements) {
-      store.updateElement(el.id, { backgroundColor: val } as any);
-    }
-  },
-});
-
-const fillStyle = computed({
-  get: () => (primaryElement.value?.fillStyle ?? store.currentItemFillStyle) as FillStyle,
-  set: (val: FillStyle) => {
-    store.recordHistory();
-    store.currentItemFillStyle = val;
-    for (const el of store.selectedElements) {
-      store.updateElement(el.id, { fillStyle: val } as any);
-    }
-  },
-});
-
-const strokeWidth = computed({
-  get: () => primaryElement.value?.strokeWidth ?? store.currentItemStrokeWidth,
-  set: (val: number) => {
-    store.recordHistory();
-    store.currentItemStrokeWidth = val;
-    for (const el of store.selectedElements) {
-      store.updateElement(el.id, { strokeWidth: val } as any);
-    }
-  },
-});
-
-const strokeStyle = computed({
-  get: () => (primaryElement.value?.strokeStyle ?? store.currentItemStrokeStyle) as StrokeStyle,
-  set: (val: StrokeStyle) => {
-    store.recordHistory();
-    store.currentItemStrokeStyle = val;
-    for (const el of store.selectedElements) {
-      store.updateElement(el.id, { strokeStyle: val } as any);
-    }
-  },
-});
-
-const roughness = computed({
-  get: () => primaryElement.value?.roughness ?? store.currentItemRoughness,
-  set: (val: number) => {
-    store.recordHistory();
-    store.currentItemRoughness = val;
-    for (const el of store.selectedElements) {
-      store.updateElement(el.id, { roughness: val } as any);
-    }
-  },
-});
-
-const isRound = computed({
-  get: () => {
-    if (!primaryElement.value) return true;
-    return primaryElement.value.roundness != null;
-  },
-  set: (val: boolean) => {
-    store.recordHistory();
-    for (const el of store.selectedElements) {
-      let roundness = null;
-      if (val) {
-        const isLinear = el.type === 'line' || el.type === 'arrow';
-        roundness = {
-          type: isLinear
-            ? ROUNDNESS.PROPORTIONAL_RADIUS
-            : ROUNDNESS.ADAPTIVE_RADIUS,
-        };
-      }
-      store.updateElement(el.id, { roundness } as any);
-    }
-  },
-});
-
-const opacity = computed({
-  get: () => primaryElement.value?.opacity ?? store.currentItemOpacity,
-  set: (val: number) => {
-    store.recordHistory();
-    store.currentItemOpacity = val;
-    for (const el of store.selectedElements) {
-      store.updateElement(el.id, { opacity: val } as any);
-    }
-  },
-});
-
-const arrowType = computed({
-  get: () => {
-    if (!isArrowElement.value) return 'round';
-    return (primaryElement.value as DrawArrowElement)?.elbowed ? 'elbow' : store.currentItemArrowType;
-  },
-  set: (val: string) => {
-    store.recordHistory();
-    store.currentItemArrowType = val as any;
-    for (const el of store.selectedElements) {
-      if (el.type === 'arrow') {
-        store.updateElement(el.id, { elbowed: val === 'elbow' } as any);
-        if (val === 'elbow') store.updateBindingsAfterMove(el.id);
-      }
-    }
-  },
-});
-
-const startArrowhead = computed({
-  get: () => {
-    if (!isLinearElement.value) return null;
-    return (primaryElement.value as DrawLinearElement)?.startArrowhead ?? null;
-  },
-  set: (val: Arrowhead | null) => {
-    store.recordHistory();
-    store.currentItemStartArrowhead = val;
-    for (const el of store.selectedElements) {
-      if (el.type === 'arrow' || el.type === 'line') {
-        store.updateElement(el.id, { startArrowhead: val } as any);
-      }
-    }
-  },
-});
-
-const endArrowhead = computed({
-  get: () => {
-    if (!isLinearElement.value) return null;
-    return (primaryElement.value as DrawLinearElement)?.endArrowhead ?? null;
-  },
-  set: (val: Arrowhead | null) => {
-    store.recordHistory();
-    store.currentItemEndArrowhead = val;
-    for (const el of store.selectedElements) {
-      if (el.type === 'arrow' || el.type === 'line') {
-        store.updateElement(el.id, { endArrowhead: val } as any);
-      }
-    }
-  },
-});
-
-function updateTextProperty(updates: Partial<DrawTextElement>) {
-  for (const el of store.selectedElements) {
-    if (el.type === 'text') {
-      store.updateElement(el.id, updates as any);
-      const textEl = store.scene.getElement(el.id) as DrawTextElement;
-      if (textEl) {
-        const container = getContainerElement(textEl, store.scene);
-        redrawTextBoundingBox(textEl, container, store.scene);
-      }
-    } else {
-      const boundText = getBoundTextElement(el, store.scene);
-      if (boundText) {
-        store.updateElement(boundText.id, updates as any);
-        const updated = store.scene.getElement(boundText.id) as DrawTextElement;
-        if (updated) redrawTextBoundingBox(updated, el, store.scene);
-      }
-    }
-  }
-  store.requestRender();
-}
-
-const fontFamily = computed({
-  get: () => textElement.value?.fontFamily ?? store.currentItemFontFamily,
-  set: (val: number) => {
-    store.recordHistory();
-    store.currentItemFontFamily = val;
-    const lineHeight = FONT_METADATA[val]?.lineHeight ?? 1.25;
-    updateTextProperty({ fontFamily: val, lineHeight } as Partial<DrawTextElement>);
-  },
-});
-
-const fontSize = computed({
-  get: () => textElement.value?.fontSize ?? store.currentItemFontSize,
-  set: (val: number) => {
-    store.recordHistory();
-    store.currentItemFontSize = val;
-    updateTextProperty({ fontSize: val } as Partial<DrawTextElement>);
-  },
-});
-
-const textAlign = computed({
-  get: () => (textElement.value?.textAlign ?? 'left') as TextAlign,
-  set: (val: TextAlign) => {
-    store.recordHistory();
-    updateTextProperty({ textAlign: val } as Partial<DrawTextElement>);
-  },
-});
-
-const verticalAlign = computed({
-  get: () => (textElement.value?.verticalAlign ?? 'top') as VerticalAlign,
-  set: (val: VerticalAlign) => {
-    store.recordHistory();
-    updateTextProperty({ verticalAlign: val } as Partial<DrawTextElement>);
-  },
-});
-
-// ---- Options data ----
-const fillStyleOptions = [
-  { value: 'hachure' as FillStyle, icon: FillHachureIcon, label: 'draw.fillStyle.hachure' },
-  { value: 'cross-hatch' as FillStyle, icon: FillCrossHatchIcon, label: 'draw.fillStyle.crossHatch' },
-  { value: 'solid' as FillStyle, icon: FillSolidIcon, label: 'draw.fillStyle.solid' },
-  { value: 'zigzag' as FillStyle, icon: FillZigZagIcon, label: 'draw.fillStyle.zigzag' },
-];
-
-const strokeWidthOptions = [
-  { value: 1, icon: StrokeWidthThinIcon, label: 'draw.label.thin' },
-  { value: 2, icon: StrokeWidthBoldIcon, label: 'draw.label.bold' },
-  { value: 4, icon: StrokeWidthExtraBoldIcon, label: 'draw.label.extraBold' },
-];
-
-const strokeStyleOptions = [
-  { value: 'solid' as StrokeStyle, icon: StrokeStyleSolidIcon, label: 'draw.strokeStyle.solid' },
-  { value: 'dashed' as StrokeStyle, icon: StrokeStyleDashedIcon, label: 'draw.strokeStyle.dashed' },
-  { value: 'dotted' as StrokeStyle, icon: StrokeStyleDottedIcon, label: 'draw.strokeStyle.dotted' },
-];
-
-const sloppinessOptions = [
-  { value: 0, icon: SloppinessArchitectIcon, label: 'draw.label.architect' },
-  { value: 1, icon: SloppinessArtistIcon, label: 'draw.label.artist' },
-  { value: 2, icon: SloppinessCartoonistIcon, label: 'draw.label.cartoonist' },
-];
-
-const arrowTypeOptions = [
-  { value: 'sharp', icon: ArrowTypeSharpIcon, label: 'draw.property.arrowTypeSharp' },
-  { value: 'round', icon: ArrowTypeRoundIcon, label: 'draw.property.arrowTypeRound' },
-  { value: 'elbow', icon: ArrowTypeElbowIcon, label: 'draw.property.arrowTypeElbow' },
-];
-
-const startArrowheadOptions = [
-  { value: null as Arrowhead | null, icon: ArrowheadNoneStartIcon, label: 'draw.arrowhead.none' },
-  { value: 'arrow' as Arrowhead, icon: ArrowheadArrowStartIcon, label: 'draw.arrowhead.arrow' },
-  { value: 'triangle' as Arrowhead, icon: ArrowheadTriangleStartIcon, label: 'draw.arrowhead.triangle' },
-  { value: 'bar' as Arrowhead, icon: ArrowheadBarStartIcon, label: 'draw.arrowhead.bar' },
-  { value: 'circle' as Arrowhead, icon: ArrowheadCircleStartIcon, label: 'draw.arrowhead.circle' },
-  { value: 'diamond' as Arrowhead, icon: ArrowheadDiamondStartIcon, label: 'draw.arrowhead.diamond' },
-];
-
-const endArrowheadOptions = [
-  { value: null as Arrowhead | null, icon: ArrowheadNoneIcon, label: 'draw.arrowhead.none' },
-  { value: 'arrow' as Arrowhead, icon: ArrowheadArrowIcon, label: 'draw.arrowhead.arrow' },
-  { value: 'triangle' as Arrowhead, icon: ArrowheadTriangleIcon, label: 'draw.arrowhead.triangle' },
-  { value: 'bar' as Arrowhead, icon: ArrowheadBarIcon, label: 'draw.arrowhead.bar' },
-  { value: 'circle' as Arrowhead, icon: ArrowheadCircleIcon, label: 'draw.arrowhead.circle' },
-  { value: 'diamond' as Arrowhead, icon: ArrowheadDiamondIcon, label: 'draw.arrowhead.diamond' },
-];
-
-const fontFamilyOptions = [
-  { value: FONT_FAMILY.Excalifont, icon: FontHandDrawnIcon, label: 'draw.font.handDrawn' },
-  { value: FONT_FAMILY.Nunito, icon: FontNormalIcon, label: 'draw.font.normal' },
-  { value: FONT_FAMILY['Comic Shanns'], icon: FontCodeIcon, label: 'draw.font.code' },
-];
-
-const fontSizeOptions = [16, 20, 28, 36, 48, 64];
-
-const hasLink = computed(() => {
-  return primaryElement.value?.link != null && primaryElement.value.link !== '';
-});
-
-const canDistribute = computed(() => store.selectedElements.length >= 3);
-
-function openHyperlinkEditor() {
-  store.showHyperlinkPopup = 'editor';
-}
-</script>
-
-<template>
-  <div
-    v-if="showPanel"
-    class="zq-draw-property-panel absolute right-2 top-8 z-20 w-[228px] overflow-y-auto rounded-lg border border-border bg-card p-3 shadow-md"
-    style="max-height: calc(100% - 80px)"
-  >
-    <!-- Stroke Color -->
-    <fieldset v-if="hasStrokeColor" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.strokeColor') }}
-      </legend>
-      <div class="flex flex-wrap gap-1.5">
-        <button
-          v-for="color in PRESET_STROKE_COLORS"
-          :key="color"
-          class="prop-color-btn"
-          :class="{ 'ring-2 ring-primary ring-offset-1 ring-offset-card': strokeColor === color }"
-          :style="{ backgroundColor: color }"
-          :title="color"
-          @click="strokeColor = color"
-        />
-        <button
-          class="prop-color-btn prop-color-custom"
-          :class="{ 'ring-2 ring-primary ring-offset-1 ring-offset-card': !PRESET_STROKE_COLORS.includes(strokeColor) && strokeColor !== '' }"
-          :style="!PRESET_STROKE_COLORS.includes(strokeColor) ? { backgroundColor: strokeColor } : {}"
-          :title="t('draw.property.customColor')"
-          @click="openStrokeColorPicker"
-        />
-        <input
-          ref="strokeColorInputRef"
-          type="color"
-          class="prop-color-native-input"
-          :value="strokeColor"
-          @input="onStrokeColorInput"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Background Color -->
-    <fieldset v-if="hasBackground" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.backgroundColor') }}
-      </legend>
-      <div class="flex flex-wrap gap-1.5">
-        <button
-          v-for="color in PRESET_BACKGROUND_COLORS"
-          :key="color"
-          class="prop-color-btn"
-          :class="{
-            'ring-2 ring-primary ring-offset-1 ring-offset-card': backgroundColor === color,
-            'prop-color-transparent': color === 'transparent',
-          }"
-          :style="color !== 'transparent' ? { backgroundColor: color } : {}"
-          :title="color === 'transparent' ? 'Transparent' : color"
-          @click="backgroundColor = color"
-        />
-        <button
-          class="prop-color-btn prop-color-custom"
-          :class="{ 'ring-2 ring-primary ring-offset-1 ring-offset-card': !PRESET_BACKGROUND_COLORS.includes(backgroundColor) && backgroundColor !== '' }"
-          :style="!PRESET_BACKGROUND_COLORS.includes(backgroundColor) ? { backgroundColor } : {}"
-          :title="t('draw.property.customColor')"
-          @click="openBgColorPicker"
-        />
-        <input
-          ref="bgColorInputRef"
-          type="color"
-          class="prop-color-native-input"
-          :value="backgroundColor === 'transparent' ? '#ffffff' : backgroundColor"
-          @input="onBgColorInput"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Fill Style -->
-    <fieldset v-if="showFillStyle" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.fillStyle') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          v-for="opt in fillStyleOptions"
-          :key="opt.value"
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': fillStyle === opt.value }"
-          :title="t(opt.label)"
-          @click="fillStyle = opt.value"
-          v-html="opt.icon"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Stroke Width -->
-    <fieldset v-if="hasStrokeWidth" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.strokeWidth') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          v-for="opt in strokeWidthOptions"
-          :key="opt.value"
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': strokeWidth === opt.value }"
-          :title="t(opt.label)"
-          @click="strokeWidth = opt.value"
-          v-html="opt.icon"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Stroke Style + Sloppiness -->
-    <fieldset v-if="hasStrokeStyle" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.strokeStyle') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          v-for="opt in strokeStyleOptions"
-          :key="opt.value"
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': strokeStyle === opt.value }"
-          :title="t(opt.label)"
-          @click="strokeStyle = opt.value"
-          v-html="opt.icon"
-        />
-      </div>
-    </fieldset>
-
-    <fieldset v-if="hasStrokeStyle" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.sloppiness') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          v-for="opt in sloppinessOptions"
-          :key="opt.value"
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': roughness === opt.value }"
-          :title="t(opt.label)"
-          @click="roughness = opt.value"
-          v-html="opt.icon"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Edges (Roundness) -->
-    <fieldset v-if="canChangeRoundness" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.edges') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': !isRound }"
-          :title="t('draw.property.edgesSharp')"
-          @click="isRound = false"
-          v-html="EdgeSharpIcon"
-        />
-        <button
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': isRound }"
-          :title="t('draw.property.edgesRound')"
-          @click="isRound = true"
-          v-html="EdgeRoundIcon"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Arrow Type -->
-    <fieldset v-if="isArrowElement" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.arrowType') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          v-for="opt in arrowTypeOptions"
-          :key="opt.value"
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': arrowType === opt.value }"
-          :title="t(opt.label)"
-          @click="arrowType = opt.value"
-          v-html="opt.icon"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Font Family -->
-    <fieldset v-if="isTextOrHasText" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.fontFamily') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          v-for="opt in fontFamilyOptions"
-          :key="opt.value"
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': fontFamily === opt.value }"
-          :title="t(opt.label)"
-          @click="fontFamily = opt.value"
-          v-html="opt.icon"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Font Size -->
-    <fieldset v-if="isTextOrHasText" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.fontSize') }}
-      </legend>
-      <div class="flex flex-wrap gap-1">
-        <button
-          v-for="size in fontSizeOptions"
-          :key="size"
-          class="prop-text-btn"
-          :class="{ 'prop-text-btn--active': fontSize === size }"
-          @click="fontSize = size"
-        >
-          {{ size }}
-        </button>
-      </div>
-      <div class="mt-1.5 flex items-center gap-0.5">
-        <button class="prop-sm-btn" @click="fontSize = Math.max(8, fontSize - 2)">
-          <MinusIcon class="h-3 w-3" />
-        </button>
-        <span class="min-w-[2rem] text-center text-xs">{{ fontSize }}</span>
-        <button class="prop-sm-btn" @click="fontSize = Math.min(120, fontSize + 2)">
-          <PlusIcon class="h-3 w-3" />
-        </button>
-      </div>
-    </fieldset>
-
-    <!-- Text Align -->
-    <fieldset v-if="isTextOrHasText" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.textAlign') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': textAlign === 'left' }"
-          :title="'Left'"
-          @click="textAlign = 'left'"
-          v-html="TextAlignLeftIcon"
-        />
-        <button
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': textAlign === 'center' }"
-          :title="'Center'"
-          @click="textAlign = 'center'"
-          v-html="TextAlignCenterIcon"
-        />
-        <button
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': textAlign === 'right' }"
-          :title="'Right'"
-          @click="textAlign = 'right'"
-          v-html="TextAlignRightIcon"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Vertical Align -->
-    <fieldset v-if="isTextOrHasText && primaryElement?.type !== 'text'" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.verticalAlign') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': verticalAlign === 'top' }"
-          :title="t('draw.verticalAlign.top')"
-          @click="verticalAlign = 'top'"
-          v-html="VerticalAlignTopIcon"
-        />
-        <button
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': verticalAlign === 'middle' }"
-          :title="t('draw.verticalAlign.middle')"
-          @click="verticalAlign = 'middle'"
-          v-html="VerticalAlignMiddleIcon"
-        />
-        <button
-          class="prop-icon-btn"
-          :class="{ 'prop-icon-btn--active': verticalAlign === 'bottom' }"
-          :title="t('draw.verticalAlign.bottom')"
-          @click="verticalAlign = 'bottom'"
-          v-html="VerticalAlignBottomIcon"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Arrowheads -->
-    <fieldset v-if="isLinearElement" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.arrowheadStart') }}
-      </legend>
-      <div class="flex gap-0.5">
-        <button
-          v-for="opt in startArrowheadOptions"
-          :key="String(opt.value)"
-          class="prop-arrowhead-btn"
-          :class="{ 'prop-arrowhead-btn--active': startArrowhead === opt.value }"
-          :title="t(opt.label)"
-          @click="startArrowhead = opt.value"
-          v-html="opt.icon"
-        />
-      </div>
-      <legend class="mb-1.5 mt-2 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.arrowheadEnd') }}
-      </legend>
-      <div class="flex gap-0.5">
-        <button
-          v-for="opt in endArrowheadOptions"
-          :key="String(opt.value)"
-          class="prop-arrowhead-btn"
-          :class="{ 'prop-arrowhead-btn--active': endArrowhead === opt.value }"
-          :title="t(opt.label)"
-          @click="endArrowhead = opt.value"
-          v-html="opt.icon"
-        />
-      </div>
-    </fieldset>
-
-    <!-- Opacity -->
-    <fieldset class="mb-3">
-      <legend class="mb-1 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.opacity') }}
-      </legend>
-      <div class="flex items-center gap-2">
-        <ElSlider
-          :model-value="opacity"
-          :min="0"
-          :max="100"
-          :step="10"
-          class="flex-1"
-          @update:model-value="(v: any) => opacity = Number(v)"
-        />
-        <span class="w-8 text-right text-xs text-muted-foreground">{{ opacity }}</span>
-      </div>
-    </fieldset>
-
-    <!-- Layers -->
-    <fieldset v-if="isSingleSelect || isMultiSelect" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.layers') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          class="prop-action-btn"
-          :title="t('draw.menu.sendToBack')"
-          @click="store.sendToBack()"
-        >
-          <ArrowDownToLine class="h-4 w-4" />
-        </button>
-        <button
-          class="prop-action-btn"
-          :title="t('draw.menu.sendBackward')"
-          @click="store.sendBackward()"
-        >
-          <ArrowDown class="h-4 w-4" />
-        </button>
-        <button
-          class="prop-action-btn"
-          :title="t('draw.menu.bringForward')"
-          @click="store.bringForward()"
-        >
-          <ArrowUp class="h-4 w-4" />
-        </button>
-        <button
-          class="prop-action-btn"
-          :title="t('draw.menu.bringToFront')"
-          @click="store.bringToFront()"
-        >
-          <ArrowUpToLine class="h-4 w-4" />
-        </button>
-      </div>
-    </fieldset>
-
-    <!-- Actions -->
-    <fieldset v-if="isSingleSelect || isMultiSelect" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.actions') }}
-      </legend>
-      <div class="flex gap-1">
-        <button
-          class="prop-action-btn"
-          :title="t('draw.menu.duplicate')"
-          @click="store.duplicateSelectedElements()"
-        >
-          <Copy class="h-4 w-4" />
-        </button>
-        <button
-          class="prop-action-btn"
-          :title="t('draw.menu.delete')"
-          @click="store.deleteSelectedElementsWithBindings()"
-        >
-          <Trash2 class="h-4 w-4" />
-        </button>
-        <button
-          class="prop-action-btn"
-          :title="hasLink ? t('draw.menu.editLink') : t('draw.menu.addLink')"
-          @click="openHyperlinkEditor"
-        >
-          <Link class="h-4 w-4" />
-        </button>
-      </div>
-    </fieldset>
-
-    <!-- Align / Distribute (multi-select) -->
-    <fieldset v-if="isMultiSelect" class="mb-3">
-      <legend class="mb-1.5 text-xs font-medium text-muted-foreground">
-        {{ t('draw.property.alignDistribute') }}
-      </legend>
-      <div class="mb-1 flex gap-1">
-        <button class="prop-sm-btn" :title="t('draw.menu.alignLeft')" @click="store.alignSelected({ position: 'start', axis: 'x' })">
-          <AlignStartHorizontal class="h-3.5 w-3.5" />
-        </button>
-        <button class="prop-sm-btn" :title="t('draw.menu.alignCenter')" @click="store.alignSelected({ position: 'center', axis: 'x' })">
-          <AlignCenterHorizontal class="h-3.5 w-3.5" />
-        </button>
-        <button class="prop-sm-btn" :title="t('draw.menu.alignRight')" @click="store.alignSelected({ position: 'end', axis: 'x' })">
-          <AlignEndHorizontal class="h-3.5 w-3.5" />
-        </button>
-        <button class="prop-sm-btn" :title="t('draw.menu.alignTop')" @click="store.alignSelected({ position: 'start', axis: 'y' })">
-          <AlignStartVertical class="h-3.5 w-3.5" />
-        </button>
-        <button class="prop-sm-btn" :title="t('draw.menu.alignMiddle')" @click="store.alignSelected({ position: 'center', axis: 'y' })">
-          <AlignCenterVertical class="h-3.5 w-3.5" />
-        </button>
-        <button class="prop-sm-btn" :title="t('draw.menu.alignBottom')" @click="store.alignSelected({ position: 'end', axis: 'y' })">
-          <AlignEndVertical class="h-3.5 w-3.5" />
-        </button>
-      </div>
-      <div v-if="canDistribute" class="flex gap-1">
-        <button class="prop-sm-btn" :title="t('draw.menu.distributeH')" @click="store.distributeSelected({ space: 'between', axis: 'x' })">
-          <AlignHorizontalSpaceAround class="h-3.5 w-3.5" />
-        </button>
-        <button class="prop-sm-btn" :title="t('draw.menu.distributeV')" @click="store.distributeSelected({ space: 'between', axis: 'y' })">
-          <AlignVerticalSpaceAround class="h-3.5 w-3.5" />
-        </button>
-      </div>
-    </fieldset>
-
-    <div v-if="isMultiSelect" class="text-xs text-muted-foreground">
-      {{ t('draw.property.mixed') }}
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.prop-color-btn {
-  @apply h-[22px] w-[22px] rounded-md border border-border cursor-pointer transition-all hover:scale-110;
-}
-.prop-color-transparent {
-  background: repeating-conic-gradient(#ccc 0 25%, transparent 0 50%) 0 0 / 8px 8px;
-}
-.prop-color-custom {
-  background: conic-gradient(
-    from 0deg,
-    #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0000ff, #8800ff, #ff0088, #ff0000
-  );
-}
-.prop-color-native-input {
-  @apply absolute h-0 w-0 overflow-hidden;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.prop-icon-btn {
-  @apply flex h-8 w-8 items-center justify-center rounded-md border border-transparent cursor-pointer transition-colors text-foreground;
-}
-.prop-icon-btn:hover {
-  @apply bg-accent;
-}
-.prop-icon-btn--active {
-  @apply bg-primary/10 border-primary text-primary;
-}
-.prop-icon-btn :deep(svg) {
-  @apply h-5 w-5;
-}
-
-.prop-arrowhead-btn {
-  @apply flex h-7 flex-1 items-center justify-center rounded-md border border-transparent cursor-pointer transition-colors text-foreground;
-}
-.prop-arrowhead-btn:hover {
-  @apply bg-accent;
-}
-.prop-arrowhead-btn--active {
-  @apply bg-primary/10 border-primary text-primary;
-}
-.prop-arrowhead-btn :deep(svg) {
-  @apply h-5 w-full;
-}
-
-.prop-text-btn {
-  @apply flex h-7 min-w-[28px] items-center justify-center rounded-md border border-transparent px-1.5 text-xs cursor-pointer transition-colors;
-}
-.prop-text-btn:hover {
-  @apply bg-accent;
-}
-.prop-text-btn--active {
-  @apply bg-primary/10 border-primary text-primary;
-}
-
-.prop-action-btn {
-  @apply flex h-9 w-9 items-center justify-center rounded-lg cursor-pointer transition-colors text-foreground hover:bg-accent;
-}
-
-.prop-sm-btn {
-  @apply flex h-7 w-7 items-center justify-center rounded-md cursor-pointer transition-colors hover:bg-accent;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/StatsPanel.vue b/web/apps/web-ele/src/components/zq-draw/components/StatsPanel.vue
deleted file mode 100644
index e19bce2..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/StatsPanel.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, nextTick } from 'vue';
-import { useI18n } from '@vben/locales';
-import { useDrawStore } from '../store/draw-store';
-import { getElementBounds, getCommonBounds } from '../elements/bounds';
-import type { DrawTextElement } from '../types';
-
-const { t } = useI18n();
-const store = useDrawStore();
-const editInputRef = ref<HTMLInputElement | null>(null);
-
-const show = computed(() => store.showStats && !store.viewModeEnabled);
-
-const totalElements = computed(() => {
-  void store.sceneVersion;
-  return store.elements.length;
-});
-
-const sceneBounds = computed(() => {
-  void store.sceneVersion;
-  const els = store.elements;
-  if (els.length === 0) return { w: 0, h: 0 };
-  const [x1, y1, x2, y2] = getCommonBounds(els);
-  return { w: Math.round(x2 - x1), h: Math.round(y2 - y1) };
-});
-
-const selected = computed(() => store.selectedElements);
-const isSingle = computed(() => selected.value.length === 1);
-const isMulti = computed(() => selected.value.length > 1);
-const hasSelection = computed(() => selected.value.length > 0);
-
-const selBounds = computed(() => {
-  if (!hasSelection.value) return null;
-  if (isSingle.value) {
-    const el = selected.value[0]!;
-    const [x1, y1, x2, y2] = getElementBounds(el);
-    return {
-      x: Math.round(x1 * 100) / 100,
-      y: Math.round(y1 * 100) / 100,
-      w: Math.round((x2 - x1) * 100) / 100,
-      h: Math.round((y2 - y1) * 100) / 100,
-    };
-  }
-  const [x1, y1, x2, y2] = getCommonBounds(selected.value);
-  return {
-    x: Math.round(x1 * 100) / 100,
-    y: Math.round(y1 * 100) / 100,
-    w: Math.round((x2 - x1) * 100) / 100,
-    h: Math.round((y2 - y1) * 100) / 100,
-  };
-});
-
-const selAngle = computed(() => {
-  if (!isSingle.value) return null;
-  const el = selected.value[0]!;
-  return Math.round(((el.angle * 180) / Math.PI) * 100) / 100;
-});
-
-const isTextSelected = computed(() => {
-  return isSingle.value && selected.value[0]?.type === 'text';
-});
-
-const selFontSize = computed(() => {
-  if (!isTextSelected.value) return null;
-  return (selected.value[0] as DrawTextElement).fontSize;
-});
-
-const editingField = ref<string | null>(null);
-const editValue = ref('');
-
-function startEdit(field: string, currentValue: number | null) {
-  if (currentValue === null) return;
-  editingField.value = field;
-  editValue.value = String(currentValue);
-  nextTick(() => {
-    const el = editInputRef.value;
-    if (Array.isArray(el)) {
-      (el[0] as HTMLInputElement | undefined)?.select();
-    } else {
-      el?.select();
-    }
-  });
-}
-
-function commitEdit() {
-  const field = editingField.value;
-  if (!field) return;
-  const val = Number.parseFloat(editValue.value);
-  if (Number.isNaN(val)) {
-    editingField.value = null;
-    return;
-  }
-
-  store.recordHistory();
-
-  if (field === 'x' && selBounds.value) {
-    const dx = val - selBounds.value.x;
-    for (const el of selected.value) {
-      store.updateElement(el.id, { x: el.x + dx } as any);
-    }
-  } else if (field === 'y' && selBounds.value) {
-    const dy = val - selBounds.value.y;
-    for (const el of selected.value) {
-      store.updateElement(el.id, { y: el.y + dy } as any);
-    }
-  } else if (field === 'w' && isSingle.value) {
-    store.updateElement(selected.value[0]!.id, { width: Math.max(1, val) } as any);
-  } else if (field === 'h' && isSingle.value) {
-    store.updateElement(selected.value[0]!.id, { height: Math.max(1, val) } as any);
-  } else if (field === 'a' && isSingle.value) {
-    const radians = (val * Math.PI) / 180;
-    store.updateElement(selected.value[0]!.id, { angle: radians } as any);
-  } else if (field === 'f' && isTextSelected.value) {
-    store.updateElement(selected.value[0]!.id, { fontSize: Math.max(4, val) } as any);
-  }
-
-  store.requestRender();
-  editingField.value = null;
-}
-
-function onInputKeydown(e: KeyboardEvent) {
-  e.stopPropagation();
-  if (e.key === 'Enter') {
-    e.preventDefault();
-    commitEdit();
-  } else if (e.key === 'Escape') {
-    e.preventDefault();
-    editingField.value = null;
-  }
-}
-</script>
-
-<template>
-  <div
-    v-if="show"
-    class="absolute bottom-14 right-3 z-20 min-w-44 rounded-lg border border-border bg-card p-2.5 text-xs shadow-md"
-  >
-    <div class="mb-2 flex items-center justify-between">
-      <span class="font-medium text-foreground">{{ t('draw.stats.title') }}</span>
-      <button
-        class="flex h-5 w-5 items-center justify-center rounded text-muted-foreground hover:bg-accent"
-        @click="store.showStats = false"
-      >
-        &times;
-      </button>
-    </div>
-
-    <div class="mb-1.5 text-muted-foreground">
-      {{ t('draw.stats.elements') }}: {{ totalElements }}
-    </div>
-    <div class="mb-2 text-muted-foreground">
-      {{ t('draw.stats.sceneSize') }}: {{ sceneBounds.w }} &times; {{ sceneBounds.h }}
-    </div>
-
-    <template v-if="hasSelection && selBounds">
-      <div class="mb-1.5 border-t border-border pt-1.5 font-medium text-foreground">
-        {{ isMulti ? t('draw.stats.multiSelected', { count: selected.length }) : selected[0]?.type }}
-      </div>
-
-      <div class="grid grid-cols-2 gap-x-3 gap-y-1">
-        <div
-          v-for="item in [
-            { label: 'X', field: 'x', value: selBounds.x, editable: true },
-            { label: 'Y', field: 'y', value: selBounds.y, editable: true },
-            { label: 'W', field: 'w', value: selBounds.w, editable: isSingle },
-            { label: 'H', field: 'h', value: selBounds.h, editable: isSingle },
-          ]"
-          :key="item.field"
-          class="flex items-center gap-1"
-        >
-          <span class="w-4 font-medium text-muted-foreground">{{ item.label }}</span>
-          <input
-            v-if="editingField === item.field"
-            ref="editInputRef"
-            v-model="editValue"
-            class="h-5 w-full rounded border border-primary bg-background px-1 text-xs text-foreground outline-none"
-            @blur="commitEdit"
-            @keydown="onInputKeydown"
-          />
-          <button
-            v-else
-            class="h-5 w-full truncate rounded px-1 text-left text-foreground"
-            :class="item.editable ? 'hover:bg-accent cursor-pointer' : 'opacity-60 cursor-default'"
-            @click="item.editable && startEdit(item.field, item.value)"
-          >
-            {{ item.value }}
-          </button>
-        </div>
-      </div>
-
-      <div v-if="isSingle && selAngle !== null" class="mt-1 flex items-center gap-1">
-        <span class="w-4 font-medium text-muted-foreground">A</span>
-        <input
-          v-if="editingField === 'a'"
-          ref="editInputRef"
-          v-model="editValue"
-          class="h-5 w-full rounded border border-primary bg-background px-1 text-xs text-foreground outline-none"
-          @blur="commitEdit"
-          @keydown="onInputKeydown"
-        />
-        <button
-          v-else
-          class="h-5 w-full truncate rounded px-1 text-left text-foreground hover:bg-accent"
-          @click="startEdit('a', selAngle)"
-        >
-          {{ selAngle }}&deg;
-        </button>
-      </div>
-
-      <div v-if="isTextSelected && selFontSize !== null" class="mt-1 flex items-center gap-1">
-        <span class="w-4 font-medium text-muted-foreground">F</span>
-        <input
-          v-if="editingField === 'f'"
-          ref="editInputRef"
-          v-model="editValue"
-          class="h-5 w-full rounded border border-primary bg-background px-1 text-xs text-foreground outline-none"
-          @blur="commitEdit"
-          @keydown="onInputKeydown"
-        />
-        <button
-          v-else
-          class="h-5 w-full truncate rounded px-1 text-left text-foreground hover:bg-accent"
-          @click="startEdit('f', selFontSize)"
-        >
-          {{ selFontSize }}
-        </button>
-      </div>
-    </template>
-  </div>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/TextEditor.vue b/web/apps/web-ele/src/components/zq-draw/components/TextEditor.vue
deleted file mode 100644
index 17547c5..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/TextEditor.vue
+++ /dev/null
@@ -1,356 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue';
-import { useDrawStore } from '../store/draw-store';
-import { FONT_FAMILY_FALLBACKS } from '../constants';
-import { sceneCoordsToViewport } from '../core/renderer/helpers';
-import type { DrawTextElement, DrawElement, DrawLinearElement } from '../types';
-import {
-  getContainerElement,
-  getBoundTextMaxWidth,
-  getBoundTextMaxHeight,
-  measureText,
-  computeBoundTextPosition,
-  computeContainerDimensionForBoundText,
-  getContainerTextCoords,
-  getArrowLabelPosition,
-  redrawTextBoundingBox,
-  getLineHeightInPx,
-  BOUND_TEXT_PADDING,
-} from '../elements/bound-text';
-
-const store = useDrawStore();
-const textareaRef = ref<HTMLTextAreaElement | null>(null);
-
-const isEditing = computed(() => !!store.editingTextElement);
-
-const editingElement = computed<DrawTextElement | null>(() => {
-  if (!store.editingTextElement) return null;
-  const el = store.scene.getElement(store.editingTextElement.id);
-  return (el as DrawTextElement) ?? store.editingTextElement;
-});
-
-const container = computed<DrawElement | null>(() => {
-  const el = editingElement.value;
-  if (!el?.containerId) return null;
-  return getContainerElement(el, store.scene);
-});
-
-const isArrowLabel = computed(() => {
-  const c = container.value;
-  return c?.type === 'arrow' || c?.type === 'line';
-});
-
-const editorPosition = computed(() => {
-  const el = editingElement.value;
-  if (!el) return { x: 0, y: 0 };
-
-  const c = container.value;
-
-  if (c && isArrowLabel.value) {
-    const arrow = c as DrawLinearElement;
-    const center = getArrowLabelPosition(arrow);
-    const textW = el.width || 0;
-    const minW = el.fontSize * 2;
-    const editorW = Math.max(textW, minW);
-    return {
-      x: center.x - editorW / 2,
-      y: center.y - (el.height || 0) / 2,
-    };
-  }
-
-  if (c) {
-    const maxHeight = getBoundTextMaxHeight(c, el);
-    const textHeight = el.height || 0;
-
-    let coords: { x: number; y: number };
-    if (c.type === 'ellipse' || c.type === 'diamond') {
-      const cx = c.x + c.width / 2;
-      const cy = c.y + c.height / 2;
-      const maxW = getBoundTextMaxWidth(c);
-      coords = {
-        x: cx - maxW / 2,
-        y: cy - maxHeight / 2,
-      };
-    } else {
-      coords = getContainerTextCoords(c);
-    }
-
-    let offsetY = 0;
-    if (el.verticalAlign === 'middle') {
-      offsetY = (maxHeight - textHeight) / 2;
-    } else if (el.verticalAlign === 'bottom') {
-      offsetY = maxHeight - textHeight;
-    }
-
-    return {
-      x: coords.x,
-      y: coords.y + offsetY,
-    };
-  }
-
-  return { x: el.x, y: el.y };
-});
-
-const style = computed(() => {
-  const el = editingElement.value;
-  if (!el) return {};
-
-  const pos = editorPosition.value;
-  const { x, y } = sceneCoordsToViewport(pos.x, pos.y, {
-    scrollX: store.scrollX,
-    scrollY: store.scrollY,
-    zoom: store.zoom,
-  });
-
-  const fontFamily = FONT_FAMILY_FALLBACKS[el.fontFamily] ?? 'sans-serif';
-  const fontSize = el.fontSize * store.zoom.value;
-  const lineHeightPx = getLineHeightInPx(el.fontSize, el.lineHeight);
-  const lineHeightRatio = lineHeightPx / el.fontSize;
-
-  const c = container.value;
-  const isBound = !!c;
-  const isArrow = isArrowLabel.value;
-
-  let width: string;
-  let whiteSpace: string;
-  let wordBreak: string;
-  let textAlign: string;
-
-  if (isBound && !isArrow) {
-    const maxW = getBoundTextMaxWidth(c!) * store.zoom.value;
-    width = `${maxW}px`;
-    whiteSpace = 'pre-wrap';
-    wordBreak = 'break-word';
-    textAlign = el.textAlign;
-  } else if (isArrow) {
-    const textW = el.width || 0;
-    const minW = el.fontSize * 2;
-    width = `${Math.max(textW, minW) * store.zoom.value}px`;
-    whiteSpace = 'pre';
-    wordBreak = 'normal';
-    textAlign = 'center';
-  } else {
-    width = el.autoResize ? 'auto' : `${el.width * store.zoom.value}px`;
-    whiteSpace = el.autoResize ? 'pre' : 'pre-wrap';
-    wordBreak = el.autoResize ? 'normal' : 'break-word';
-    textAlign = el.textAlign;
-  }
-
-  const angle = (isArrow ? 0 : (c?.angle ?? el.angle)) || 0;
-
-  const bgColor = isArrow
-    ? (store.viewBackgroundColor || '#ffffff')
-    : 'transparent';
-
-  const pad = isArrow ? `${BOUND_TEXT_PADDING * store.zoom.value}px` : '0';
-
-  return {
-    position: 'absolute' as const,
-    left: `${x}px`,
-    top: `${y}px`,
-    fontSize: `${fontSize}px`,
-    fontFamily,
-    color: el.strokeColor,
-    textAlign,
-    lineHeight: String(lineHeightRatio),
-    opacity: el.opacity / 100,
-    border: 'none',
-    outline: 'none',
-    background: bgColor,
-    resize: 'none' as const,
-    overflow: 'hidden',
-    minWidth: isArrow ? undefined : '1em',
-    minHeight: `${fontSize + 4}px`,
-    padding: pad,
-    margin: isArrow ? `-${pad}` : '0',
-    zIndex: 100,
-    whiteSpace: whiteSpace as any,
-    wordBreak: wordBreak as any,
-    width,
-    transformOrigin: '0 0',
-    transform: angle ? `rotate(${angle}rad)` : undefined,
-  };
-});
-
-watch(isEditing, async (val) => {
-  if (val) {
-    await nextTick();
-    const textarea = textareaRef.value;
-    if (textarea) {
-      textarea.focus();
-      const len = textarea.value.length;
-      textarea.setSelectionRange(len, len);
-    }
-  }
-});
-
-function handleInput(e: Event) {
-  const target = e.target as HTMLTextAreaElement;
-  const text = target.value;
-  const el = editingElement.value;
-  if (!el) return;
-
-  const c = container.value;
-  const isBound = !!c;
-  const isArrow = isArrowLabel.value;
-
-  if (isBound && !isArrow) {
-    const maxWidth = getBoundTextMaxWidth(c!);
-    const metrics = measureText(
-      text,
-      el.fontSize,
-      el.fontFamily,
-      el.lineHeight,
-      maxWidth,
-    );
-
-    store.updateElement(el.id, {
-      originalText: text,
-      text: metrics.wrappedText,
-      width: metrics.width,
-      height: metrics.height,
-    } as any);
-
-    const maxHeight = getBoundTextMaxHeight(c!, el);
-    if (metrics.height > maxHeight) {
-      const nextHeight = computeContainerDimensionForBoundText(
-        metrics.height,
-        c!.type,
-      );
-      store.updateElement(c!.id, { height: nextHeight } as any);
-    }
-
-    const updatedContainer = store.scene.getElement(c!.id) || c!;
-    const updatedText = store.scene.getElement(el.id) as DrawTextElement;
-    if (updatedText) {
-      const pos = computeBoundTextPosition(updatedContainer, {
-        ...updatedText,
-        width: metrics.width,
-        height: metrics.height,
-      } as DrawTextElement, store.scene);
-      store.updateElement(el.id, { x: pos.x, y: pos.y } as any);
-    }
-  } else if (isArrow) {
-    const metrics = measureText(
-      text,
-      el.fontSize,
-      el.fontFamily,
-      el.lineHeight,
-    );
-
-    const arrow = c as DrawLinearElement;
-    const center = getArrowLabelPosition(arrow);
-
-    store.updateElement(el.id, {
-      originalText: text,
-      text,
-      width: metrics.width,
-      height: metrics.height,
-      x: center.x - metrics.width / 2,
-      y: center.y - metrics.height / 2,
-    } as any);
-  } else {
-    const metrics = measureText(
-      text,
-      el.fontSize,
-      el.fontFamily,
-      el.lineHeight,
-      el.autoResize ? undefined : el.width,
-    );
-
-    const updates: Record<string, any> = {
-      originalText: text,
-      text: el.autoResize ? text : metrics.wrappedText,
-      height: metrics.height,
-    };
-
-    if (el.autoResize) {
-      updates.width = metrics.width;
-    }
-
-    store.updateElement(el.id, updates as any);
-  }
-
-  store.requestRender();
-}
-
-function handleBlur() {
-  requestAnimationFrame(() => {
-    if (textareaRef.value && document.activeElement === textareaRef.value) {
-      return;
-    }
-    finishEditing();
-  });
-}
-
-function handleKeyDown(e: KeyboardEvent) {
-  if (e.key === 'Escape') {
-    e.preventDefault();
-    finishEditing();
-    return;
-  }
-
-  if (e.key === 'Enter' && !e.shiftKey && isArrowLabel.value) {
-    e.preventDefault();
-    finishEditing();
-    return;
-  }
-
-  e.stopPropagation();
-}
-
-function finishEditing() {
-  const el = editingElement.value;
-  if (!el) return;
-
-  const c = container.value;
-  const latestEl = store.scene.getElement(el.id) as DrawTextElement | undefined;
-  const textContent = latestEl?.originalText ?? el.originalText ?? el.text;
-
-  if (!textContent || !textContent.trim()) {
-    if (c && c.boundElements) {
-      const newBound = c.boundElements.filter((b) => b.id !== el.id);
-      store.updateElement(c.id, {
-        boundElements: newBound.length > 0 ? newBound : null,
-      } as any);
-    }
-    store.scene.deleteElement(el.id);
-  } else {
-    if (c) {
-      const updatedText = (store.scene.getElement(el.id) as DrawTextElement) || el;
-      redrawTextBoundingBox(updatedText, c, store.scene);
-    }
-    store.recordHistory();
-  }
-
-  store.editingTextElement = null;
-  if (c) {
-    store.selectElement(c.id);
-  }
-  store.requestRender();
-}
-</script>
-
-<template>
-  <textarea
-    v-if="isEditing"
-    ref="textareaRef"
-    :value="editingElement?.originalText ?? editingElement?.text ?? ''"
-    :style="style"
-    class="zq-draw-text-editor"
-    spellcheck="false"
-    wrap="off"
-    @input="handleInput"
-    @blur="handleBlur"
-    @keydown="handleKeyDown"
-  />
-</template>
-
-<style scoped>
-.zq-draw-text-editor {
-  position: absolute;
-  z-index: 100;
-  box-sizing: content-box;
-  letter-spacing: 0;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/UndoRedoControls.vue b/web/apps/web-ele/src/components/zq-draw/components/UndoRedoControls.vue
deleted file mode 100644
index b968b85..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/UndoRedoControls.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { $t } from '@vben/locales';
-import { Undo2, Redo2 } from '@vben/icons';
-import { useDrawStore } from '../store/draw-store';
-
-const store = useDrawStore();
-</script>
-
-<template>
-  <div class="zq-draw-undo-redo">
-    <button
-      class="zq-draw-undo-btn"
-      :class="{ 'is-disabled': !store.canUndo }"
-      :disabled="!store.canUndo"
-      :title="`${$t('draw.action.undo')} (Ctrl+Z)`"
-      @click="store.undo()"
-    >
-      <Undo2 class="zq-draw-undo-icon" />
-    </button>
-    <button
-      class="zq-draw-undo-btn"
-      :class="{ 'is-disabled': !store.canRedo }"
-      :disabled="!store.canRedo"
-      :title="`${$t('draw.action.redo')} (Ctrl+Y)`"
-      @click="store.redo()"
-    >
-      <Redo2 class="zq-draw-undo-icon" />
-    </button>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.zq-draw-undo-redo {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-}
-
-.zq-draw-undo-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-  transition: all 0.15s;
-
-  &:hover:not(.is-disabled) {
-    background: var(--el-fill-color-light);
-  }
-
-  &.is-disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-}
-
-.zq-draw-undo-icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/ZoomControls.vue b/web/apps/web-ele/src/components/zq-draw/components/ZoomControls.vue
deleted file mode 100644
index 44cbf98..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/ZoomControls.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { $t } from '@vben/locales';
-import { ZoomIn, ZoomOut, Maximize, ScanSearch } from '@vben/icons';
-import { useDrawStore } from '../store/draw-store';
-
-const store = useDrawStore();
-
-const zoomPercentage = computed(() => {
-  return `${Math.round(store.zoom.value * 100)}%`;
-});
-</script>
-
-<template>
-  <div class="zq-draw-zoom-controls">
-    <button
-      class="zq-draw-zoom-btn"
-      :title="$t('draw.action.zoomOut')"
-      @click="store.zoomOut()"
-    >
-      <ZoomOut class="zq-draw-zoom-icon" />
-    </button>
-    <button
-      class="zq-draw-zoom-label"
-      :title="$t('draw.action.resetZoom')"
-      @click="store.resetZoom()"
-    >
-      {{ zoomPercentage }}
-    </button>
-    <button
-      class="zq-draw-zoom-btn"
-      :title="$t('draw.action.zoomIn')"
-      @click="store.zoomIn()"
-    >
-      <ZoomIn class="zq-draw-zoom-icon" />
-    </button>
-    <button
-      class="zq-draw-zoom-btn"
-      :title="$t('draw.action.zoomToFit')"
-      @click="store.zoomToFit()"
-    >
-      <Maximize class="zq-draw-zoom-icon" />
-    </button>
-    <button
-      class="zq-draw-zoom-btn"
-      :title="$t('draw.action.zoomToFitSelection')"
-      @click="store.zoomToFitSelection()"
-    >
-      <ScanSearch class="zq-draw-zoom-icon" />
-    </button>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.zq-draw-zoom-controls {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-}
-
-.zq-draw-zoom-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--el-text-color-regular);
-  transition: all 0.15s;
-
-  &:hover {
-    background: var(--el-fill-color-light);
-  }
-}
-
-.zq-draw-zoom-label {
-  min-width: 50px;
-  height: 32px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  font-size: 12px;
-  color: var(--el-text-color-regular);
-  transition: all 0.15s;
-
-  &:hover {
-    background: var(--el-fill-color-light);
-  }
-}
-
-.zq-draw-zoom-icon {
-  width: 16px;
-  height: 16px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-draw/components/icons/property-icons.ts b/web/apps/web-ele/src/components/zq-draw/components/icons/property-icons.ts
deleted file mode 100644
index 9c92929..0000000
--- a/web/apps/web-ele/src/components/zq-draw/components/icons/property-icons.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * SVG icon definitions for the property panel.
- * Each icon is a function returning an SVG string for use with v-html.
- * Styled after Excalidraw's icon conventions (20x20 or 24x24 viewBox).
- */
-
-// ---------------------------------------------------------------------------
-// Fill Style Icons (20x20)
-// ---------------------------------------------------------------------------
-
-export const FillHachureIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z"/><path d="M2.258 15.156 15.156 2.258M7.324 20.222 20.222 7.325M-.222 12.675 12.675-.222M4.518 18.118 17.416 5.22"/></g></svg>`;
-
-export const FillCrossHatchIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z"/><path d="M2.258 15.156 15.156 2.258M7.324 20.222 20.222 7.325M-.222 12.675 12.675-.222M4.518 18.118 17.416 5.22"/><path d="m4.844 2.258 12.898 12.898m-5.066 5.066L-.222 7.324m12.897-7.546 7.547 7.546M2.258 17.74l12.898-12.898"/></g></svg>`;
-
-export const FillSolidIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M5.879 2.625h8.242a3.254 3.254 0 0 1 3.254 3.254v8.242a3.254 3.254 0 0 1-3.254 3.254H5.88a3.254 3.254 0 0 1-3.254-3.254V5.88a3.254 3.254 0 0 1 3.254-3.254Z"/></g></svg>`;
-
-export const FillZigZagIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M5.879 2.625h8.242a3.27 3.27 0 0 1 3.254 3.254v8.242a3.27 3.27 0 0 1-3.254 3.254H5.88a3.27 3.27 0 0 1-3.254-3.254V5.88A3.27 3.27 0 0 1 5.88 2.626ZM4.518 16.118l7.608-12.83m.198 13.934 5.051-9.897M2.778 9.675l9.348-6.387m-7.608 12.83 12.857-8.793"/></g></svg>`;
-
-// ---------------------------------------------------------------------------
-// Stroke Width Icons (20x20)
-// ---------------------------------------------------------------------------
-
-export const StrokeWidthThinIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4.167 10h11.666" stroke-width="1.25"/></svg>`;
-
-export const StrokeWidthBoldIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10h10" stroke-width="2.5"/></svg>`;
-
-export const StrokeWidthExtraBoldIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10h10" stroke-width="3.75"/></svg>`;
-
-// ---------------------------------------------------------------------------
-// Stroke Style Icons (20x20)
-// ---------------------------------------------------------------------------
-
-export const StrokeStyleSolidIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4.167 10h11.666" stroke-width="1.25"/></svg>`;
-
-export const StrokeStyleDashedIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 12h2"/><path d="M17 12h2"/><path d="M11 12h2"/></svg>`;
-
-export const StrokeStyleDottedIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 12v.01"/><path d="M8 12v.01"/><path d="M12 12v.01"/><path d="M16 12v.01"/><path d="M20 12v.01"/></svg>`;
-
-// ---------------------------------------------------------------------------
-// Sloppiness (Roughness) Icons (20x20)
-// ---------------------------------------------------------------------------
-
-export const SloppinessArchitectIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 12.038c1.655-.885 5.9-3.292 8.568-4.354 2.668-1.063.101 2.821 1.32 3.104 1.218.283 5.112-1.814 5.112-1.814" stroke-width="1.25"/></svg>`;
-
-export const SloppinessArtistIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 12.563c1.655-.886 5.9-3.293 8.568-4.354 2.668-1.063.101 2.821 1.32 3.104 1.218.283 5.112-1.814 5.112-1.814m-15.086.26c2.31-1.24 6.265-2.952 8.865-3.926 2.6-.975.092 2.588 1.209 2.849 1.118.26 4.688-1.665 4.688-1.665" stroke-width="1.25"/></svg>`;
-
-export const SloppinessCartoonistIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 11.513c1.655-.886 5.9-3.293 8.568-4.354 2.668-1.063.101 2.821 1.32 3.104 1.218.283 5.112-1.814 5.112-1.814m-15.086.26c2.31-1.24 5.265-1.952 7.865-2.926 2.6-.975 1.092 2.588 2.209 2.849 1.118.26 4.688-1.665 4.688-1.665m-14.676-.027c2.386-1.098 4.79-1.498 7.478-2.26 2.687-.762.066 2.03 1.832 2.675 1.118.26 4.688-1.665 4.688-1.665" stroke-width="1.25"/></svg>`;
-
-// ---------------------------------------------------------------------------
-// Edge (Roundness) Icons
-// ---------------------------------------------------------------------------
-
-export const EdgeSharpIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M3.33 10V6.67c0-.63 0-1.74 0-3.33C4.95 3.33 6.06 3.33 6.67 3.33H10"/><path d="M10 3.33h3.33c.63 0 1.74 0 3.34.01V6.67 10"/><path d="M16.67 10v3.33c0 .63 0 1.74-.01 3.34H13.33 10"/><path d="M10 16.67H6.67c-.63 0-1.74 0-3.34-.01V13.33 10"/></svg>`;
-
-export const EdgeRoundIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M4 12v-4a4 4 0 0 1 4-4h4"/><path d="M12 4h4a4 4 0 0 1 4 4v4"/><path d="M20 12v4a4 4 0 0 1-4 4h-4"/><path d="M12 20H8a4 4 0 0 1-4-4v-4"/></svg>`;
-
-// ---------------------------------------------------------------------------
-// Arrow Type Icons (24x24)
-// ---------------------------------------------------------------------------
-
-export const ArrowTypeSharpIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M6 18l12-12"/><path d="M18 10V6h-4"/></svg>`;
-
-export const ArrowTypeRoundIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M16 12l4-3-4-3"/><path d="M6 20c0-6.075 4.925-11 11-11h3"/></svg>`;
-
-export const ArrowTypeElbowIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 19h6c1.097 0 2-.903 2-2V9c0-1.097.903-2 2-2h7"/><path d="M18 4l3 3-3 3"/></svg>`;
-
-// ---------------------------------------------------------------------------
-// Arrowhead Icons (40x20)
-// ---------------------------------------------------------------------------
-
-export const ArrowheadNoneIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"><path d="M7 11H19" opacity="0.3"/><path d="M25 6L33 16M33 6L25 16" opacity="0.3"/></svg>`;
-
-export const ArrowheadArrowIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7 11H33M23 5L33 11L23 17"/></svg>`;
-
-export const ArrowheadTriangleIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7 11H25"/><path d="M25 5L35 11L25 17Z" fill="currentColor"/></svg>`;
-
-export const ArrowheadBarIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7 11H33"/><path d="M33 5V17"/></svg>`;
-
-export const ArrowheadCircleIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7 11H24"/><circle cx="30" cy="11" r="5"/></svg>`;
-
-export const ArrowheadDiamondIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M7 11H22"/><path d="M28 3L36 11L28 19L20 11Z"/></svg>`;
-
-// Flipped versions for start arrowheads
-export const ArrowheadNoneStartIcon = ArrowheadNoneIcon;
-
-export const ArrowheadArrowStartIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M33 11H7M17 5L7 11L17 17"/></svg>`;
-
-export const ArrowheadTriangleStartIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M33 11H15"/><path d="M15 5L5 11L15 17Z" fill="currentColor"/></svg>`;
-
-export const ArrowheadBarStartIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M33 11H7"/><path d="M7 5V17"/></svg>`;
-
-export const ArrowheadCircleStartIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M33 11H16"/><circle cx="10" cy="11" r="5"/></svg>`;
-
-export const ArrowheadDiamondStartIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 40 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M33 11H18"/><path d="M12 3L4 11L12 19L20 11Z"/></svg>`;
-
-// ---------------------------------------------------------------------------
-// Font Family Icons (20x20)
-// ---------------------------------------------------------------------------
-
-export const FontHandDrawnIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path clip-rule="evenodd" d="m7.643 15.69 7.774-7.773a2.357 2.357 0 1 0-3.334-3.334L4.31 12.357a3.333 3.333 0 0 0-.977 2.357v1.953h1.953c.884 0 1.732-.352 2.357-.977Z"/><path d="m11.25 5.417 3.333 3.333"/></g></svg>`;
-
-export const FontNormalIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M5.833 16.667v-10a3.333 3.333 0 0 1 3.334-3.334h1.666a3.333 3.333 0 0 1 3.334 3.334v10"/><path d="M5.833 10.833h8.334"/></g></svg>`;
-
-export const FontCodeIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M7 8l-4 4 4 4"/><path d="M17 8l4 4-4 4"/><path d="M14 4l-4 16"/></svg>`;
-
-// ---------------------------------------------------------------------------
-// Text Align Icons (24x24)
-// ---------------------------------------------------------------------------
-
-export const TextAlignLeftIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><line x1="4" y1="8" x2="20" y2="8"/><line x1="4" y1="12" x2="12" y2="12"/><line x1="4" y1="16" x2="16" y2="16"/></svg>`;
-
-export const TextAlignCenterIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><line x1="4" y1="8" x2="20" y2="8"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="6" y1="16" x2="18" y2="16"/></svg>`;
-
-export const TextAlignRightIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><line x1="4" y1="8" x2="20" y2="8"/><line x1="12" y1="12" x2="20" y2="12"/><line x1="8" y1="16" x2="20" y2="16"/></svg>`;
-
-// Vertical Align (24x24)
-export const VerticalAlignTopIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M8 4h8"/><path d="M12 20V8"/><path d="M8 12l4-4 4 4"/></svg>`;
-
-export const VerticalAlignMiddleIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 3v5"/><path d="M8 8l4 4 4-4"/><path d="M12 21v-5"/><path d="M8 16l4-4 4 4"/></svg>`;
-
-export const VerticalAlignBottomIcon = `<svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M8 20h8"/><path d="M12 4v12"/><path d="M8 12l4 4 4-4"/></svg>`;
diff --git a/web/apps/web-ele/src/components/zq-draw/composables/use-canvas-resize.ts b/web/apps/web-ele/src/components/zq-draw/composables/use-canvas-resize.ts
deleted file mode 100644
index f00dd5f..0000000
--- a/web/apps/web-ele/src/components/zq-draw/composables/use-canvas-resize.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { onMounted, onBeforeUnmount, type Ref } from 'vue';
-import { useDrawStore } from '../store/draw-store';
-
-export function useCanvasResize(containerRef: Ref<HTMLElement | null>) {
-  const store = useDrawStore();
-  let observer: ResizeObserver | null = null;
-
-  function updateSize() {
-    const el = containerRef.value;
-    if (!el) return;
-    const rect = el.getBoundingClientRect();
-    store.canvasWidth = rect.width;
-    store.canvasHeight = rect.height;
-    store.offsetTop = rect.top;
-    store.offsetLeft = rect.left;
-    store.requestRender();
-  }
-
-  onMounted(() => {
-    updateSize();
-    if (containerRef.value) {
-      observer = new ResizeObserver(() => updateSize());
-      observer.observe(containerRef.value);
-    }
-  });
-
-  onBeforeUnmount(() => {
-    observer?.disconnect();
-  });
-
-  return { updateSize };
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/composables/use-draw-engine.ts b/web/apps/web-ele/src/components/zq-draw/composables/use-draw-engine.ts
deleted file mode 100644
index de690e2..0000000
--- a/web/apps/web-ele/src/components/zq-draw/composables/use-draw-engine.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { onMounted, onBeforeUnmount, watch } from 'vue';
-import type { DrawData } from '../types';
-import { useDrawStore } from '../store/draw-store';
-
-export function useDrawEngine(opts: {
-  initialData?: DrawData | null;
-  readonly?: boolean;
-}) {
-  const store = useDrawStore();
-
-  onMounted(() => {
-    store.init();
-
-    if (opts.initialData) {
-      store.loadDrawData(opts.initialData);
-    }
-
-    store.requestRender();
-  });
-
-  watch(
-    () => opts.readonly,
-    (val) => {
-      store.viewModeEnabled = !!val;
-      store.requestRender();
-    },
-  );
-
-  onBeforeUnmount(() => {
-    store.destroy();
-  });
-
-  return { store };
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/composables/use-keyboard.ts b/web/apps/web-ele/src/components/zq-draw/composables/use-keyboard.ts
deleted file mode 100644
index 297a48f..0000000
--- a/web/apps/web-ele/src/components/zq-draw/composables/use-keyboard.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import { onMounted, onBeforeUnmount } from 'vue';
-import { useDrawStore } from '../store/draw-store';
-import { TOOL_SHORTCUTS } from '../constants';
-import type { ToolType, DrawLinearElement, DrawElement } from '../types';
-import { deletePoints } from '../elements/linear-element-editor';
-import { serializeAsJSON, deserializeFromJSON } from '../data/json';
-
-export function useKeyboard() {
-  const store = useDrawStore();
-
-  function handleKeyDown(e: KeyboardEvent) {
-    if (store.viewModeEnabled) return;
-
-    const target = e.target as HTMLElement;
-    const isTextInput =
-      target.tagName === 'INPUT' ||
-      target.tagName === 'TEXTAREA' ||
-      target.isContentEditable;
-
-    if (isTextInput) {
-      if (e.key === 'Escape' && store.editingTextElement) {
-        return;
-      }
-      return;
-    }
-
-    if (store.editingTextElement) {
-      if (e.key === 'Escape') {
-        store.editingTextElement = null;
-        store.requestRender();
-      }
-      return;
-    }
-
-    const ctrl = e.ctrlKey || e.metaKey;
-
-    // Open file (Ctrl+O)
-    if (ctrl && e.key.toLowerCase() === 'o' && !e.shiftKey) {
-      e.preventDefault();
-      const input = document.createElement('input');
-      input.type = 'file';
-      input.accept = '.json,.excalidraw';
-      input.onchange = async () => {
-        const file = input.files?.[0];
-        if (!file) return;
-        const text = await file.text();
-        const data = deserializeFromJSON(text);
-        if (data) store.loadDrawData(data);
-      };
-      input.click();
-      return;
-    }
-
-    // Save to disk (Ctrl+Shift+S)
-    if (ctrl && e.key.toLowerCase() === 's' && e.shiftKey) {
-      e.preventDefault();
-      const json = serializeAsJSON(
-        store.scene.getElements(),
-        store.getAppState(),
-        store.files,
-      );
-      const blob = new Blob([json], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `${store.getAppState().name || 'drawing'}.zqdraw.json`;
-      a.click();
-      URL.revokeObjectURL(url);
-      return;
-    }
-
-    // Undo / Redo
-    if (ctrl && e.key === 'z' && !e.shiftKey) {
-      e.preventDefault();
-      store.undo();
-      return;
-    }
-    if (ctrl && (e.key === 'y' || (e.key.toLowerCase() === 'z' && e.shiftKey))) {
-      e.preventDefault();
-      store.redo();
-      return;
-    }
-
-    // Copy / Cut / Paste (check Alt variants first)
-    if (ctrl && e.altKey && e.key === 'c') {
-      e.preventDefault();
-      store.copyStyle();
-      return;
-    }
-    if (ctrl && e.altKey && e.key === 'v') {
-      e.preventDefault();
-      store.pasteStyle();
-      return;
-    }
-    if (ctrl && e.key === 'c' && !e.altKey) {
-      e.preventDefault();
-      store.copySelectedElements();
-      return;
-    }
-    if (ctrl && e.key === 'x') {
-      e.preventDefault();
-      store.cutSelectedElements();
-      return;
-    }
-    if (ctrl && e.key === 'v' && !e.altKey) {
-      e.preventDefault();
-      store.pasteFromClipboard();
-      return;
-    }
-
-    // Duplicate
-    if (ctrl && e.key === 'd') {
-      e.preventDefault();
-      store.duplicateSelectedElements();
-      return;
-    }
-
-    // Select All
-    if (ctrl && e.key === 'a') {
-      e.preventDefault();
-      store.selectAll();
-      return;
-    }
-
-    // Delete (linear editor points or elements)
-    if (e.key === 'Delete' || e.key === 'Backspace') {
-      e.preventDefault();
-      if (store.editingLinearElement && store.editingLinearElement.selectedPointIndices.length > 0) {
-        const editorState = store.editingLinearElement;
-        const el = store.scene.getElement(editorState.elementId) as DrawLinearElement | null;
-        if (el) {
-          const updated = deletePoints(el, editorState.selectedPointIndices);
-          if (updated) {
-            store.recordHistory();
-            store.updateElement(el.id, updated as Partial<DrawElement>);
-            editorState.selectedPointIndices = [];
-            store.requestRender();
-          }
-        }
-        return;
-      }
-      store.deleteSelectedElementsWithBindings();
-      return;
-    }
-
-    // Group / Ungroup
-    if (ctrl && e.key === 'g' && !e.shiftKey) {
-      e.preventDefault();
-      store.groupSelected();
-      return;
-    }
-    if (ctrl && e.key.toLowerCase() === 'g' && e.shiftKey) {
-      e.preventDefault();
-      store.ungroupSelected();
-      return;
-    }
-
-    // Lock / Unlock
-    if (ctrl && e.key === 'l' && !e.shiftKey) {
-      e.preventDefault();
-      if (store.isSelectedLocked) {
-        store.unlockSelected();
-      } else {
-        store.lockSelected();
-      }
-      return;
-    }
-
-    // Z-index: Ctrl+] / Ctrl+[
-    if (ctrl && e.key === ']' && !e.shiftKey) {
-      e.preventDefault();
-      store.bringForward();
-      return;
-    }
-    if (ctrl && e.key === '[' && !e.shiftKey) {
-      e.preventDefault();
-      store.sendBackward();
-      return;
-    }
-    if (ctrl && (e.key === '}' || (e.key === ']' && e.shiftKey))) {
-      e.preventDefault();
-      store.bringToFront();
-      return;
-    }
-    if (ctrl && (e.key === '{' || (e.key === '[' && e.shiftKey))) {
-      e.preventDefault();
-      store.sendToBack();
-      return;
-    }
-
-    // Hyperlink
-    if (ctrl && e.key === 'k') {
-      e.preventDefault();
-      if (store.selectedElements.length === 1) {
-        store.showHyperlinkPopup = 'editor';
-      }
-      return;
-    }
-
-    // Flip
-    if (e.shiftKey && e.key === 'H' && !ctrl) {
-      e.preventDefault();
-      store.flipSelectedHorizontal();
-      return;
-    }
-    if (e.shiftKey && e.key === 'V' && !ctrl) {
-      e.preventDefault();
-      store.flipSelectedVertical();
-      return;
-    }
-
-    // Toggle snap mode (Alt+S)
-    if (e.altKey && e.key.toLowerCase() === 's') {
-      e.preventDefault();
-      store.objectsSnapModeEnabled = !store.objectsSnapModeEnabled;
-      return;
-    }
-
-    // Toggle stats panel (Alt+I)
-    if (e.altKey && e.key.toLowerCase() === 'i') {
-      e.preventDefault();
-      store.showStats = !store.showStats;
-      return;
-    }
-
-    // Toggle zen mode (Alt+Z)
-    if (e.altKey && e.key.toLowerCase() === 'z') {
-      e.preventDefault();
-      store.zenModeEnabled = !store.zenModeEnabled;
-      return;
-    }
-
-    // Escape
-    if (e.key === 'Escape') {
-      if (store.editingLinearElement) {
-        store.editingLinearElement = null;
-        store.requestRender();
-        return;
-      }
-      store.setActiveTool('selection');
-      store.clearSelection();
-      store.newElement = null;
-      store.selectionElement = null;
-      store.requestRender();
-      return;
-    }
-
-    // Zoom
-    if (ctrl && (e.key === '=' || e.key === '+')) {
-      e.preventDefault();
-      store.zoomIn();
-      return;
-    }
-    if (ctrl && e.key === '-') {
-      e.preventDefault();
-      store.zoomOut();
-      return;
-    }
-    if (ctrl && e.key === '0') {
-      e.preventDefault();
-      store.resetZoom();
-      return;
-    }
-    if (ctrl && e.key === '1' && !e.shiftKey) {
-      e.preventDefault();
-      store.zoomToFit();
-      return;
-    }
-    if (ctrl && (e.key === '!' || (e.key === '1' && e.shiftKey))) {
-      e.preventDefault();
-      store.zoomToFitSelection();
-      return;
-    }
-
-    // Tool shortcuts (single key)
-    if (!ctrl && !e.shiftKey && !e.altKey) {
-      const key = e.key.toLowerCase();
-      for (const [tool, shortcut] of Object.entries(TOOL_SHORTCUTS)) {
-        if (shortcut === key) {
-          store.setActiveTool(tool as ToolType);
-          return;
-        }
-      }
-    }
-  }
-
-  onMounted(() => {
-    document.addEventListener('keydown', handleKeyDown);
-  });
-
-  onBeforeUnmount(() => {
-    document.removeEventListener('keydown', handleKeyDown);
-  });
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/composables/use-pointer-events.ts b/web/apps/web-ele/src/components/zq-draw/composables/use-pointer-events.ts
deleted file mode 100644
index 8edba8b..0000000
--- a/web/apps/web-ele/src/components/zq-draw/composables/use-pointer-events.ts
+++ /dev/null
@@ -1,1347 +0,0 @@
-import { type Ref } from 'vue';
-import { useDrawStore } from '../store/draw-store';
-import type {
-  DrawElement,
-  DrawLinearElement,
-  DrawArrowElement,
-  DrawFreeDrawElement,
-  DrawSelectionElement,
-  GlobalPoint,
-  LocalPoint,
-  TransformHandleType,
-} from '../types';
-import { DRAGGING_THRESHOLD } from '../constants';
-import {
-  newRectangleElement,
-  newEllipseElement,
-  newDiamondElement,
-  newLineElement,
-  newArrowElement,
-  newFreeDrawElement,
-  newTextElement,
-  newSelectionElement,
-  newFrameElement,
-} from '../elements/new-element';
-import {
-  getTransformHandleAtPoint,
-  getLinearPointIndexAtPosition,
-  getLinearMidpointIndexAtPosition,
-} from '../elements/transform-handles';
-import { isElementInsideBox } from '../elements/collision';
-import { getCursorForTool } from '../core/cursor';
-import { EraserTrail } from '../core/eraser';
-import {
-  getHoveredElementForBinding,
-  bindArrowToElement,
-  unbindArrowFromElement,
-  isArrowElement,
-  getSnapMidpointNear,
-} from '../elements/binding';
-import {
-  isTextBindableContainer,
-  getBoundTextElement,
-  bindTextToContainer,
-  measureText,
-  isBoundToContainer,
-} from '../elements/bound-text';
-import {
-  getOutermostGroupId,
-  selectGroupsForSelectedElements,
-} from '../elements/group';
-import { SnapCache, snapDraggedElements, snapNewElement, snapResizeElement } from '../core/snap';
-import { getCommonBounds, getElementBounds } from '../elements/bounds';
-import {
-  createLinearEditorState,
-  isLinearElement as checkIsLinear,
-  handleLinearEditorPointerDown,
-  handleLinearEditorPointerMove,
-  handleLinearEditorPointerUp,
-  addPointAtMidpoint,
-} from '../elements/linear-element-editor';
-import {
-  createGestureState,
-  getGestureCenter,
-  getGestureDistance,
-} from '../core/gesture';
-
-interface PointerState {
-  isDown: boolean;
-  startX: number;
-  startY: number;
-  lastX: number;
-  lastY: number;
-  hasDragged: boolean;
-  hitElement: DrawElement | null;
-  hitHandle: TransformHandleType | null;
-  isPanning: boolean;
-  originalElements: Map<string, DrawElement>;
-}
-
-export function usePointerEvents(containerRef: Ref<HTMLElement | null>) {
-  const store = useDrawStore();
-
-  const state: PointerState = {
-    isDown: false,
-    startX: 0,
-    startY: 0,
-    lastX: 0,
-    lastY: 0,
-    hasDragged: false,
-    hitElement: null,
-    hitHandle: null,
-    isPanning: false,
-    originalElements: new Map(),
-  };
-
-  let spacePressed = false;
-  let eraserTrail: EraserTrail | null = null;
-  let eraserOriginalOpacities = new Map<string, number>();
-  const snapCache = new SnapCache();
-
-  // Multi-touch gesture state
-  const gestureState = createGestureState();
-  let isGesturing = false;
-
-  function getSceneCoords(e: PointerEvent): { x: number; y: number } {
-    const rect = containerRef.value?.getBoundingClientRect();
-    if (!rect) return { x: 0, y: 0 };
-    const vx = e.clientX - rect.left;
-    const vy = e.clientY - rect.top;
-    return store.viewportToScene(vx, vy);
-  }
-
-  function onPointerDown(e: PointerEvent) {
-    // Track pointers for gesture detection
-    gestureState.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    if (gestureState.pointers.size >= 2) {
-      isGesturing = true;
-      const dist = getGestureDistance(gestureState);
-      if (gestureState.initialDistance === null && dist !== null) {
-        gestureState.initialDistance = dist;
-        gestureState.initialScale = store.zoom.value;
-      }
-      gestureState.lastCenter = getGestureCenter(gestureState);
-      return;
-    }
-
-    if (store.viewModeEnabled && store.activeTool.type !== 'hand') return;
-
-    const { x, y } = getSceneCoords(e);
-    state.isDown = true;
-    state.startX = x;
-    state.startY = y;
-    state.lastX = x;
-    state.lastY = y;
-    state.hasDragged = false;
-    state.hitElement = null;
-    state.hitHandle = null;
-    state.isPanning = false;
-    dragHistoryRecorded = false;
-    store.cursorButton = 'down';
-
-    const tool = store.activeTool.type;
-
-    // panning (hand tool, middle button, space+click)
-    if (tool === 'hand' || e.button === 1 || spacePressed) {
-      state.isPanning = true;
-      setCursor('grabbing');
-      return;
-    }
-
-    if (tool === 'eraser') {
-      handleEraserStart(x, y);
-      return;
-    }
-
-    if (tool === 'selection') {
-      handleSelectionPointerDown(x, y, e);
-    } else if (tool === 'freedraw') {
-      handleFreeDrawStart(x, y, e);
-    } else if (tool === 'text') {
-      handleTextCreate(x, y);
-      e.preventDefault();
-    } else if (tool === 'frame') {
-      handleFrameStart(x, y);
-    } else if (tool === 'image') {
-      handleImageInsert(x, y);
-    } else if (
-      tool === 'rectangle' ||
-      tool === 'ellipse' ||
-      tool === 'diamond' ||
-      tool === 'line' ||
-      tool === 'arrow'
-    ) {
-      handleShapeStart(x, y, tool);
-    }
-  }
-
-  function onPointerMove(e: PointerEvent) {
-    // Handle multi-touch gesture
-    if (gestureState.pointers.has(e.pointerId)) {
-      gestureState.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-    }
-    if (isGesturing && gestureState.pointers.size >= 2) {
-      const newDist = getGestureDistance(gestureState);
-      const newCenter = getGestureCenter(gestureState);
-
-      if (newDist !== null && gestureState.initialDistance !== null && gestureState.initialScale !== null) {
-        const scale = newDist / gestureState.initialDistance;
-        const newZoom = gestureState.initialScale * scale;
-        store.setZoom(newZoom);
-      }
-
-      if (newCenter && gestureState.lastCenter) {
-        const dx = (newCenter.x - gestureState.lastCenter.x) / store.zoom.value;
-        const dy = (newCenter.y - gestureState.lastCenter.y) / store.zoom.value;
-        store.scrollX += dx;
-        store.scrollY += dy;
-      }
-
-      gestureState.lastCenter = newCenter;
-      store.requestRender();
-      return;
-    }
-
-    const { x, y } = getSceneCoords(e);
-
-    if (!state.isDown) {
-      updateCursor(x, y);
-      return;
-    }
-
-    const dx = x - state.startX;
-    const dy = y - state.startY;
-    if (!state.hasDragged && Math.hypot(dx, dy) > DRAGGING_THRESHOLD) {
-      state.hasDragged = true;
-    }
-
-    if (state.isPanning) {
-      store.scrollX += x - state.lastX;
-      store.scrollY += y - state.lastY;
-      // recalculate because scroll changed
-      const newCoords = getSceneCoords(e);
-      state.lastX = newCoords.x;
-      state.lastY = newCoords.y;
-      store.requestRender();
-      return;
-    }
-
-    const tool = store.activeTool.type;
-
-    if (tool === 'eraser') {
-      handleEraserMove(x, y);
-      return;
-    }
-
-    if (tool === 'selection') {
-      handleSelectionPointerMove(x, y, e.shiftKey);
-    } else if (tool === 'freedraw') {
-      handleFreeDrawMove(x, y, e);
-    } else if (
-      tool === 'rectangle' ||
-      tool === 'ellipse' ||
-      tool === 'diamond' ||
-      tool === 'frame'
-    ) {
-      handleShapeMove(x, y, e.shiftKey);
-    } else if (tool === 'line' || tool === 'arrow') {
-      handleLinearMove(x, y, e.shiftKey);
-    }
-
-    state.lastX = x;
-    state.lastY = y;
-  }
-
-  function onPointerUp(e: PointerEvent) {
-    gestureState.pointers.delete(e.pointerId);
-    if (isGesturing) {
-      if (gestureState.pointers.size < 2) {
-        isGesturing = false;
-        gestureState.initialDistance = null;
-        gestureState.initialScale = null;
-        gestureState.lastCenter = null;
-      }
-      return;
-    }
-
-    if (!state.isDown) return;
-    state.isDown = false;
-    store.cursorButton = 'up';
-
-    const { x, y } = getSceneCoords(e);
-
-    if (state.isPanning) {
-      state.isPanning = false;
-      setCursor(getCursorForTool(store.activeTool.type));
-      return;
-    }
-
-    const tool = store.activeTool.type;
-
-    if (tool === 'eraser') {
-      handleEraserEnd();
-    } else if (tool === 'selection') {
-      handleSelectionPointerUp(x, y);
-    } else if (tool === 'freedraw') {
-      handleFreeDrawEnd(x, y, e);
-    } else if (
-      tool === 'rectangle' ||
-      tool === 'ellipse' ||
-      tool === 'diamond' ||
-      tool === 'line' ||
-      tool === 'arrow' ||
-      tool === 'frame'
-    ) {
-      handleShapeEnd();
-    }
-
-    state.originalElements.clear();
-    store.selectedElementsAreBeingDragged = false;
-    store.isResizing = false;
-    store.isRotating = false;
-  }
-
-  // ---- Selection tool handlers ----
-  function handleSelectionPointerDown(x: number, y: number, e: PointerEvent) {
-    // check linear element editor interaction
-    if (store.editingLinearElement) {
-      const editorState = store.editingLinearElement;
-      const el = store.scene.getElement(editorState.elementId) as DrawLinearElement | null;
-      if (el && checkIsLinear(el)) {
-        const result = handleLinearEditorPointerDown(editorState, el, x, y, store.zoom.value);
-        if (result.action === 'drag-point') {
-          store.recordHistory();
-          state.hitElement = el;
-          state.originalElements.set(el.id, { ...el } as DrawElement);
-          return;
-        }
-        if (result.action === 'add-midpoint' && result.pointIndex !== undefined) {
-          store.recordHistory();
-          const { updatedElement, newPointIndex } = addPointAtMidpoint(el, result.pointIndex);
-          store.updateElement(el.id, updatedElement as Partial<DrawElement>);
-          editorState.selectedPointIndices = [newPointIndex];
-          editorState.isDragging = true;
-          editorState.dragStartPoint = [x, y] as GlobalPoint;
-          editorState.lastDragPoint = [x, y] as GlobalPoint;
-          state.hitElement = store.scene.getElement(el.id) as DrawElement;
-          state.originalElements.set(el.id, { ...store.scene.getElement(el.id)! });
-          store.requestRender();
-          return;
-        }
-        // clicked outside points - exit editing
-        store.editingLinearElement = null;
-        store.requestRender();
-      }
-    }
-
-    // check linear point handles on selected linear elements (non-editing mode)
-    if (store.selectedElements.length === 1) {
-      const el = store.selectedElements[0]!;
-      if (checkIsLinear(el)) {
-        const ptIdx = getLinearPointIndexAtPosition(el, x, y, store.zoom.value);
-        if (ptIdx !== null) {
-          store.recordHistory();
-          store.editingLinearElement = createLinearEditorState(el.id);
-          store.editingLinearElement.selectedPointIndices = [ptIdx];
-          store.editingLinearElement.isDragging = true;
-          store.editingLinearElement.dragStartPoint = [x, y] as GlobalPoint;
-          store.editingLinearElement.lastDragPoint = [x, y] as GlobalPoint;
-          state.hitElement = el;
-          state.originalElements.set(el.id, { ...el });
-          store.requestRender();
-          return;
-        }
-
-        const linearEl = el as DrawLinearElement;
-        const pointCount = linearEl.points?.length ?? 0;
-        if (pointCount === 2) {
-          const midIdx = getLinearMidpointIndexAtPosition(el, x, y, store.zoom.value);
-          if (midIdx !== null) {
-            store.recordHistory();
-            const { updatedElement, newPointIndex } = addPointAtMidpoint(linearEl, midIdx);
-            store.updateElement(el.id, updatedElement as Partial<DrawElement>);
-            store.editingLinearElement = createLinearEditorState(el.id);
-            store.editingLinearElement.selectedPointIndices = [newPointIndex];
-            store.editingLinearElement.isDragging = true;
-            store.editingLinearElement.dragStartPoint = [x, y] as GlobalPoint;
-            store.editingLinearElement.lastDragPoint = [x, y] as GlobalPoint;
-            state.hitElement = store.scene.getElement(el.id) as DrawElement;
-            state.originalElements.set(el.id, { ...store.scene.getElement(el.id)! });
-            store.requestRender();
-            return;
-          }
-        }
-      }
-    }
-
-    // check transform handles on selected elements
-    if (store.selectedElements.length === 1) {
-      const el = store.selectedElements[0]!;
-      const handle = getTransformHandleAtPoint(
-        el,
-        [x, y],
-        store.zoom.value,
-      );
-      if (handle) {
-        store.recordHistory();
-        state.hitHandle = handle;
-        state.hitElement = el;
-        state.originalElements.set(el.id, { ...el });
-        if (handle === 'rotation') {
-          store.isRotating = true;
-        } else {
-          store.isResizing = true;
-        }
-        return;
-      }
-    }
-
-    // check hit on elements
-    let hitEl = store.getElementAtPosition(x, y);
-    if (hitEl && isBoundToContainer(hitEl)) {
-      const containerId = (hitEl as any).containerId;
-      const containerEl = store.scene.getElement(containerId);
-      if (containerEl && !containerEl.isDeleted) {
-        hitEl = containerEl;
-      }
-    }
-    if (hitEl) {
-      state.hitElement = hitEl;
-
-      const outerGroupId = getOutermostGroupId(hitEl, store.editingGroupId);
-      if (outerGroupId && !e.shiftKey) {
-        const { selectedElementIds: newIds, selectedGroupIds: newGids } =
-          selectGroupsForSelectedElements(
-            { [hitEl.id]: true },
-            store.elements,
-            store.editingGroupId,
-          );
-        store.selectedElementIds = newIds;
-        store.selectedGroupIds = newGids;
-      } else if (!store.selectedElementIds[hitEl.id]) {
-        store.selectElement(hitEl.id, e.shiftKey);
-      }
-
-      for (const el of store.selectedElements) {
-        state.originalElements.set(el.id, { ...el });
-      }
-    } else {
-      // start rubber band selection
-      if (!e.shiftKey) {
-        store.clearSelection();
-      }
-      store.selectionElement = newSelectionElement({
-        x,
-        y,
-        width: 0,
-        height: 0,
-      });
-    }
-  }
-
-  let dragHistoryRecorded = false;
-  let dragOriginalBounds: Bounds | null = null;
-
-  function handleSelectionPointerMove(x: number, y: number, shiftKey = false) {
-    // linear editor point dragging
-    if (store.editingLinearElement?.isDragging) {
-      const editorState = store.editingLinearElement;
-      const el = store.scene.getElement(editorState.elementId) as DrawLinearElement | null;
-      if (el && checkIsLinear(el)) {
-        const updated = handleLinearEditorPointerMove(editorState, el, x, y, shiftKey);
-        if (updated) {
-          store.updateElement(el.id, updated as Partial<DrawElement>);
-          store.requestRender();
-        }
-      }
-      return;
-    }
-
-    if (state.hitHandle && state.hitElement) {
-      handleTransform(x, y);
-      return;
-    }
-
-    if (state.hitElement && state.hasDragged) {
-      if (!dragHistoryRecorded) {
-        store.recordHistory();
-        dragHistoryRecorded = true;
-
-        // Cache original bounds BEFORE any movement
-        dragOriginalBounds = getCommonBounds(store.selectedElements);
-
-        if (store.objectsSnapModeEnabled) {
-          const excludeIds = new Set(Object.keys(store.selectedElementIds));
-          snapCache.invalidate();
-          snapCache.update(store.elements, excludeIds);
-        }
-      }
-      store.selectedElementsAreBeingDragged = true;
-
-      const totalDx = x - state.startX;
-      const totalDy = y - state.startY;
-
-      let finalDx: number;
-      let finalDy: number;
-
-      if (store.objectsSnapModeEnabled && dragOriginalBounds) {
-        const { snappedOffset, snapLines } = snapDraggedElements(
-          { x: totalDx, y: totalDy },
-          dragOriginalBounds,
-          snapCache,
-          store.zoom.value,
-        );
-        finalDx = snappedOffset.x;
-        finalDy = snappedOffset.y;
-        store.setSnapLines(snapLines);
-      } else if (store.gridModeEnabled && dragOriginalBounds) {
-        const rawX = dragOriginalBounds[0] + totalDx;
-        const rawY = dragOriginalBounds[1] + totalDy;
-        finalDx = store.snapToGrid(rawX) - dragOriginalBounds[0];
-        finalDy = store.snapToGrid(rawY) - dragOriginalBounds[1];
-      } else {
-        finalDx = totalDx;
-        finalDy = totalDy;
-      }
-
-      // Apply absolute offset from original positions
-      for (const el of store.selectedElements) {
-        if (isBoundToContainer(el)) continue;
-        const orig = state.originalElements.get(el.id);
-        if (orig) {
-          store.updateElement(el.id, {
-            x: orig.x + finalDx,
-            y: orig.y + finalDy,
-          } as Partial<DrawElement>);
-        }
-      }
-
-      for (const el of store.selectedElements) {
-        if (isBoundToContainer(el)) continue;
-        store.updateBindingsAfterMove(el.id);
-      }
-
-      store.requestRender();
-      return;
-    }
-
-    if (store.selectionElement) {
-      // update rubber band
-      const selEl = store.selectionElement;
-      store.selectionElement = {
-        ...selEl,
-        width: x - selEl.x,
-        height: y - selEl.y,
-      } as DrawSelectionElement;
-      store.requestRender();
-    }
-  }
-
-  function handleSelectionPointerUp(x: number, y: number) {
-    // linear editor point drag end - rebind arrow endpoints
-    if (store.editingLinearElement?.isDragging) {
-      const editorState = store.editingLinearElement;
-      handleLinearEditorPointerUp(editorState);
-      const el = store.scene.getElement(editorState.elementId);
-      if (el && isArrowElement(el)) {
-        const arrow = el as DrawArrowElement;
-        const draggedIndices = editorState.selectedPointIndices;
-        const isStartEndpoint = draggedIndices.includes(0);
-        const isEndEndpoint = draggedIndices.includes(arrow.points.length - 1);
-
-        if (isStartEndpoint) {
-          const startPt = [arrow.x + arrow.points[0]![0], arrow.y + arrow.points[0]![1]] as GlobalPoint;
-          const target = getHoveredElementForBinding(startPt, store.elements, store.zoom.value);
-          if (target && target.id !== arrow.id) {
-            bindArrowToElement(arrow, 'start', target, store.scene);
-          } else {
-            unbindArrowFromElement(arrow, 'start', store.scene);
-          }
-        }
-        if (isEndEndpoint) {
-          const endPt = [arrow.x + arrow.points[arrow.points.length - 1]![0], arrow.y + arrow.points[arrow.points.length - 1]![1]] as GlobalPoint;
-          const target = getHoveredElementForBinding(endPt, store.elements, store.zoom.value);
-          if (target && target.id !== arrow.id) {
-            bindArrowToElement(arrow, 'end', target, store.scene);
-          } else {
-            unbindArrowFromElement(arrow, 'end', store.scene);
-          }
-        }
-        store.updateBindingsAfterMove(el.id);
-      }
-      store.requestRender();
-      return;
-    }
-
-    store.clearSnapLines();
-
-    if (state.hasDragged && state.hitElement) {
-      const draggedIds = Object.keys(store.selectedElementIds);
-      store.updateFrameMembership(draggedIds);
-    }
-
-    dragHistoryRecorded = false;
-    dragOriginalBounds = null;
-
-    if (state.hitHandle) {
-      for (const el of store.selectedElements) {
-        store.updateBindingsAfterResize(el.id);
-      }
-      state.hitHandle = null;
-    }
-
-    if (store.selectionElement) {
-      // finalize rubber band selection
-      const sel = store.selectionElement;
-      const box = {
-        x: Math.min(sel.x, sel.x + sel.width),
-        y: Math.min(sel.y, sel.y + sel.height),
-        width: Math.abs(sel.width),
-        height: Math.abs(sel.height),
-      };
-
-      if (box.width > 1 && box.height > 1) {
-        const ids: string[] = [];
-        for (const el of store.elements) {
-          if (isElementInsideBox(el, box)) {
-            ids.push(el.id);
-          }
-        }
-        if (ids.length > 0) {
-          store.selectElements(ids);
-        }
-      }
-
-      store.selectionElement = null;
-      store.requestRender();
-    }
-  }
-
-  function handleTransform(x: number, y: number) {
-    if (!state.hitElement || !state.hitHandle) return;
-
-    const original = state.originalElements.get(state.hitElement.id);
-    if (!original) return;
-
-    if (state.hitHandle === 'rotation') {
-      const cx = original.x + original.width / 2;
-      const cy = original.y + original.height / 2;
-      const angle = Math.atan2(y - cy, x - cx) + Math.PI / 2;
-      store.updateElement(state.hitElement.id, { angle } as any);
-    } else {
-      let updates = computeResize(original, state.hitHandle, x, y, state.startX, state.startY);
-
-      // Snap resize edges if snap mode is enabled and element is not rotated
-      if (store.objectsSnapModeEnabled && Math.abs(original.angle) < 0.01) {
-        // Initialize snap cache on first resize frame
-        if (!dragHistoryRecorded) {
-          snapCache.invalidate();
-          snapCache.update(store.elements, new Set([state.hitElement.id]));
-        }
-
-        const newX = (updates as any).x ?? original.x;
-        const newY = (updates as any).y ?? original.y;
-        const newW = (updates as any).width ?? original.width;
-        const newH = (updates as any).height ?? original.height;
-
-        // Determine which edges are being resized
-        let resizingEdgeX: number | null = null;
-        let resizingEdgeY: number | null = null;
-        const handle = state.hitHandle;
-
-        if (handle === 'e' || handle === 'ne' || handle === 'se') {
-          resizingEdgeX = newX + newW;
-        } else if (handle === 'w' || handle === 'nw' || handle === 'sw') {
-          resizingEdgeX = newX;
-        }
-        if (handle === 's' || handle === 'se' || handle === 'sw') {
-          resizingEdgeY = newY + newH;
-        } else if (handle === 'n' || handle === 'ne' || handle === 'nw') {
-          resizingEdgeY = newY;
-        }
-
-        const { offsetX, offsetY, snapLines } = snapResizeElement(
-          resizingEdgeX,
-          resizingEdgeY,
-          snapCache,
-          store.zoom.value,
-        );
-
-        if (offsetX !== 0) {
-          if (handle === 'e' || handle === 'ne' || handle === 'se') {
-            (updates as any).width = newW + offsetX;
-          } else if (handle === 'w' || handle === 'nw' || handle === 'sw') {
-            (updates as any).x = newX + offsetX;
-            (updates as any).width = newW - offsetX;
-          }
-        }
-        if (offsetY !== 0) {
-          if (handle === 's' || handle === 'se' || handle === 'sw') {
-            (updates as any).height = newH + offsetY;
-          } else if (handle === 'n' || handle === 'ne' || handle === 'nw') {
-            (updates as any).y = newY + offsetY;
-            (updates as any).height = newH - offsetY;
-          }
-        }
-
-        store.setSnapLines(snapLines);
-      }
-
-      store.updateElement(state.hitElement.id, updates as Partial<DrawElement>);
-    }
-
-    store.requestRender();
-  }
-
-  // ---- Image insertion handler ----
-  function handleImageInsert(x: number, y: number) {
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = 'image/*';
-    input.style.display = 'none';
-    input.onchange = async () => {
-      const file = input.files?.[0];
-      if (file) {
-        await store.addImageFromFile(file, x, y);
-        if (!store.activeTool.locked) {
-          store.setActiveTool('selection');
-        }
-      }
-      input.remove();
-    };
-    document.body.appendChild(input);
-    input.click();
-    state.isDown = false;
-    store.cursorButton = 'up';
-  }
-
-  // ---- Shape creation handlers ----
-  function handleShapeStart(
-    x: number,
-    y: number,
-    tool: 'rectangle' | 'ellipse' | 'diamond' | 'line' | 'arrow',
-  ) {
-    // Initialize snap cache for new element creation
-    if (store.objectsSnapModeEnabled) {
-      snapCache.invalidate();
-      snapCache.update(store.elements, new Set());
-    }
-
-    let sx = store.gridModeEnabled ? store.snapToGrid(x) : x;
-    let sy = store.gridModeEnabled ? store.snapToGrid(y) : y;
-
-    // For arrow/line, snap start point to binding target
-    if (tool === 'arrow' || tool === 'line') {
-      const point = [x, y] as GlobalPoint;
-      const hovered = getHoveredElementForBinding(point, store.elements, store.zoom.value);
-      if (hovered) {
-        const midPoint = getSnapMidpointNear(point, hovered, store.zoom.value);
-        if (midPoint) {
-          sx = midPoint[0];
-          sy = midPoint[1];
-        }
-      }
-    }
-
-    const opts = {
-      x: sx,
-      y: sy,
-      strokeColor: store.currentItemStrokeColor,
-      backgroundColor: store.currentItemBackgroundColor,
-      fillStyle: store.currentItemFillStyle as any,
-      strokeWidth: store.currentItemStrokeWidth,
-      strokeStyle: store.currentItemStrokeStyle as any,
-      roughness: store.currentItemRoughness,
-      opacity: store.currentItemOpacity,
-    };
-
-    let el: DrawElement;
-    if (tool === 'line') {
-      el = newLineElement({ ...opts, points: [[0, 0] as LocalPoint, [0, 0] as LocalPoint] });
-    } else if (tool === 'arrow') {
-      el = newArrowElement({ ...opts, points: [[0, 0] as LocalPoint, [0, 0] as LocalPoint] });
-    } else if (tool === 'ellipse') {
-      el = newEllipseElement(opts);
-    } else if (tool === 'diamond') {
-      el = newDiamondElement(opts);
-    } else {
-      el = newRectangleElement(opts);
-    }
-
-    store.newElement = el;
-  }
-
-  function handleFrameStart(x: number, y: number) {
-    const sx = store.gridModeEnabled ? store.snapToGrid(x) : x;
-    const sy = store.gridModeEnabled ? store.snapToGrid(y) : y;
-    const el = newFrameElement({ x: sx, y: sy, width: 0, height: 0 });
-    store.newElement = el;
-  }
-
-  function handleShapeMove(x: number, y: number, shiftKey: boolean) {
-    if (!store.newElement) return;
-
-    let snappedX = store.gridModeEnabled ? store.snapToGrid(x) : x;
-    let snappedY = store.gridModeEnabled ? store.snapToGrid(y) : y;
-
-    let width = snappedX - store.newElement.x;
-    let height = snappedY - store.newElement.y;
-
-    if (shiftKey) {
-      const size = Math.max(Math.abs(width), Math.abs(height));
-      width = Math.sign(width) * size;
-      height = Math.sign(height) * size;
-    }
-
-    // Snap new element to reference points
-    if (store.objectsSnapModeEnabled) {
-      const elX = store.newElement.x;
-      const elY = store.newElement.y;
-      const rawBounds: Bounds = [
-        Math.min(elX, elX + width),
-        Math.min(elY, elY + height),
-        Math.max(elX, elX + width),
-        Math.max(elY, elY + height),
-      ];
-      const { snappedBounds, snapLines } = snapNewElement(rawBounds, snapCache, store.zoom.value);
-      const snapDx = snappedBounds[0] - rawBounds[0];
-      const snapDy = snappedBounds[1] - rawBounds[1];
-      width += snapDx * Math.sign(width || 1);
-      height += snapDy * Math.sign(height || 1);
-      store.setSnapLines(snapLines);
-    }
-
-    store.newElement = {
-      ...store.newElement,
-      width,
-      height,
-      version: (store.newElement.version ?? 0) + 1,
-    } as DrawElement;
-    store.requestRender();
-  }
-
-  function handleLinearMove(x: number, y: number, shiftKey: boolean) {
-    if (!store.newElement) return;
-    const el = store.newElement as DrawLinearElement;
-
-    const snappedX = store.gridModeEnabled ? store.snapToGrid(x) : x;
-    const snappedY = store.gridModeEnabled ? store.snapToGrid(y) : y;
-
-    let endX = snappedX - el.x;
-    let endY = snappedY - el.y;
-
-    if (shiftKey) {
-      const angle = Math.atan2(endY, endX);
-      const snapped = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4);
-      const dist = Math.hypot(endX, endY);
-      endX = Math.cos(snapped) * dist;
-      endY = Math.sin(snapped) * dist;
-    }
-
-    // Check for binding target at the endpoint
-    const endGlobal = [el.x + endX, el.y + endY] as GlobalPoint;
-    const hovered = getHoveredElementForBinding(endGlobal, store.elements, store.zoom.value);
-    if (hovered) {
-      const midPoint = getSnapMidpointNear(endGlobal, hovered, store.zoom.value);
-      store.suggestedBindings = [{ element: hovered, midPoint }];
-      if (midPoint) {
-        endX = midPoint[0] - el.x;
-        endY = midPoint[1] - el.y;
-      }
-    } else if (store.suggestedBindings.length > 0) {
-      store.suggestedBindings = [];
-    }
-
-    const newPoints: LocalPoint[] = [
-      el.points[0]!,
-      [endX, endY] as LocalPoint,
-    ];
-
-    store.newElement = {
-      ...el,
-      points: newPoints,
-      width: Math.abs(endX),
-      height: Math.abs(endY),
-      version: (el.version ?? 0) + 1,
-    } as DrawElement;
-    store.requestRender();
-  }
-
-  function handleShapeEnd() {
-    store.clearSnapLines();
-    if (!store.newElement) return;
-
-    const el = store.newElement;
-    const isLinear = el.type === 'line' || el.type === 'arrow';
-
-    let { x, y, width, height } = el;
-
-    if (!isLinear) {
-      // normalize negative dimensions for shapes (not lines/arrows)
-      if (width < 0) {
-        x += width;
-        width = -width;
-      }
-      if (height < 0) {
-        y += height;
-        height = -height;
-      }
-    } else {
-      width = Math.abs(width);
-      height = Math.abs(height);
-    }
-
-    if (width < 2 && height < 2) {
-      store.newElement = null;
-      store.requestRender();
-      return;
-    }
-
-    const finalized = { ...el, x, y, width, height } as DrawElement;
-    store.addElement(finalized);
-    store.selectElement(finalized.id);
-
-    if (isArrowElement(finalized)) {
-      const arrow = finalized as DrawArrowElement;
-      const startPt = [arrow.x + arrow.points[0]![0], arrow.y + arrow.points[0]![1]] as GlobalPoint;
-      const endPt = [arrow.x + arrow.points[arrow.points.length - 1]![0], arrow.y + arrow.points[arrow.points.length - 1]![1]] as GlobalPoint;
-
-      const startTarget = getHoveredElementForBinding(startPt, store.elements, store.zoom.value);
-      if (startTarget && startTarget.id !== finalized.id) {
-        bindArrowToElement(arrow, 'start', startTarget, store.scene);
-      }
-      const endTarget = getHoveredElementForBinding(endPt, store.elements, store.zoom.value);
-      if (endTarget && endTarget.id !== finalized.id) {
-        bindArrowToElement(arrow, 'end', endTarget, store.scene);
-      }
-    }
-
-    store.newElement = null;
-    store.suggestedBindings = [];
-
-    if (!store.activeTool.locked) {
-      store.setActiveTool('selection');
-    }
-    store.requestRender();
-  }
-
-  // ---- FreeDraw handlers ----
-  function handleFreeDrawStart(x: number, y: number, e: PointerEvent) {
-    const simulatePressure = e.pressure === 0 || e.pressure === 0.5;
-    const el = newFreeDrawElement({
-      x,
-      y,
-      strokeColor: store.currentItemStrokeColor,
-      strokeWidth: store.currentItemStrokeWidth,
-      opacity: store.currentItemOpacity,
-      points: [[0, 0] as LocalPoint],
-      pressures: simulatePressure ? [] : [e.pressure],
-      simulatePressure,
-    });
-    store.newElement = el;
-  }
-
-  function handleFreeDrawMove(x: number, y: number, e: PointerEvent) {
-    if (!store.newElement || store.newElement.type !== 'freedraw') return;
-    const el = store.newElement as DrawFreeDrawElement;
-    const dx = x - el.x;
-    const dy = y - el.y;
-
-    const lastPoint = el.points[el.points.length - 1];
-    if (lastPoint && lastPoint[0] === dx && lastPoint[1] === dy) return;
-
-    const pressures = el.simulatePressure
-      ? el.pressures
-      : [...el.pressures, e.pressure];
-
-    store.newElement = {
-      ...el,
-      points: [...el.points, [dx, dy] as LocalPoint],
-      pressures,
-    } as DrawElement;
-    store.requestRender();
-  }
-
-  function handleFreeDrawEnd(x: number, y: number, e: PointerEvent) {
-    if (!store.newElement || store.newElement.type !== 'freedraw') return;
-    const el = store.newElement as DrawFreeDrawElement;
-    if (el.points.length < 2) {
-      store.newElement = null;
-      return;
-    }
-
-    const points = el.points;
-    let dx = x - el.x;
-    let dy = y - el.y;
-
-    if (dx === points[0]![0] && dy === points[0]![1]) {
-      dy += 0.0001;
-      dx += 0.0001;
-    }
-
-    const pressures = el.simulatePressure
-      ? []
-      : [...el.pressures, e.pressure];
-
-    const rawPoints = [...points, [dx, dy] as LocalPoint];
-
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    for (const p of rawPoints) {
-      minX = Math.min(minX, p[0]);
-      minY = Math.min(minY, p[1]);
-      maxX = Math.max(maxX, p[0]);
-      maxY = Math.max(maxY, p[1]);
-    }
-
-    const normalizedPoints = rawPoints.map(
-      (p) => [p[0] - minX, p[1] - minY] as LocalPoint,
-    );
-
-    const finalized = {
-      ...el,
-      x: el.x + minX,
-      y: el.y + minY,
-      points: normalizedPoints,
-      pressures,
-      width: maxX - minX,
-      height: maxY - minY,
-    } as DrawElement;
-
-    store.addElement(finalized);
-    store.newElement = null;
-    store.requestRender();
-  }
-
-  // ---- Text handler ----
-  function handleTextCreate(x: number, y: number) {
-    const hitEl = store.getElementAtPosition(x, y);
-
-    if (hitEl && isTextBindableContainer(hitEl)) {
-      const existingText = getBoundTextElement(hitEl, store.scene);
-      if (existingText) {
-        store.editingTextElement = existingText as any;
-        store.selectElement(hitEl.id);
-      } else {
-        const textEl = newTextElement({
-          x: hitEl.x,
-          y: hitEl.y,
-          fontSize: store.currentItemFontSize,
-          fontFamily: store.currentItemFontFamily,
-          strokeColor: store.currentItemStrokeColor,
-          opacity: store.currentItemOpacity,
-          text: '',
-          containerId: hitEl.id,
-          textAlign: 'center',
-          verticalAlign: 'middle',
-        });
-        store.addElement(textEl);
-        bindTextToContainer(textEl, hitEl, store.scene);
-        store.editingTextElement = store.scene.getElement(textEl.id) as any;
-        store.selectElement(hitEl.id);
-      }
-    } else {
-      const metrics = measureText('', store.currentItemFontSize, store.currentItemFontFamily, 1.25);
-      const el = newTextElement({
-        x,
-        y,
-        width: metrics.width,
-        height: metrics.height,
-        fontSize: store.currentItemFontSize,
-        fontFamily: store.currentItemFontFamily,
-        strokeColor: store.currentItemStrokeColor,
-        opacity: store.currentItemOpacity,
-        text: '',
-      });
-      store.addElement(el);
-      store.editingTextElement = el;
-      store.selectElement(el.id);
-    }
-
-    if (!store.activeTool.locked) {
-      store.setActiveTool('selection');
-    }
-  }
-
-  // ---- Eraser handlers ----
-  function handleEraserStart(x: number, y: number) {
-    eraserTrail = new EraserTrail();
-    eraserOriginalOpacities = new Map();
-    eraserTrail.addPoint(x, y, store.elements, store.zoom.value);
-  }
-
-  function handleEraserMove(x: number, y: number) {
-    if (!eraserTrail) return;
-    const erasedIds = eraserTrail.addPoint(x, y, store.elements, store.zoom.value);
-
-    for (const el of store.elements) {
-      if (erasedIds.has(el.id) && !eraserOriginalOpacities.has(el.id)) {
-        eraserOriginalOpacities.set(el.id, el.opacity);
-        store.updateElement(el.id, { opacity: 30 } as Partial<DrawElement>);
-      }
-    }
-    store.requestRender();
-  }
-
-  function handleEraserEnd() {
-    if (!eraserTrail) return;
-    const erasedIds = eraserTrail.getErasedIds();
-    if (erasedIds.size > 0) {
-      for (const [id, opacity] of eraserOriginalOpacities) {
-        store.updateElement(id, { opacity } as Partial<DrawElement>);
-      }
-      store.recordHistory();
-      store.scene.deleteElements([...erasedIds]);
-    }
-    eraserOriginalOpacities.clear();
-    eraserTrail.clear();
-    eraserTrail = null;
-    store.requestRender();
-  }
-
-  // ---- Double-click for bound text / linear edit ----
-  function onDoubleClick(e: MouseEvent) {
-    if (store.viewModeEnabled) return;
-    const { x, y } = getSceneCoords(e as unknown as PointerEvent);
-    const hitEl = store.getElementAtPosition(x, y);
-
-    if (hitEl && hitEl.type === 'text') {
-      const textEl = hitEl as any;
-      store.editingTextElement = textEl;
-      if (textEl.containerId) {
-        store.selectElement(textEl.containerId);
-      } else {
-        store.selectElement(hitEl.id);
-      }
-      return;
-    }
-
-    if (hitEl && checkIsLinear(hitEl)) {
-      const existingText = getBoundTextElement(hitEl, store.scene);
-      if (existingText) {
-        store.editingTextElement = existingText as any;
-        store.selectElement(hitEl.id);
-      } else if (hitEl.type === 'arrow') {
-        const textEl = newTextElement({
-          x: hitEl.x,
-          y: hitEl.y,
-          fontSize: store.currentItemFontSize,
-          fontFamily: store.currentItemFontFamily,
-          strokeColor: store.currentItemStrokeColor,
-          opacity: store.currentItemOpacity,
-          text: '',
-          containerId: hitEl.id,
-          textAlign: 'center',
-          verticalAlign: 'middle',
-        });
-        store.addElement(textEl);
-        bindTextToContainer(textEl, hitEl, store.scene);
-        store.editingTextElement = store.scene.getElement(textEl.id) as any;
-        store.selectElement(hitEl.id);
-      } else {
-        store.editingLinearElement = createLinearEditorState(hitEl.id);
-        store.selectElement(hitEl.id);
-        store.requestRender();
-      }
-      return;
-    }
-
-    if (hitEl && isTextBindableContainer(hitEl)) {
-      const existingText = getBoundTextElement(hitEl, store.scene);
-      if (existingText) {
-        store.editingTextElement = existingText as any;
-        store.selectElement(hitEl.id);
-      } else {
-        const textEl = newTextElement({
-          x: hitEl.x,
-          y: hitEl.y,
-          fontSize: store.currentItemFontSize,
-          fontFamily: store.currentItemFontFamily,
-          strokeColor: store.currentItemStrokeColor,
-          opacity: store.currentItemOpacity,
-          text: '',
-          containerId: hitEl.id,
-          textAlign: 'center',
-          verticalAlign: 'middle',
-        });
-        store.addElement(textEl);
-        bindTextToContainer(textEl, hitEl, store.scene);
-        store.editingTextElement = store.scene.getElement(textEl.id) as any;
-        store.selectElement(hitEl.id);
-      }
-      return;
-    }
-
-    if (!hitEl) {
-      const textEl = newTextElement({
-        x,
-        y,
-        fontSize: store.currentItemFontSize,
-        fontFamily: store.currentItemFontFamily,
-        strokeColor: store.currentItemStrokeColor,
-        opacity: store.currentItemOpacity,
-        text: '',
-      });
-      store.addElement(textEl);
-      store.editingTextElement = textEl;
-      store.selectElement(textEl.id);
-      store.setActiveTool('selection');
-    }
-  }
-
-  // ---- Binding suggestion ----
-  function updateBindingSuggestion(x: number, y: number) {
-    const point = [x, y] as GlobalPoint;
-    const hovered = getHoveredElementForBinding(point, store.elements, store.zoom.value);
-
-    if (hovered) {
-      const midPoint = getSnapMidpointNear(point, hovered, store.zoom.value);
-      store.suggestedBindings = [{ element: hovered, midPoint }];
-      store.requestRender();
-    } else if (store.suggestedBindings.length > 0) {
-      store.suggestedBindings = [];
-      store.requestRender();
-    }
-  }
-
-  // ---- Cursor ----
-  function setCursor(cursor: string) {
-    if (containerRef.value) {
-      containerRef.value.style.cursor = cursor;
-    }
-  }
-
-  function updateCursor(x: number, y: number) {
-    const tool = store.activeTool.type;
-
-    if (tool === 'arrow' || tool === 'line') {
-      updateBindingSuggestion(x, y);
-      setCursor(getCursorForTool(tool));
-      return;
-    }
-
-    if (tool !== 'selection') {
-      if (store.suggestedBindings.length > 0) {
-        store.suggestedBindings = [];
-        store.requestRender();
-      }
-      setCursor(getCursorForTool(tool));
-      return;
-    }
-
-    // check linear editor point handles
-    if (store.editingLinearElement) {
-      const el = store.scene.getElement(store.editingLinearElement.elementId);
-      if (el && checkIsLinear(el)) {
-        const ptIdx = getLinearPointIndexAtPosition(el, x, y, store.zoom.value);
-        if (ptIdx !== null) {
-          setCursor('pointer');
-          return;
-        }
-      }
-    }
-
-    // check linear point handles for selected linear elements
-    if (store.selectedElements.length === 1) {
-      const el = store.selectedElements[0]!;
-      if (checkIsLinear(el)) {
-        const ptIdx = getLinearPointIndexAtPosition(el, x, y, store.zoom.value);
-        if (ptIdx !== null) {
-          setCursor('pointer');
-          return;
-        }
-      }
-    }
-
-    // check transform handles
-    if (store.selectedElements.length === 1) {
-      const el = store.selectedElements[0]!;
-      const handle = getTransformHandleAtPoint(el, [x, y], store.zoom.value);
-      if (handle) {
-        setCursor(handle === 'rotation' ? 'grab' : `${handle}-resize`);
-        return;
-      }
-    }
-
-    const hitEl = store.getElementAtPosition(x, y);
-    setCursor(hitEl ? 'move' : 'default');
-  }
-
-  // ---- Space key for panning ----
-  function onKeyDown(e: KeyboardEvent) {
-    if (e.code === 'Space' && !spacePressed) {
-      spacePressed = true;
-      setCursor('grab');
-    }
-  }
-
-  function onKeyUp(e: KeyboardEvent) {
-    if (e.code === 'Space') {
-      spacePressed = false;
-      setCursor(getCursorForTool(store.activeTool.type));
-    }
-  }
-
-  function attach() {
-    const el = containerRef.value;
-    if (!el) return;
-    el.style.touchAction = 'none';
-    el.addEventListener('pointerdown', onPointerDown);
-    el.addEventListener('pointermove', onPointerMove);
-    el.addEventListener('pointerup', onPointerUp);
-    el.addEventListener('pointerleave', onPointerUp);
-    el.addEventListener('pointercancel', onPointerUp);
-    el.addEventListener('dblclick', onDoubleClick);
-    document.addEventListener('keydown', onKeyDown);
-    document.addEventListener('keyup', onKeyUp);
-  }
-
-  function detach() {
-    const el = containerRef.value;
-    if (!el) return;
-    el.removeEventListener('pointerdown', onPointerDown);
-    el.removeEventListener('pointermove', onPointerMove);
-    el.removeEventListener('pointerup', onPointerUp);
-    el.removeEventListener('pointerleave', onPointerUp);
-    el.removeEventListener('pointercancel', onPointerUp);
-    el.removeEventListener('dblclick', onDoubleClick);
-    document.removeEventListener('keydown', onKeyDown);
-    document.removeEventListener('keyup', onKeyUp);
-  }
-
-  return { attach, detach };
-}
-
-// ---- Resize computation ----
-function computeResize(
-  original: DrawElement,
-  handle: TransformHandleType,
-  x: number,
-  y: number,
-  startX: number,
-  startY: number,
-): Partial<DrawElement> {
-  const dx = x - startX;
-  const dy = y - startY;
-  let { x: ox, y: oy, width: ow, height: oh } = original;
-
-  switch (handle) {
-    case 'se':
-      return { width: ow + dx, height: oh + dy } as any;
-    case 'nw':
-      return { x: ox + dx, y: oy + dy, width: ow - dx, height: oh - dy } as any;
-    case 'ne':
-      return { y: oy + dy, width: ow + dx, height: oh - dy } as any;
-    case 'sw':
-      return { x: ox + dx, width: ow - dx, height: oh + dy } as any;
-    case 'n':
-      return { y: oy + dy, height: oh - dy } as any;
-    case 's':
-      return { height: oh + dy } as any;
-    case 'w':
-      return { x: ox + dx, width: ow - dx } as any;
-    case 'e':
-      return { width: ow + dx } as any;
-    default:
-      return {};
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/composables/use-scroll-wheel.ts b/web/apps/web-ele/src/components/zq-draw/composables/use-scroll-wheel.ts
deleted file mode 100644
index df4db0d..0000000
--- a/web/apps/web-ele/src/components/zq-draw/composables/use-scroll-wheel.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { onMounted, onBeforeUnmount, type Ref } from 'vue';
-import { useDrawStore } from '../store/draw-store';
-import { MIN_ZOOM, MAX_ZOOM } from '../constants';
-import type { NormalizedZoomValue } from '../types';
-
-export function useScrollWheel(containerRef: Ref<HTMLElement | null>) {
-  const store = useDrawStore();
-
-  function handleWheel(e: WheelEvent) {
-    e.preventDefault();
-
-    if (e.ctrlKey || e.metaKey) {
-      // zoom
-      const delta = -e.deltaY;
-      const factor = delta > 0 ? 1.03 : 0.97;
-      const newZoom = Math.max(
-        MIN_ZOOM,
-        Math.min(MAX_ZOOM, store.zoom.value * factor),
-      );
-
-      const rect = containerRef.value?.getBoundingClientRect();
-      if (rect) {
-        const clientX = e.clientX - rect.left;
-        const clientY = e.clientY - rect.top;
-        const oldZoom = store.zoom.value;
-
-        store.scrollX =
-          clientX / newZoom - clientX / oldZoom + store.scrollX;
-        store.scrollY =
-          clientY / newZoom - clientY / oldZoom + store.scrollY;
-      }
-
-      store.zoom = { value: newZoom as NormalizedZoomValue };
-      store.requestRender();
-    } else {
-      // pan
-      store.scrollX -= e.deltaX / store.zoom.value;
-      store.scrollY -= e.deltaY / store.zoom.value;
-      store.requestRender();
-    }
-  }
-
-  onMounted(() => {
-    containerRef.value?.addEventListener('wheel', handleWheel, {
-      passive: false,
-    });
-  });
-
-  onBeforeUnmount(() => {
-    containerRef.value?.removeEventListener('wheel', handleWheel);
-  });
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/constants.ts b/web/apps/web-ele/src/components/zq-draw/constants.ts
deleted file mode 100644
index d3b3b1e..0000000
--- a/web/apps/web-ele/src/components/zq-draw/constants.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-import type {
-  Arrowhead,
-  FillStyle,
-  NormalizedZoomValue,
-  Radians,
-  StrokeStyle,
-  ToolType,
-} from './types';
-
-// ---------------------------------------------------------------------------
-// Version
-// ---------------------------------------------------------------------------
-export const DRAW_VERSION = 1;
-export const DRAW_SOURCE = 'zq-draw';
-
-// ---------------------------------------------------------------------------
-// Zoom
-// ---------------------------------------------------------------------------
-export const MIN_ZOOM = 0.1 as NormalizedZoomValue;
-export const MAX_ZOOM = 30 as NormalizedZoomValue;
-export const DEFAULT_ZOOM = 1 as NormalizedZoomValue;
-export const ZOOM_STEP = 0.1;
-
-// ---------------------------------------------------------------------------
-// Grid
-// ---------------------------------------------------------------------------
-export const DEFAULT_GRID_SIZE = 20;
-export const DEFAULT_GRID_STEP = 5;
-
-// ---------------------------------------------------------------------------
-// Element defaults
-// ---------------------------------------------------------------------------
-export const DEFAULT_ELEMENT_STROKE_COLOR = '#1e1e1e';
-export const DEFAULT_ELEMENT_BACKGROUND_COLOR = 'transparent';
-export const DEFAULT_ELEMENT_FILL_STYLE: FillStyle = 'hachure';
-export const DEFAULT_ELEMENT_STROKE_WIDTH = 2;
-export const DEFAULT_ELEMENT_STROKE_STYLE: StrokeStyle = 'solid';
-export const DEFAULT_ELEMENT_ROUGHNESS = 1;
-export const DEFAULT_ELEMENT_OPACITY = 100;
-export const DEFAULT_ELEMENT_ROUNDNESS = { type: 3 };
-
-// ---------------------------------------------------------------------------
-// Text defaults
-// ---------------------------------------------------------------------------
-export const DEFAULT_FONT_SIZE = 20;
-export const DEFAULT_FONT_FAMILY = 5; // Excalifont (hand-drawn)
-export const DEFAULT_TEXT_ALIGN = 'left';
-export const DEFAULT_VERTICAL_ALIGN = 'top';
-export const DEFAULT_LINE_HEIGHT = 1.25;
-export const BOUND_TEXT_PADDING = 5;
-
-export const FONT_FAMILY = {
-  Virgil: 1,
-  Helvetica: 2,
-  Cascadia: 3,
-  Assistant: 4,
-  Excalifont: 5,
-  Nunito: 6,
-  'Comic Shanns': 8,
-} as const;
-
-export const FONT_FAMILY_FALLBACKS: Record<number, string> = {
-  1: '"Virgil", "Excalifont", "Xiaolai", "Segoe UI Emoji", cursive',
-  2: '"Helvetica", "Segoe UI Emoji", sans-serif',
-  3: '"Cascadia", "Comic Shanns", "Segoe UI Emoji", monospace',
-  4: '"Assistant", "Segoe UI Emoji", sans-serif',
-  5: '"Excalifont", "Virgil", "Xiaolai", "Segoe UI Emoji", cursive',
-  6: '"Nunito", "Segoe UI Emoji", sans-serif',
-  8: '"Comic Shanns", "Cascadia", "Segoe UI Emoji", monospace',
-};
-
-export interface FontMetrics {
-  unitsPerEm: number;
-  ascender: number;
-  descender: number;
-  lineHeight: number;
-}
-
-export const FONT_METADATA: Record<number, FontMetrics> = {
-  [FONT_FAMILY.Excalifont]: { unitsPerEm: 1000, ascender: 886, descender: -374, lineHeight: 1.25 },
-  [FONT_FAMILY.Nunito]: { unitsPerEm: 1000, ascender: 1011, descender: -353, lineHeight: 1.25 },
-  [FONT_FAMILY['Comic Shanns']]: { unitsPerEm: 1000, ascender: 750, descender: -250, lineHeight: 1.25 },
-  [FONT_FAMILY.Virgil]: { unitsPerEm: 1000, ascender: 886, descender: -374, lineHeight: 1.25 },
-  [FONT_FAMILY.Helvetica]: { unitsPerEm: 2048, ascender: 1577, descender: -471, lineHeight: 1.15 },
-  [FONT_FAMILY.Cascadia]: { unitsPerEm: 2048, ascender: 1900, descender: -480, lineHeight: 1.2 },
-  [FONT_FAMILY.Assistant]: { unitsPerEm: 2048, ascender: 1021, descender: -287, lineHeight: 1.25 },
-};
-
-/**
- * Calculates vertical offset for text rendered with alphabetic baseline.
- * Matches excalidraw's getVerticalOffset for consistent text positioning.
- */
-export function getVerticalOffset(
-  fontFamily: number,
-  fontSize: number,
-  lineHeightPx: number,
-): number {
-  const metrics = FONT_METADATA[fontFamily] ?? FONT_METADATA[FONT_FAMILY.Excalifont]!;
-  const fontSizeEm = fontSize / metrics.unitsPerEm;
-  const lineGap = (lineHeightPx - fontSizeEm * metrics.ascender + fontSizeEm * metrics.descender) / 2;
-  return fontSizeEm * metrics.ascender + lineGap;
-}
-
-// ---------------------------------------------------------------------------
-// Arrow defaults
-// ---------------------------------------------------------------------------
-export const DEFAULT_START_ARROWHEAD: Arrowhead | null = null;
-export const DEFAULT_END_ARROWHEAD: Arrowhead | null = 'arrow';
-
-// ---------------------------------------------------------------------------
-// Colors
-// ---------------------------------------------------------------------------
-export const CANVAS_BACKGROUND_LIGHT = '#ffffff';
-export const CANVAS_BACKGROUND_DARK = '#121212';
-
-export const PRESET_STROKE_COLORS = [
-  '#1e1e1e',
-  '#e03131',
-  '#2f9e44',
-  '#1971c2',
-  '#f08c00',
-  '#6741d9',
-  '#0c8599',
-  '#e8590c',
-];
-
-export const PRESET_BACKGROUND_COLORS = [
-  'transparent',
-  '#ffc9c9',
-  '#b2f2bb',
-  '#a5d8ff',
-  '#ffec99',
-  '#d0bfff',
-  '#99e9f2',
-  '#ffd8a8',
-];
-
-// ---------------------------------------------------------------------------
-// Snap
-// ---------------------------------------------------------------------------
-export const SNAP_THRESHOLD = 8;
-export const SNAP_LINE_COLOR = '#6366f1';
-
-// ---------------------------------------------------------------------------
-// History
-// ---------------------------------------------------------------------------
-export const HISTORY_MAX_STEPS = 100;
-
-// ---------------------------------------------------------------------------
-// Selection
-// ---------------------------------------------------------------------------
-export const SELECTION_BORDER_COLOR = '#6965db';
-export const SELECTION_FILL_COLOR = 'rgba(105, 101, 219, 0.1)';
-
-// ---------------------------------------------------------------------------
-// Transform handles
-// ---------------------------------------------------------------------------
-export const TRANSFORM_HANDLE_SIZE = 8;
-export const ROTATION_HANDLE_OFFSET = 24;
-
-// ---------------------------------------------------------------------------
-// Misc
-// ---------------------------------------------------------------------------
-export const ANGLE_ZERO = 0 as Radians;
-export const TAU = Math.PI * 2;
-export const DRAGGING_THRESHOLD = 3;
-export const LINE_CONFIRM_THRESHOLD = 10;
-export const MIN_WIDTH_OR_HEIGHT = 1;
-
-// ---------------------------------------------------------------------------
-// Tool shortcuts
-// ---------------------------------------------------------------------------
-export const TOOL_SHORTCUTS: Partial<Record<ToolType, string>> = {
-  selection: 'v',
-  rectangle: 'r',
-  ellipse: 'o',
-  diamond: 'd',
-  line: 'l',
-  arrow: 'a',
-  freedraw: 'p',
-  text: 't',
-  image: 'i',
-  eraser: 'e',
-  hand: 'h',
-  frame: 'f',
-};
-
-// ---------------------------------------------------------------------------
-// Roundness
-// ---------------------------------------------------------------------------
-export const DEFAULT_PROPORTIONAL_RADIUS = 0.25;
-export const DEFAULT_ADAPTIVE_RADIUS = 32;
-
-export const ROUNDNESS = {
-  LEGACY: 1,
-  PROPORTIONAL_RADIUS: 2,
-  ADAPTIVE_RADIUS: 3,
-} as const;
diff --git a/web/apps/web-ele/src/components/zq-draw/core/clipboard.ts b/web/apps/web-ele/src/components/zq-draw/core/clipboard.ts
deleted file mode 100644
index 5c06811..0000000
--- a/web/apps/web-ele/src/components/zq-draw/core/clipboard.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import type { DrawElement, BinaryFiles } from '../types';
-import { duplicateElement } from '../elements/duplicate';
-
-const CLIPBOARD_KEY = 'zq-draw-clipboard';
-
-export interface ClipboardData {
-  elements: readonly DrawElement[];
-  files: BinaryFiles;
-}
-
-let memoryClipboard: ClipboardData | null = null;
-
-function serializeClipboard(data: ClipboardData): string {
-  return JSON.stringify({
-    type: CLIPBOARD_KEY,
-    elements: data.elements,
-    files: data.files,
-  });
-}
-
-function deserializeClipboard(text: string): ClipboardData | null {
-  try {
-    const parsed = JSON.parse(text);
-    if (parsed?.type !== CLIPBOARD_KEY || !Array.isArray(parsed.elements)) {
-      return null;
-    }
-    return {
-      elements: parsed.elements,
-      files: parsed.files || {},
-    };
-  } catch {
-    return null;
-  }
-}
-
-export async function copyElements(
-  elements: readonly DrawElement[],
-  files: BinaryFiles,
-): Promise<void> {
-  const data: ClipboardData = {
-    elements: elements.map((el) => ({ ...el })),
-    files: { ...files },
-  };
-  memoryClipboard = data;
-
-  try {
-    await navigator.clipboard.writeText(serializeClipboard(data));
-  } catch {
-    // fallback to memory only
-  }
-}
-
-export async function cutElements(
-  elements: readonly DrawElement[],
-  files: BinaryFiles,
-): Promise<void> {
-  await copyElements(elements, files);
-}
-
-export async function pasteElements(
-  offset: { x: number; y: number } = { x: 10, y: 10 },
-): Promise<ClipboardData | null> {
-  let source: ClipboardData | null = null;
-
-  try {
-    const text = await navigator.clipboard.readText();
-    source = deserializeClipboard(text);
-  } catch {
-    // system clipboard not available
-  }
-
-  if (!source) {
-    source = memoryClipboard;
-  }
-
-  if (!source) return null;
-
-  const duplicated = source.elements.map((el) =>
-    duplicateElement(el, offset.x, offset.y),
-  );
-
-  return {
-    elements: duplicated,
-    files: { ...source.files },
-  };
-}
-
-export function hasClipboardData(): boolean {
-  return memoryClipboard !== null;
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/core/cursor.ts b/web/apps/web-ele/src/components/zq-draw/core/cursor.ts
deleted file mode 100644
index 2ad5a2b..0000000
--- a/web/apps/web-ele/src/components/zq-draw/core/cursor.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { ToolType } from '../types';
-
-const TOOL_CURSORS: Record<string, string> = {
-  selection: 'default',
-  hand: 'grab',
-  freedraw: 'crosshair',
-  text: 'text',
-  eraser: 'crosshair',
-  laser: 'crosshair',
-};
-
-const SHAPE_CURSOR = 'crosshair';
-
-export function getCursorForTool(tool: ToolType): string {
-  return TOOL_CURSORS[tool] ?? SHAPE_CURSOR;
-}
-
-export function getGrabbingCursor(): string {
-  return 'grabbing';
-}
-
-export function getResizeCursor(angle: number, direction: string): string {
-  const directionMap: Record<string, string> = {
-    n: 'ns-resize',
-    s: 'ns-resize',
-    e: 'ew-resize',
-    w: 'ew-resize',
-    ne: 'nesw-resize',
-    sw: 'nesw-resize',
-    nw: 'nwse-resize',
-    se: 'nwse-resize',
-  };
-  return directionMap[direction] ?? 'default';
-}
-
-export function getRotationCursor(): string {
-  return 'grab';
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/core/eraser.ts b/web/apps/web-ele/src/components/zq-draw/core/eraser.ts
deleted file mode 100644
index 620a806..0000000
--- a/web/apps/web-ele/src/components/zq-draw/core/eraser.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import type { DrawElement, GlobalPoint, NonDeletedDrawElement } from '../types';
-import { getElementBounds } from '../elements/bounds';
-import { pointDistance } from '../math/point';
-import type { Point } from '../math/types';
-
-const ERASER_RADIUS = 10;
-
-export class EraserTrail {
-  private points: GlobalPoint[] = [];
-  private erasedIds = new Set<string>();
-
-  addPoint(
-    x: number,
-    y: number,
-    elements: readonly NonDeletedDrawElement[],
-    zoom: number,
-  ): Set<string> {
-    const point: GlobalPoint = [x, y] as GlobalPoint;
-    this.points.push(point);
-
-    if (this.points.length < 2) return this.erasedIds;
-
-    const prev = this.points[this.points.length - 2]!;
-    const curr = this.points[this.points.length - 1]!;
-    const radius = ERASER_RADIUS / zoom;
-
-    for (const el of elements) {
-      if (this.erasedIds.has(el.id) || el.locked) continue;
-      if (el.type === 'selection') continue;
-
-      if (this.testElement([prev, curr], el, radius)) {
-        this.erasedIds.add(el.id);
-        this.addRelatedElements(el, elements);
-      }
-    }
-
-    return this.erasedIds;
-  }
-
-  private testElement(
-    segment: [GlobalPoint, GlobalPoint],
-    element: DrawElement,
-    radius: number,
-  ): boolean {
-    const [x1, y1, x2, y2] = getElementBounds(element);
-    const expandedBounds = [
-      x1 - radius,
-      y1 - radius,
-      x2 + radius,
-      y2 + radius,
-    ];
-
-    if (!this.segmentIntersectsBounds(segment, expandedBounds)) {
-      return false;
-    }
-
-    const cx = (x1 + x2) / 2;
-    const cy = (y1 + y2) / 2;
-    const dist = distanceToSegment(
-      [cx, cy] as Point,
-      [segment[0][0], segment[0][1]] as Point,
-      [segment[1][0], segment[1][1]] as Point,
-    );
-
-    const elementRadius = Math.max(x2 - x1, y2 - y1) / 2;
-    return dist <= elementRadius + radius;
-  }
-
-  private segmentIntersectsBounds(
-    segment: [GlobalPoint, GlobalPoint],
-    bounds: number[],
-  ): boolean {
-    const [sx1, sy1] = segment[0];
-    const [sx2, sy2] = segment[1];
-    const [bx1, by1, bx2, by2] = bounds;
-
-    const minSx = Math.min(sx1, sx2);
-    const maxSx = Math.max(sx1, sx2);
-    const minSy = Math.min(sy1, sy2);
-    const maxSy = Math.max(sy1, sy2);
-
-    return maxSx >= bx1! && minSx <= bx2! && maxSy >= by1! && minSy <= by2!;
-  }
-
-  private addRelatedElements(
-    element: DrawElement,
-    elements: readonly NonDeletedDrawElement[],
-  ): void {
-    if (element.groupIds.length > 0) {
-      for (const el of elements) {
-        for (const gid of element.groupIds) {
-          if (el.groupIds.includes(gid)) {
-            this.erasedIds.add(el.id);
-          }
-        }
-      }
-    }
-
-    if (element.boundElements) {
-      for (const bound of element.boundElements) {
-        this.erasedIds.add(bound.id);
-      }
-    }
-  }
-
-  getErasedIds(): Set<string> {
-    return this.erasedIds;
-  }
-
-  clear(): void {
-    this.points = [];
-    this.erasedIds.clear();
-  }
-}
-
-function distanceToSegment(p: Point, a: Point, b: Point): number {
-  const dx = b[0] - a[0];
-  const dy = b[1] - a[1];
-  const lenSq = dx * dx + dy * dy;
-
-  if (lenSq === 0) {
-    return pointDistance(p, a);
-  }
-
-  let t = ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / lenSq;
-  t = Math.max(0, Math.min(1, t));
-
-  const projX = a[0] + t * dx;
-  const projY = a[1] + t * dy;
-
-  return pointDistance(p, [projX, projY]);
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/core/gesture.ts b/web/apps/web-ele/src/components/zq-draw/core/gesture.ts
deleted file mode 100644
index 2a6ad71..0000000
--- a/web/apps/web-ele/src/components/zq-draw/core/gesture.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export interface GestureState {
-  pointers: Map<number, { x: number; y: number }>;
-  lastCenter: { x: number; y: number } | null;
-  initialDistance: number | null;
-  initialScale: number | null;
-}
-
-export function createGestureState(): GestureState {
-  return {
-    pointers: new Map(),
-    lastCenter: null,
-    initialDistance: null,
-    initialScale: null,
-  };
-}
-
-export function getGestureCenter(
-  state: GestureState,
-): { x: number; y: number } | null {
-  if (state.pointers.size < 2) return null;
-
-  const points = Array.from(state.pointers.values());
-  let cx = 0;
-  let cy = 0;
-  for (const p of points) {
-    cx += p.x;
-    cy += p.y;
-  }
-  return { x: cx / points.length, y: cy / points.length };
-}
-
-export function getGestureDistance(state: GestureState): number | null {
-  if (state.pointers.size < 2) return null;
-
-  const points = Array.from(state.pointers.values());
-  const dx = points[1]!.x - points[0]!.x;
-  const dy = points[1]!.y - points[0]!.y;
-  return Math.hypot(dx, dy);
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/core/history.ts b/web/apps/web-ele/src/components/zq-draw/core/history.ts
deleted file mode 100644
index 7c84005..0000000
--- a/web/apps/web-ele/src/components/zq-draw/core/history.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { DrawElement, AppState } from '../types';
-import { HISTORY_MAX_STEPS } from '../constants';
-
-export interface HistoryEntry {
-  elements: readonly DrawElement[];
-  appState: Pick<
-    AppState,
-    | 'selectedElementIds'
-    | 'selectedGroupIds'
-    | 'viewBackgroundColor'
-    | 'editingGroupId'
-    | 'editingTextElement'
-    | 'name'
-  >;
-}
-
-export class History {
-  private undoStack: HistoryEntry[] = [];
-  private redoStack: HistoryEntry[] = [];
-
-  get canUndo(): boolean {
-    return this.undoStack.length > 0;
-  }
-
-  get canRedo(): boolean {
-    return this.redoStack.length > 0;
-  }
-
-  record(entry: HistoryEntry): void {
-    this.undoStack.push(entry);
-    if (this.undoStack.length > HISTORY_MAX_STEPS) {
-      this.undoStack.shift();
-    }
-    this.redoStack = [];
-  }
-
-  undo(currentEntry: HistoryEntry): HistoryEntry | null {
-    const entry = this.undoStack.pop();
-    if (!entry) return null;
-    this.redoStack.push(currentEntry);
-    return entry;
-  }
-
-  redo(currentEntry: HistoryEntry): HistoryEntry | null {
-    const entry = this.redoStack.pop();
-    if (!entry) return null;
-    this.undoStack.push(currentEntry);
-    return entry;
-  }
-
-  clear(): void {
-    this.undoStack = [];
-    this.redoStack = [];
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/core/renderer/helpers.ts b/web/apps/web-ele/src/components/zq-draw/core/renderer/helpers.ts
deleted file mode 100644
index 007fbbe..0000000
--- a/web/apps/web-ele/src/components/zq-draw/core/renderer/helpers.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { AppState, NormalizedZoomValue } from '../../types';
-
-export function sceneCoordsToViewport(
-  sceneX: number,
-  sceneY: number,
-  appState: { scrollX: number; scrollY: number; zoom: { value: number } },
-): { x: number; y: number } {
-  return {
-    x: (sceneX + appState.scrollX) * appState.zoom.value,
-    y: (sceneY + appState.scrollY) * appState.zoom.value,
-  };
-}
-
-export function viewportCoordsToScene(
-  viewportX: number,
-  viewportY: number,
-  appState: { scrollX: number; scrollY: number; zoom: { value: number } },
-): { x: number; y: number } {
-  return {
-    x: viewportX / appState.zoom.value - appState.scrollX,
-    y: viewportY / appState.zoom.value - appState.scrollY,
-  };
-}
-
-export function getNormalizedZoom(zoom: number): NormalizedZoomValue {
-  return Math.max(0.1, Math.min(30, zoom)) as NormalizedZoomValue;
-}
-
-export function applyZoom(
-  ctx: CanvasRenderingContext2D,
-  appState: { scrollX: number; scrollY: number; zoom: { value: number } },
-): void {
-  const dpr = window.devicePixelRatio || 1;
-  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-  ctx.scale(appState.zoom.value, appState.zoom.value);
-  ctx.translate(appState.scrollX, appState.scrollY);
-}
-
-export function drawGrid(
-  ctx: CanvasRenderingContext2D,
-  appState: AppState,
-): void {
-  if (!appState.gridModeEnabled) return;
-
-  const gridSize = appState.gridSize;
-  const zoom = appState.zoom.value;
-
-  const offsetX = appState.scrollX * zoom;
-  const offsetY = appState.scrollY * zoom;
-  const width = appState.width;
-  const height = appState.height;
-
-  ctx.save();
-  const dprGrid = window.devicePixelRatio || 1;
-  ctx.setTransform(dprGrid, 0, 0, dprGrid, 0, 0);
-
-  ctx.strokeStyle = appState.theme === 'dark'
-    ? 'rgba(255, 255, 255, 0.1)'
-    : 'rgba(0, 0, 0, 0.1)';
-  ctx.lineWidth = 1;
-
-  const scaledGrid = gridSize * zoom;
-  const startX = (offsetX % scaledGrid) - scaledGrid;
-  const startY = (offsetY % scaledGrid) - scaledGrid;
-
-  ctx.beginPath();
-  for (let x = startX; x < width + scaledGrid; x += scaledGrid) {
-    ctx.moveTo(Math.round(x) + 0.5, 0);
-    ctx.lineTo(Math.round(x) + 0.5, height);
-  }
-  for (let y = startY; y < height + scaledGrid; y += scaledGrid) {
-    ctx.moveTo(0, Math.round(y) + 0.5);
-    ctx.lineTo(width, Math.round(y) + 0.5);
-  }
-  ctx.stroke();
-
-  ctx.restore();
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/core/renderer/interactive-scene.ts b/web/apps/web-ele/src/components/zq-draw/core/renderer/interactive-scene.ts
deleted file mode 100644
index 8584b95..0000000
--- a/web/apps/web-ele/src/components/zq-draw/core/renderer/interactive-scene.ts
+++ /dev/null
@@ -1,408 +0,0 @@
-import rough from 'roughjs';
-import type {
-  DrawElement,
-  AppState,
-  NonDeletedDrawElement,
-  SuggestedBinding,
-  GlobalPoint,
-} from '../../types';
-import { getCommonBounds, getLinearElementLocalBounds } from '../../elements/bounds';
-import {
-  getTransformHandles,
-  getLinearPointHandles,
-  getLinearMidpointHandles,
-} from '../../elements/transform-handles';
-import { drawElementOnCanvas } from '../../elements/shape-generator';
-import { getElementSnapPoints } from '../../elements/binding';
-import { applyZoom } from './helpers';
-import {
-  SELECTION_BORDER_COLOR,
-  SELECTION_FILL_COLOR,
-  SNAP_LINE_COLOR,
-} from '../../constants';
-
-export function renderInteractiveScene(
-  canvas: HTMLCanvasElement,
-  elements: readonly NonDeletedDrawElement[],
-  appState: AppState,
-): void {
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
-
-  const dpr = window.devicePixelRatio || 1;
-  canvas.width = appState.width * dpr;
-  canvas.height = appState.height * dpr;
-  canvas.style.width = `${appState.width}px`;
-  canvas.style.height = `${appState.height}px`;
-  ctx.scale(dpr, dpr);
-
-  ctx.clearRect(0, 0, appState.width, appState.height);
-
-  applyZoom(ctx, appState);
-
-  // draw selection element (rubber band)
-  if (appState.selectionElement) {
-    const sel = appState.selectionElement;
-    ctx.save();
-    ctx.strokeStyle = SELECTION_BORDER_COLOR;
-    ctx.fillStyle = SELECTION_FILL_COLOR;
-    ctx.lineWidth = 1 / appState.zoom.value;
-    ctx.fillRect(sel.x, sel.y, sel.width, sel.height);
-    ctx.strokeRect(sel.x, sel.y, sel.width, sel.height);
-    ctx.restore();
-  }
-
-  // draw new element being created (render actual shape, not just outline)
-  if (appState.newElement && !appState.newElement.isDeleted) {
-    const rc = rough.canvas(canvas);
-    drawElementOnCanvas(rc, ctx, appState.newElement);
-  }
-
-  // draw selection highlights (skip bound text elements)
-  const selectedElements = elements.filter(
-    (el) => appState.selectedElementIds[el.id]
-      && !(el.type === 'text' && (el as any).containerId),
-  );
-
-  if (selectedElements.length > 0) {
-    drawSelectionHighlights(ctx, selectedElements, appState);
-  }
-
-  // draw snap lines
-  if (appState.snapLines.length > 0) {
-    drawSnapLines(ctx, appState);
-  }
-
-  // draw binding highlights
-  if (appState.suggestedBindings.length > 0) {
-    drawBindingHighlights(ctx, appState.suggestedBindings, appState);
-  }
-}
-
-function strokeRectWithRotation(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  cx: number,
-  cy: number,
-  angle: number,
-): void {
-  ctx.save();
-  ctx.translate(cx, cy);
-  ctx.rotate(angle);
-  ctx.strokeRect(x - cx, y - cy, width, height);
-  ctx.restore();
-}
-
-function drawRoundedHandle(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  zoom: number,
-): void {
-  const radius = 2 / zoom;
-  if (ctx.roundRect) {
-    ctx.beginPath();
-    ctx.roundRect(x, y, width, height, radius);
-    ctx.fill();
-    ctx.stroke();
-  } else {
-    ctx.fillRect(x, y, width, height);
-    ctx.strokeRect(x, y, width, height);
-  }
-}
-
-function isLinearElement(el: DrawElement): boolean {
-  return el.type === 'line' || el.type === 'arrow';
-}
-
-function hasBoundingBox(
-  el: DrawElement,
-  appState: AppState,
-): boolean {
-  if (appState.editingLinearElement) {
-    return false;
-  }
-  if (!isLinearElement(el)) {
-    return true;
-  }
-  return (el as any).points?.length > 2;
-}
-
-function drawSelectionHighlights(
-  ctx: CanvasRenderingContext2D,
-  selectedElements: readonly DrawElement[],
-  appState: AppState,
-): void {
-  const zoom = appState.zoom.value;
-  const lineWidth = 1 / zoom;
-  const padding = 4 / zoom;
-
-  if (selectedElements.length === 1) {
-    const el = selectedElements[0]!;
-    const isLinear = isLinearElement(el);
-    const showBBox = hasBoundingBox(el, appState);
-
-    let selX: number, selY: number, selW: number, selH: number;
-    let selCx: number, selCy: number, selAngle: number;
-
-    if (isLinear) {
-      const [bx1, by1, bx2, by2] = getLinearElementLocalBounds(el as any);
-      selX = bx1;
-      selY = by1;
-      selW = bx2 - bx1;
-      selH = by2 - by1;
-      selCx = el.x + el.width / 2;
-      selCy = el.y + el.height / 2;
-      selAngle = el.angle;
-    } else {
-      selX = el.x;
-      selY = el.y;
-      selW = el.width;
-      selH = el.height;
-      selCx = el.x + el.width / 2;
-      selCy = el.y + el.height / 2;
-      selAngle = el.angle;
-    }
-
-    ctx.save();
-    ctx.strokeStyle = SELECTION_BORDER_COLOR;
-    ctx.lineWidth = lineWidth;
-
-    if (showBBox) {
-      strokeRectWithRotation(
-        ctx,
-        selX - padding,
-        selY - padding,
-        selW + padding * 2,
-        selH + padding * 2,
-        selCx,
-        selCy,
-        selAngle,
-      );
-    }
-
-    if (!appState.viewModeEnabled) {
-      if (isLinear) {
-        const isEditing = !!appState.editingLinearElement;
-        drawLinearPointHandles(ctx, el, zoom, lineWidth, isEditing);
-      }
-
-      if (showBBox) {
-        const handles = getTransformHandles(el, zoom);
-        for (const handle of handles) {
-          ctx.fillStyle = '#ffffff';
-          ctx.strokeStyle = SELECTION_BORDER_COLOR;
-          ctx.lineWidth = lineWidth;
-
-          if (handle.type === 'rotation') {
-            ctx.beginPath();
-            ctx.arc(
-              handle.x + handle.width / 2,
-              handle.y + handle.height / 2,
-              handle.width / 2,
-              0,
-              Math.PI * 2,
-            );
-            ctx.fill();
-            ctx.stroke();
-          } else {
-            drawRoundedHandle(ctx, handle.x, handle.y, handle.width, handle.height, zoom);
-          }
-        }
-      }
-    }
-
-    ctx.restore();
-  } else if (selectedElements.length > 1) {
-    const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
-
-    ctx.save();
-    ctx.strokeStyle = SELECTION_BORDER_COLOR;
-    ctx.lineWidth = lineWidth;
-    ctx.setLineDash([5 / zoom, 5 / zoom]);
-    ctx.strokeRect(
-      x1 - padding,
-      y1 - padding,
-      x2 - x1 + padding * 2,
-      y2 - y1 + padding * 2,
-    );
-
-    for (const el of selectedElements) {
-      const { x: ex, y: ey, width: ew, height: eh, angle: ea } = el;
-      const ecx = ex + ew / 2;
-      const ecy = ey + eh / 2;
-      strokeRectWithRotation(ctx, ex, ey, ew, eh, ecx, ecy, ea);
-    }
-
-    ctx.restore();
-  }
-}
-
-function drawLinearPointHandles(
-  ctx: CanvasRenderingContext2D,
-  element: DrawElement,
-  zoom: number,
-  lineWidth: number,
-  isEditing: boolean,
-): void {
-  const pointHandles = getLinearPointHandles(element, zoom);
-  const pointCount = (element as any).points?.length ?? 0;
-  const radius = isEditing
-    ? pointHandles[0]?.size ?? 8 / zoom
-    : (pointHandles[0]?.size ?? 8 / zoom) / 2;
-
-  for (const h of pointHandles) {
-    ctx.fillStyle = '#ffffff';
-    ctx.strokeStyle = SELECTION_BORDER_COLOR;
-    ctx.lineWidth = lineWidth;
-    ctx.beginPath();
-    ctx.arc(h.x, h.y, radius / 2, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
-  }
-
-  const showMidpoints = isEditing || pointCount === 2;
-  if (showMidpoints) {
-    const midHandles = getLinearMidpointHandles(element, zoom);
-    for (const h of midHandles) {
-      ctx.fillStyle = 'rgba(177, 151, 252, 0.7)';
-      ctx.strokeStyle = SELECTION_BORDER_COLOR;
-      ctx.lineWidth = lineWidth;
-      ctx.beginPath();
-      ctx.arc(h.x, h.y, h.size / 2, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.stroke();
-    }
-  }
-}
-
-function drawSnapLines(
-  ctx: CanvasRenderingContext2D,
-  appState: AppState,
-): void {
-  ctx.save();
-  ctx.strokeStyle = SNAP_LINE_COLOR;
-  ctx.lineWidth = 1 / appState.zoom.value;
-  ctx.setLineDash([4 / appState.zoom.value, 4 / appState.zoom.value]);
-
-  for (const snapLine of appState.snapLines) {
-    if (snapLine.points.length >= 2) {
-      ctx.beginPath();
-      ctx.moveTo(snapLine.points[0]![0], snapLine.points[0]![1]);
-      for (let i = 1; i < snapLine.points.length; i++) {
-        ctx.lineTo(snapLine.points[i]![0], snapLine.points[i]![1]);
-      }
-      ctx.stroke();
-    }
-  }
-
-  ctx.restore();
-}
-
-function drawBindingHighlights(
-  ctx: CanvasRenderingContext2D,
-  suggestedBindings: SuggestedBinding[],
-  appState: AppState,
-): void {
-  const zoom = appState.zoom.value;
-
-  for (const suggestion of suggestedBindings) {
-    const el = suggestion.element;
-    drawBindingOutline(ctx, el, zoom);
-    drawBindingSnapPoints(ctx, el, suggestion.midPoint, zoom);
-  }
-}
-
-function drawBindingOutline(
-  ctx: CanvasRenderingContext2D,
-  element: DrawElement,
-  zoom: number,
-): void {
-  const { x, y, width, height, angle } = element;
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-  const lineWidth = 2 / zoom;
-
-  ctx.save();
-  ctx.strokeStyle = SELECTION_BORDER_COLOR;
-  ctx.lineWidth = lineWidth;
-  ctx.globalAlpha = 0.6;
-  ctx.translate(cx, cy);
-  ctx.rotate(angle);
-
-  const lx = x - cx;
-  const ly = y - cy;
-
-  if (element.type === 'ellipse') {
-    ctx.beginPath();
-    ctx.ellipse(0, 0, width / 2, height / 2, 0, 0, Math.PI * 2);
-    ctx.stroke();
-  } else if (element.type === 'diamond') {
-    ctx.beginPath();
-    ctx.moveTo(0, ly);
-    ctx.lineTo(lx + width, 0);
-    ctx.lineTo(0, ly + height);
-    ctx.lineTo(lx, 0);
-    ctx.closePath();
-    ctx.stroke();
-  } else {
-    const r = element.roundness ? Math.min(width, height) * 0.1 : 0;
-    if (r > 0 && ctx.roundRect) {
-      ctx.beginPath();
-      ctx.roundRect(lx, ly, width, height, r);
-      ctx.stroke();
-    } else {
-      ctx.strokeRect(lx, ly, width, height);
-    }
-  }
-
-  ctx.restore();
-}
-
-function drawBindingSnapPoints(
-  ctx: CanvasRenderingContext2D,
-  element: DrawElement,
-  activeMidPoint: GlobalPoint | null,
-  zoom: number,
-): void {
-  const snapPoints = getElementSnapPoints(element);
-  const dotRadius = 4 / zoom;
-  const activeDotRadius = 6 / zoom;
-
-  for (const sp of snapPoints) {
-    const isActive =
-      activeMidPoint &&
-      Math.abs(sp[0] - activeMidPoint[0]) < 0.5 &&
-      Math.abs(sp[1] - activeMidPoint[1]) < 0.5;
-
-    ctx.save();
-
-    if (isActive) {
-      ctx.fillStyle = SELECTION_BORDER_COLOR;
-      ctx.globalAlpha = 1;
-      ctx.beginPath();
-      ctx.arc(sp[0], sp[1], activeDotRadius, 0, Math.PI * 2);
-      ctx.fill();
-
-      ctx.strokeStyle = '#ffffff';
-      ctx.lineWidth = 1.5 / zoom;
-      ctx.stroke();
-    } else {
-      ctx.fillStyle = '#ffffff';
-      ctx.strokeStyle = SELECTION_BORDER_COLOR;
-      ctx.lineWidth = 1 / zoom;
-      ctx.globalAlpha = 0.7;
-      ctx.beginPath();
-      ctx.arc(sp[0], sp[1], dotRadius, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.stroke();
-    }
-
-    ctx.restore();
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/core/renderer/static-scene.ts b/web/apps/web-ele/src/components/zq-draw/core/renderer/static-scene.ts
deleted file mode 100644
index 20cfeb5..0000000
--- a/web/apps/web-ele/src/components/zq-draw/core/renderer/static-scene.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-import rough from 'roughjs';
-import type { DrawElement, DrawTextElement, DrawFrameElement, AppState, BinaryFiles } from '../../types';
-import { drawElementOnCanvas } from '../../elements/shape-generator';
-import { applyZoom, drawGrid } from './helpers';
-import { FONT_FAMILY_FALLBACKS, SELECTION_BORDER_COLOR, getVerticalOffset } from '../../constants';
-import { getLineHeightInPx, BOUND_TEXT_PADDING } from '../../elements/bound-text';
-
-export function renderStaticScene(
-  canvas: HTMLCanvasElement,
-  elements: readonly DrawElement[],
-  appState: AppState,
-  files: BinaryFiles,
-  imageCache: Map<string, HTMLImageElement>,
-): void {
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
-
-  const rc = rough.canvas(canvas);
-  const dpr = window.devicePixelRatio || 1;
-
-  canvas.width = appState.width * dpr;
-  canvas.height = appState.height * dpr;
-  canvas.style.width = `${appState.width}px`;
-  canvas.style.height = `${appState.height}px`;
-  ctx.scale(dpr, dpr);
-
-  ctx.clearRect(0, 0, appState.width, appState.height);
-  if (appState.viewBackgroundColor) {
-    ctx.fillStyle = appState.viewBackgroundColor;
-    ctx.fillRect(0, 0, appState.width, appState.height);
-  }
-
-  drawGrid(ctx, appState);
-  applyZoom(ctx, appState);
-
-  const frameMap = new Map<string, DrawFrameElement>();
-  for (const element of elements) {
-    if (element.type === 'frame' && !element.isDeleted) {
-      frameMap.set(element.id, element as DrawFrameElement);
-    }
-  }
-
-  const editingTextId = appState.editingTextElement?.id ?? null;
-
-  const linearContainerIds = new Set<string>();
-  for (const element of elements) {
-    if (element.isDeleted) continue;
-    if (element.type === 'arrow' || element.type === 'line') {
-      if (element.boundElements?.some((b) => b.type === 'text')) {
-        linearContainerIds.add(element.id);
-      }
-    }
-  }
-
-  for (const element of elements) {
-    if (element.isDeleted) continue;
-
-    if (element.type === 'text' && element.id === editingTextId) continue;
-
-    const frame = element.frameId ? frameMap.get(element.frameId) : null;
-    const shouldClip = frame && appState.frameRendering.enabled && appState.frameRendering.clip;
-
-    if (shouldClip && frame) {
-      ctx.save();
-      ctx.beginPath();
-      ctx.rect(frame.x, frame.y, frame.width, frame.height);
-      ctx.clip();
-    }
-
-    if (element.type === 'frame') {
-      renderFrameElement(ctx, element as DrawFrameElement, appState);
-    } else if (element.type === 'text') {
-      const textEl = element as DrawTextElement;
-      if (textEl.containerId && linearContainerIds.has(textEl.containerId)) {
-        renderLinearBoundText(ctx, textEl, appState.viewBackgroundColor);
-      } else {
-        renderTextElement(ctx, textEl);
-      }
-    } else if (element.type === 'image') {
-      renderImageElement(ctx, element, imageCache);
-    } else {
-      drawElementOnCanvas(rc, ctx, element);
-    }
-
-    if (shouldClip) {
-      ctx.restore();
-    }
-  }
-}
-
-function renderLinearBoundText(
-  ctx: CanvasRenderingContext2D,
-  element: DrawTextElement,
-  bgColor: string | null,
-): void {
-  if (!element.text) return;
-
-  const pad = BOUND_TEXT_PADDING;
-  ctx.save();
-  ctx.globalAlpha = element.opacity / 100;
-
-  if (bgColor) {
-    ctx.fillStyle = bgColor;
-    ctx.fillRect(
-      element.x - pad,
-      element.y - pad,
-      element.width + pad * 2,
-      element.height + pad * 2,
-    );
-  }
-
-  ctx.restore();
-  renderTextElement(ctx, element);
-}
-
-function renderTextElement(
-  ctx: CanvasRenderingContext2D,
-  element: DrawTextElement,
-): void {
-  if (!element.text) return;
-
-  ctx.save();
-  ctx.translate(element.x, element.y);
-
-  if (element.angle !== 0) {
-    const cx = element.width / 2;
-    const cy = element.height / 2;
-    ctx.translate(cx, cy);
-    ctx.rotate(element.angle);
-    ctx.translate(-cx, -cy);
-  }
-
-  ctx.globalAlpha = element.opacity / 100;
-
-  const fontFamily = FONT_FAMILY_FALLBACKS[element.fontFamily] ?? 'sans-serif';
-  ctx.font = `${element.fontSize}px ${fontFamily}`;
-  ctx.fillStyle = element.strokeColor;
-  ctx.textAlign = element.textAlign as CanvasTextAlign;
-
-  const lines = element.text.split('\n');
-  const lineHeightPx = getLineHeightInPx(element.fontSize, element.lineHeight);
-
-  let textX = 0;
-  if (element.textAlign === 'center') {
-    textX = element.width / 2;
-  } else if (element.textAlign === 'right') {
-    textX = element.width;
-  }
-
-  const vOffset = getVerticalOffset(element.fontFamily, element.fontSize, lineHeightPx);
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i]!;
-    ctx.fillText(line, textX, i * lineHeightPx + vOffset);
-  }
-
-  ctx.restore();
-}
-
-function renderFrameElement(
-  ctx: CanvasRenderingContext2D,
-  element: DrawFrameElement,
-  appState: AppState,
-): void {
-  if (!appState.frameRendering.enabled) return;
-
-  ctx.save();
-  ctx.globalAlpha = element.opacity / 100;
-
-  if (appState.frameRendering.outline) {
-    ctx.strokeStyle = SELECTION_BORDER_COLOR;
-    ctx.lineWidth = 2;
-    ctx.setLineDash([8, 4]);
-    ctx.strokeRect(element.x, element.y, element.width, element.height);
-    ctx.setLineDash([]);
-  }
-
-  if (appState.frameRendering.name && element.name) {
-    const zoom = appState.zoom.value;
-    const fontSize = 12 / zoom;
-    ctx.font = `${fontSize}px sans-serif`;
-    ctx.fillStyle = SELECTION_BORDER_COLOR;
-    ctx.textAlign = 'left';
-    ctx.textBaseline = 'bottom';
-    ctx.fillText(element.name, element.x, element.y - 4 / zoom);
-  }
-
-  ctx.restore();
-}
-
-function renderImageElement(
-  ctx: CanvasRenderingContext2D,
-  element: DrawElement,
-  imageCache: Map<string, HTMLImageElement>,
-): void {
-  const imgEl = element as DrawElement & { fileId: string | null };
-  if (!imgEl.fileId) return;
-
-  const img = imageCache.get(imgEl.fileId);
-  if (!img) return;
-
-  ctx.save();
-  ctx.translate(element.x, element.y);
-
-  if (element.angle !== 0) {
-    const cx = element.width / 2;
-    const cy = element.height / 2;
-    ctx.translate(cx, cy);
-    ctx.rotate(element.angle);
-    ctx.translate(-cx, -cy);
-  }
-
-  ctx.globalAlpha = element.opacity / 100;
-  ctx.drawImage(img, 0, 0, element.width, element.height);
-  ctx.restore();
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/core/scene.ts b/web/apps/web-ele/src/components/zq-draw/core/scene.ts
deleted file mode 100644
index becf17a..0000000
--- a/web/apps/web-ele/src/components/zq-draw/core/scene.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-import type {
-  DrawElement,
-  NonDeletedDrawElement,
-  AppState,
-} from '../types';
-
-type SceneCallback = () => void;
-
-export class Scene {
-  private elementsMap = new Map<string, DrawElement>();
-  private nonDeletedElements: NonDeletedDrawElement[] = [];
-  private version = 0;
-  private callbacks = new Set<SceneCallback>();
-
-  getVersion(): number {
-    return this.version;
-  }
-
-  getElements(): readonly DrawElement[] {
-    return Array.from(this.elementsMap.values());
-  }
-
-  getElementsIncludingDeleted(): readonly DrawElement[] {
-    return Array.from(this.elementsMap.values());
-  }
-
-  getNonDeletedElements(): readonly NonDeletedDrawElement[] {
-    return this.nonDeletedElements;
-  }
-
-  getElementsMapIncludingDeleted(): Map<string, DrawElement> {
-    return this.elementsMap;
-  }
-
-  getElement(id: string): DrawElement | undefined {
-    return this.elementsMap.get(id);
-  }
-
-  replaceAllElements(elements: readonly DrawElement[]): void {
-    this.elementsMap.clear();
-    for (const el of elements) {
-      this.elementsMap.set(el.id, el);
-    }
-    this.updateNonDeleted();
-    this.version++;
-    this.triggerCallbacks();
-  }
-
-  insertElement(element: DrawElement): void {
-    this.elementsMap.set(element.id, element);
-    this.updateNonDeleted();
-    this.version++;
-    this.triggerCallbacks();
-  }
-
-  insertElements(elements: readonly DrawElement[]): void {
-    for (const el of elements) {
-      this.elementsMap.set(el.id, el);
-    }
-    this.updateNonDeleted();
-    this.version++;
-    this.triggerCallbacks();
-  }
-
-  mutateElement(
-    id: string,
-    updates: Partial<DrawElement>,
-  ): DrawElement | null {
-    const el = this.elementsMap.get(id);
-    if (!el) return null;
-
-    const updated = {
-      ...el,
-      ...updates,
-      version: el.version + 1,
-      versionNonce: randomInteger(),
-      updated: Date.now(),
-    } as DrawElement;
-
-    this.elementsMap.set(id, updated);
-    this.updateNonDeleted();
-    this.version++;
-    this.triggerCallbacks();
-    return updated;
-  }
-
-  deleteElement(id: string): void {
-    const el = this.elementsMap.get(id);
-    if (!el) return;
-    this.elementsMap.set(id, { ...el, isDeleted: true } as DrawElement);
-    this.updateNonDeleted();
-    this.version++;
-    this.triggerCallbacks();
-  }
-
-  deleteElements(ids: string[]): void {
-    for (const id of ids) {
-      const el = this.elementsMap.get(id);
-      if (el) {
-        this.elementsMap.set(id, { ...el, isDeleted: true } as DrawElement);
-      }
-    }
-    this.updateNonDeleted();
-    this.version++;
-    this.triggerCallbacks();
-  }
-
-  getSelectedElements(appState: AppState): NonDeletedDrawElement[] {
-    return this.nonDeletedElements.filter(
-      (el) => appState.selectedElementIds[el.id],
-    );
-  }
-
-  onChange(callback: SceneCallback): () => void {
-    this.callbacks.add(callback);
-    return () => {
-      this.callbacks.delete(callback);
-    };
-  }
-
-  destroy(): void {
-    this.elementsMap.clear();
-    this.nonDeletedElements = [];
-    this.callbacks.clear();
-  }
-
-  private updateNonDeleted(): void {
-    this.nonDeletedElements = Array.from(this.elementsMap.values()).filter(
-      (el): el is NonDeletedDrawElement => !el.isDeleted,
-    );
-  }
-
-  private triggerCallbacks(): void {
-    for (const cb of this.callbacks) {
-      cb();
-    }
-  }
-}
-
-function randomInteger(): number {
-  return Math.floor(Math.random() * 2 ** 31);
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/core/snap.ts b/web/apps/web-ele/src/components/zq-draw/core/snap.ts
deleted file mode 100644
index f988cd0..0000000
--- a/web/apps/web-ele/src/components/zq-draw/core/snap.ts
+++ /dev/null
@@ -1,475 +0,0 @@
-import type { DrawElement, GlobalPoint, SnapLine } from '../types';
-import type { Bounds } from '../math/types';
-import { getElementBounds, getCommonBounds } from '../elements/bounds';
-import { SNAP_THRESHOLD } from '../constants';
-
-interface SnapResult {
-  snappedOffset: { x: number; y: number };
-  snapLines: SnapLine[];
-}
-
-interface ReferencePoint {
-  x: number;
-  y: number;
-  elementId: string;
-}
-
-interface Gap {
-  axis: 'x' | 'y';
-  gap: number;
-  startBounds: Bounds;
-  endBounds: Bounds;
-  overlap: [number, number];
-}
-
-export class SnapCache {
-  private referencePoints: ReferencePoint[] = [];
-  private visibleGaps: Gap[] = [];
-  private dirty = true;
-
-  invalidate(): void {
-    this.dirty = true;
-  }
-
-  update(
-    elements: readonly DrawElement[],
-    excludeIds: Set<string>,
-  ): void {
-    if (!this.dirty) return;
-
-    this.referencePoints = [];
-    this.visibleGaps = [];
-
-    const filtered = elements.filter(
-      (el) => !el.isDeleted && !excludeIds.has(el.id) && el.type !== 'selection',
-    );
-
-    for (const el of filtered) {
-      const [x1, y1, x2, y2] = getElementBounds(el);
-      const cx = (x1 + x2) / 2;
-      const cy = (y1 + y2) / 2;
-
-      // corners
-      this.referencePoints.push(
-        { x: x1, y: y1, elementId: el.id },
-        { x: x2, y: y1, elementId: el.id },
-        { x: x2, y: y2, elementId: el.id },
-        { x: x1, y: y2, elementId: el.id },
-      );
-      // edge midpoints
-      this.referencePoints.push(
-        { x: cx, y: y1, elementId: el.id },
-        { x: x2, y: cy, elementId: el.id },
-        { x: cx, y: y2, elementId: el.id },
-        { x: x1, y: cy, elementId: el.id },
-      );
-      // center
-      this.referencePoints.push(
-        { x: cx, y: cy, elementId: el.id },
-      );
-    }
-
-    this.computeGaps(filtered);
-    this.dirty = false;
-  }
-
-  private computeGaps(elements: readonly DrawElement[]): void {
-    if (elements.length < 2) return;
-
-    const boundsArr = elements.map((el) => ({
-      id: el.id,
-      bounds: getElementBounds(el),
-    }));
-
-    // horizontal gaps (sorted by left edge)
-    const sortedByX = [...boundsArr].sort((a, b) => a.bounds[0] - b.bounds[0]);
-    for (let i = 0; i < sortedByX.length - 1; i++) {
-      const a = sortedByX[i]!;
-      const b = sortedByX[i + 1]!;
-      const gap = b.bounds[0] - a.bounds[2];
-      if (gap > 0) {
-        const overlapStart = Math.max(a.bounds[1], b.bounds[1]);
-        const overlapEnd = Math.min(a.bounds[3], b.bounds[3]);
-        if (overlapEnd > overlapStart) {
-          this.visibleGaps.push({
-            axis: 'x',
-            gap,
-            startBounds: a.bounds,
-            endBounds: b.bounds,
-            overlap: [overlapStart, overlapEnd],
-          });
-        }
-      }
-    }
-
-    // vertical gaps (sorted by top edge)
-    const sortedByY = [...boundsArr].sort((a, b) => a.bounds[1] - b.bounds[1]);
-    for (let i = 0; i < sortedByY.length - 1; i++) {
-      const a = sortedByY[i]!;
-      const b = sortedByY[i + 1]!;
-      const gap = b.bounds[1] - a.bounds[3];
-      if (gap > 0) {
-        const overlapStart = Math.max(a.bounds[0], b.bounds[0]);
-        const overlapEnd = Math.min(a.bounds[2], b.bounds[2]);
-        if (overlapEnd > overlapStart) {
-          this.visibleGaps.push({
-            axis: 'y',
-            gap,
-            startBounds: a.bounds,
-            endBounds: b.bounds,
-            overlap: [overlapStart, overlapEnd],
-          });
-        }
-      }
-    }
-  }
-
-  getReferencePoints(): readonly ReferencePoint[] {
-    return this.referencePoints;
-  }
-
-  getVisibleGaps(): readonly Gap[] {
-    return this.visibleGaps;
-  }
-}
-
-export function getSnapDistance(zoom: number): number {
-  return SNAP_THRESHOLD / zoom;
-}
-
-/**
- * Collect snap candidates for a set of bounds (corners + edge midpoints + center).
- */
-function getBoundsSnapCandidates(bounds: Bounds): { xs: number[]; ys: number[] } {
-  const [x1, y1, x2, y2] = bounds;
-  const cx = (x1 + x2) / 2;
-  const cy = (y1 + y2) / 2;
-  return {
-    xs: [x1, cx, x2],
-    ys: [y1, cy, y2],
-  };
-}
-
-interface SnapMatch {
-  offset: number;
-  candidateValue: number;
-  refValue: number;
-  refPoint: ReferencePoint;
-}
-
-/**
- * Find best point snaps on a single axis.
- */
-function findAxisSnaps(
-  candidates: number[],
-  referencePoints: readonly ReferencePoint[],
-  axis: 'x' | 'y',
-  threshold: number,
-): SnapMatch[] {
-  let bestOffset = Infinity;
-  let matches: SnapMatch[] = [];
-
-  for (const ref of referencePoints) {
-    const refVal = axis === 'x' ? ref.x : ref.y;
-    for (const cand of candidates) {
-      const offset = refVal - cand;
-      const absOffset = Math.abs(offset);
-      if (absOffset < threshold) {
-        if (absOffset < bestOffset) {
-          bestOffset = absOffset;
-          matches = [{ offset, candidateValue: cand, refValue: refVal, refPoint: ref }];
-        } else if (Math.abs(absOffset - bestOffset) < 0.01) {
-          matches.push({ offset, candidateValue: cand, refValue: refVal, refPoint: ref });
-        }
-      }
-    }
-  }
-
-  return matches;
-}
-
-/**
- * Find gap snaps for a given bounds.
- */
-function findGapSnaps(
-  bounds: Bounds,
-  gaps: readonly Gap[],
-  threshold: number,
-): { xMatches: SnapMatch[]; yMatches: SnapMatch[] } {
-  const [sx1, sy1, sx2, sy2] = bounds;
-  let bestDx = Infinity;
-  let bestDy = Infinity;
-  let xMatches: SnapMatch[] = [];
-  let yMatches: SnapMatch[] = [];
-
-  for (const gap of gaps) {
-    if (gap.axis === 'x') {
-      // snap to right side: place element so that gap between endBounds right edge and element left = gap.gap
-      const rightOffset = (gap.endBounds[2] + gap.gap) - sx1;
-      if (Math.abs(rightOffset) < threshold && Math.abs(rightOffset) < bestDx) {
-        bestDx = Math.abs(rightOffset);
-        xMatches = [{ offset: rightOffset, candidateValue: sx1, refValue: gap.endBounds[2] + gap.gap, refPoint: { x: gap.endBounds[2] + gap.gap, y: (gap.overlap[0] + gap.overlap[1]) / 2, elementId: '' } }];
-      }
-      // snap to left side: place element so that gap between element right edge and startBounds left = gap.gap
-      const leftOffset = (gap.startBounds[0] - gap.gap) - sx2;
-      if (Math.abs(leftOffset) < threshold && Math.abs(leftOffset) < bestDx) {
-        bestDx = Math.abs(leftOffset);
-        xMatches = [{ offset: leftOffset, candidateValue: sx2, refValue: gap.startBounds[0] - gap.gap, refPoint: { x: gap.startBounds[0] - gap.gap, y: (gap.overlap[0] + gap.overlap[1]) / 2, elementId: '' } }];
-      }
-    } else {
-      const bottomOffset = (gap.endBounds[3] + gap.gap) - sy1;
-      if (Math.abs(bottomOffset) < threshold && Math.abs(bottomOffset) < bestDy) {
-        bestDy = Math.abs(bottomOffset);
-        yMatches = [{ offset: bottomOffset, candidateValue: sy1, refValue: gap.endBounds[3] + gap.gap, refPoint: { x: (gap.overlap[0] + gap.overlap[1]) / 2, y: gap.endBounds[3] + gap.gap, elementId: '' } }];
-      }
-      const topOffset = (gap.startBounds[1] - gap.gap) - sy2;
-      if (Math.abs(topOffset) < threshold && Math.abs(topOffset) < bestDy) {
-        bestDy = Math.abs(topOffset);
-        yMatches = [{ offset: topOffset, candidateValue: sy2, refValue: gap.startBounds[1] - gap.gap, refPoint: { x: (gap.overlap[0] + gap.overlap[1]) / 2, y: gap.startBounds[1] - gap.gap, elementId: '' } }];
-      }
-    }
-  }
-
-  return { xMatches, yMatches };
-}
-
-/**
- * Create snap lines from matches, extending lines to cover both the reference
- * element bounds and the dragged element bounds.
- */
-function createSnapLinesFromMatches(
-  xMatches: SnapMatch[],
-  yMatches: SnapMatch[],
-  snappedBounds: Bounds,
-  allRefPoints: readonly ReferencePoint[],
-): SnapLine[] {
-  const snapLines: SnapLine[] = [];
-  const [sx1, sy1, sx2, sy2] = snappedBounds;
-
-  if (xMatches.length > 0) {
-    const snapX = xMatches[0]!.refValue;
-
-    // Collect all Y values that align at this X (from reference points and dragged bounds)
-    const yValues: number[] = [sy1, sy2, (sy1 + sy2) / 2];
-    for (const ref of allRefPoints) {
-      if (Math.abs(ref.x - snapX) < 0.5) {
-        yValues.push(ref.y);
-      }
-    }
-    const minY = Math.min(...yValues) - 10;
-    const maxY = Math.max(...yValues) + 10;
-
-    snapLines.push({
-      type: 'points',
-      points: [
-        [snapX, minY] as GlobalPoint,
-        [snapX, maxY] as GlobalPoint,
-      ],
-    });
-  }
-
-  if (yMatches.length > 0) {
-    const snapY = yMatches[0]!.refValue;
-
-    const xValues: number[] = [sx1, sx2, (sx1 + sx2) / 2];
-    for (const ref of allRefPoints) {
-      if (Math.abs(ref.y - snapY) < 0.5) {
-        xValues.push(ref.x);
-      }
-    }
-    const minX = Math.min(...xValues) - 10;
-    const maxX = Math.max(...xValues) + 10;
-
-    snapLines.push({
-      type: 'points',
-      points: [
-        [minX, snapY] as GlobalPoint,
-        [maxX, snapY] as GlobalPoint,
-      ],
-    });
-  }
-
-  return snapLines;
-}
-
-/**
- * Snap dragged elements to nearby reference points.
- * Uses the ORIGINAL bounds (before drag) + dragOffset to compute snap.
- */
-export function snapDraggedElements(
-  dragOffset: { x: number; y: number },
-  originalBounds: Bounds,
-  cache: SnapCache,
-  zoom: number,
-): SnapResult {
-  const threshold = getSnapDistance(zoom);
-
-  const [ox1, oy1, ox2, oy2] = originalBounds;
-  // Projected bounds after applying drag offset
-  const projectedBounds: Bounds = [
-    ox1 + dragOffset.x,
-    oy1 + dragOffset.y,
-    ox2 + dragOffset.x,
-    oy2 + dragOffset.y,
-  ];
-
-  const { xs: candidateXs, ys: candidateYs } = getBoundsSnapCandidates(projectedBounds);
-
-  // Point snaps
-  const xPointMatches = findAxisSnaps(candidateXs, cache.getReferencePoints(), 'x', threshold);
-  const yPointMatches = findAxisSnaps(candidateYs, cache.getReferencePoints(), 'y', threshold);
-
-  // Gap snaps
-  const { xMatches: xGapMatches, yMatches: yGapMatches } = findGapSnaps(
-    projectedBounds,
-    cache.getVisibleGaps(),
-    threshold,
-  );
-
-  // Pick best X snap (point vs gap)
-  let bestXOffset = 0;
-  let xMatches: SnapMatch[] = [];
-  const xPointBest = xPointMatches.length > 0 ? Math.abs(xPointMatches[0]!.offset) : Infinity;
-  const xGapBest = xGapMatches.length > 0 ? Math.abs(xGapMatches[0]!.offset) : Infinity;
-
-  if (xPointBest <= xGapBest && xPointBest < Infinity) {
-    bestXOffset = xPointMatches[0]!.offset;
-    xMatches = xPointMatches;
-  } else if (xGapBest < Infinity) {
-    bestXOffset = xGapMatches[0]!.offset;
-    xMatches = xGapMatches;
-  }
-
-  // Pick best Y snap
-  let bestYOffset = 0;
-  let yMatches: SnapMatch[] = [];
-  const yPointBest = yPointMatches.length > 0 ? Math.abs(yPointMatches[0]!.offset) : Infinity;
-  const yGapBest = yGapMatches.length > 0 ? Math.abs(yGapMatches[0]!.offset) : Infinity;
-
-  if (yPointBest <= yGapBest && yPointBest < Infinity) {
-    bestYOffset = yPointMatches[0]!.offset;
-    yMatches = yPointMatches;
-  } else if (yGapBest < Infinity) {
-    bestYOffset = yGapMatches[0]!.offset;
-    yMatches = yGapMatches;
-  }
-
-  const snappedOffset = {
-    x: dragOffset.x + bestXOffset,
-    y: dragOffset.y + bestYOffset,
-  };
-
-  // Compute snapped bounds for line generation
-  const snappedBounds: Bounds = [
-    ox1 + snappedOffset.x,
-    oy1 + snappedOffset.y,
-    ox2 + snappedOffset.x,
-    oy2 + snappedOffset.y,
-  ];
-
-  const snapLines = createSnapLinesFromMatches(
-    xMatches,
-    yMatches,
-    snappedBounds,
-    cache.getReferencePoints(),
-  );
-
-  return { snappedOffset, snapLines };
-}
-
-/**
- * Snap a new element being created.
- */
-export function snapNewElement(
-  bounds: Bounds,
-  cache: SnapCache,
-  zoom: number,
-): { snappedBounds: Bounds; snapLines: SnapLine[] } {
-  const threshold = getSnapDistance(zoom);
-  const { xs: candidateXs, ys: candidateYs } = getBoundsSnapCandidates(bounds);
-
-  const xMatches = findAxisSnaps(candidateXs, cache.getReferencePoints(), 'x', threshold);
-  const yMatches = findAxisSnaps(candidateYs, cache.getReferencePoints(), 'y', threshold);
-
-  const offsetX = xMatches.length > 0 ? xMatches[0]!.offset : 0;
-  const offsetY = yMatches.length > 0 ? yMatches[0]!.offset : 0;
-
-  const snappedBounds: Bounds = [
-    bounds[0] + offsetX,
-    bounds[1] + offsetY,
-    bounds[2] + offsetX,
-    bounds[3] + offsetY,
-  ];
-
-  const snapLines = createSnapLinesFromMatches(
-    xMatches,
-    yMatches,
-    snappedBounds,
-    cache.getReferencePoints(),
-  );
-
-  return { snappedBounds, snapLines };
-}
-
-/**
- * Snap during element resize.
- */
-export function snapResizeElement(
-  resizingEdgeX: number | null,
-  resizingEdgeY: number | null,
-  cache: SnapCache,
-  zoom: number,
-): { offsetX: number; offsetY: number; snapLines: SnapLine[] } {
-  const threshold = getSnapDistance(zoom);
-  let offsetX = 0;
-  let offsetY = 0;
-  const snapLines: SnapLine[] = [];
-
-  if (resizingEdgeX !== null) {
-    const xMatches = findAxisSnaps([resizingEdgeX], cache.getReferencePoints(), 'x', threshold);
-    if (xMatches.length > 0) {
-      offsetX = xMatches[0]!.offset;
-      const snapX = xMatches[0]!.refValue;
-      const yValues: number[] = [];
-      for (const ref of cache.getReferencePoints()) {
-        if (Math.abs(ref.x - snapX) < 0.5) {
-          yValues.push(ref.y);
-        }
-      }
-      if (resizingEdgeY !== null) yValues.push(resizingEdgeY);
-      if (yValues.length >= 2) {
-        const minY = Math.min(...yValues) - 10;
-        const maxY = Math.max(...yValues) + 10;
-        snapLines.push({
-          type: 'points',
-          points: [[snapX, minY] as GlobalPoint, [snapX, maxY] as GlobalPoint],
-        });
-      }
-    }
-  }
-
-  if (resizingEdgeY !== null) {
-    const yMatches = findAxisSnaps([resizingEdgeY], cache.getReferencePoints(), 'y', threshold);
-    if (yMatches.length > 0) {
-      offsetY = yMatches[0]!.offset;
-      const snapY = yMatches[0]!.refValue;
-      const xValues: number[] = [];
-      for (const ref of cache.getReferencePoints()) {
-        if (Math.abs(ref.y - snapY) < 0.5) {
-          xValues.push(ref.x);
-        }
-      }
-      if (resizingEdgeX !== null) xValues.push(resizingEdgeX);
-      if (xValues.length >= 2) {
-        const minX = Math.min(...xValues) - 10;
-        const maxX = Math.max(...xValues) + 10;
-        snapLines.push({
-          type: 'points',
-          points: [[minX, snapY] as GlobalPoint, [maxX, snapY] as GlobalPoint],
-        });
-      }
-    }
-  }
-
-  return { offsetX, offsetY, snapLines };
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/data/export-canvas.ts b/web/apps/web-ele/src/components/zq-draw/data/export-canvas.ts
deleted file mode 100644
index 3ce2eb3..0000000
--- a/web/apps/web-ele/src/components/zq-draw/data/export-canvas.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import type { DrawElement, AppState, BinaryFiles } from '../types';
-import { getCommonBounds } from '../elements/bounds';
-import { renderStaticScene } from '../core/renderer/static-scene';
-
-const EXPORT_PADDING = 20;
-
-export async function exportToCanvas(
-  elements: readonly DrawElement[],
-  appState: Partial<AppState>,
-  files: BinaryFiles,
-  imageCache: Map<string, HTMLImageElement>,
-  opts: { padding?: number; scale?: number; background?: boolean } = {},
-): Promise<HTMLCanvasElement> {
-  const nonDeleted = elements.filter((el) => !el.isDeleted);
-  if (nonDeleted.length === 0) {
-    const canvas = document.createElement('canvas');
-    canvas.width = 1;
-    canvas.height = 1;
-    return canvas;
-  }
-
-  const [x1, y1, x2, y2] = getCommonBounds(nonDeleted);
-  const padding = opts.padding ?? EXPORT_PADDING;
-  const scale = opts.scale ?? 2;
-
-  const width = x2 - x1 + padding * 2;
-  const height = y2 - y1 + padding * 2;
-
-  const canvas = document.createElement('canvas');
-
-  const exportAppState: AppState = {
-    ...getDefaultExportAppState(),
-    ...appState,
-    width,
-    height,
-    scrollX: -x1 + padding,
-    scrollY: -y1 + padding,
-    zoom: { value: 1 as any },
-    gridModeEnabled: false,
-  } as AppState;
-
-  if (opts.background === false) {
-    exportAppState.viewBackgroundColor = 'transparent';
-  }
-
-  renderStaticScene(canvas, nonDeleted, exportAppState, files, imageCache);
-
-  if (scale !== 1) {
-    const scaledCanvas = document.createElement('canvas');
-    scaledCanvas.width = canvas.width * scale;
-    scaledCanvas.height = canvas.height * scale;
-    const ctx = scaledCanvas.getContext('2d');
-    if (ctx) {
-      ctx.scale(scale, scale);
-      ctx.drawImage(canvas, 0, 0);
-    }
-    return scaledCanvas;
-  }
-
-  return canvas;
-}
-
-export async function exportToBlob(
-  elements: readonly DrawElement[],
-  appState: Partial<AppState>,
-  files: BinaryFiles,
-  imageCache: Map<string, HTMLImageElement>,
-  opts: { padding?: number; scale?: number; background?: boolean; type?: string; quality?: number } = {},
-): Promise<Blob> {
-  const canvas = await exportToCanvas(elements, appState, files, imageCache, opts);
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (blob) resolve(blob);
-        else reject(new Error('Failed to export to blob'));
-      },
-      opts.type ?? 'image/png',
-      opts.quality ?? 0.92,
-    );
-  });
-}
-
-function getDefaultExportAppState(): AppState {
-  return {
-    viewBackgroundColor: '#ffffff',
-    zoom: { value: 1 as any },
-    scrollX: 0,
-    scrollY: 0,
-    width: 100,
-    height: 100,
-    theme: 'light',
-    gridModeEnabled: false,
-    gridSize: 20,
-    gridStep: 5,
-    exportBackground: true,
-    exportScale: 2,
-    exportWithDarkMode: false,
-  } as AppState;
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/data/export-svg.ts b/web/apps/web-ele/src/components/zq-draw/data/export-svg.ts
deleted file mode 100644
index 19be2cf..0000000
--- a/web/apps/web-ele/src/components/zq-draw/data/export-svg.ts
+++ /dev/null
@@ -1,439 +0,0 @@
-import type {
-  DrawElement,
-  DrawTextElement,
-  DrawLinearElement,
-  DrawFreeDrawElement,
-  DrawImageElement,
-  DrawFrameElement,
-  Arrowhead,
-  AppState,
-  BinaryFiles,
-} from '../types';
-import { getCommonBounds } from '../elements/bounds';
-import { FONT_FAMILY_FALLBACKS, SELECTION_BORDER_COLOR, getVerticalOffset } from '../constants';
-import { getLineHeightInPx, BOUND_TEXT_PADDING } from '../elements/bound-text';
-import { getFreeDrawOutlinePoints, getSvgPathFromStroke } from '../elements/shape-generator';
-
-const SVG_NS = 'http://www.w3.org/2000/svg';
-const EXPORT_PADDING = 20;
-
-export function exportToSvg(
-  elements: readonly DrawElement[],
-  appState: Partial<AppState>,
-  files?: BinaryFiles,
-  opts: { padding?: number; background?: boolean } = {},
-): SVGSVGElement {
-  const nonDeleted = elements.filter((el) => !el.isDeleted);
-  const padding = opts.padding ?? EXPORT_PADDING;
-
-  if (nonDeleted.length === 0) {
-    const svg = createSvgElement(100, 100);
-    return svg;
-  }
-
-  const [x1, y1, x2, y2] = getCommonBounds(nonDeleted);
-  const width = x2 - x1 + padding * 2;
-  const height = y2 - y1 + padding * 2;
-
-  const svg = createSvgElement(width, height);
-
-  if (opts.background !== false && appState.viewBackgroundColor) {
-    const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-    bg.setAttribute('width', String(width));
-    bg.setAttribute('height', String(height));
-    bg.setAttribute('fill', appState.viewBackgroundColor);
-    svg.appendChild(bg);
-  }
-
-  const boundTextByContainer = new Map<string, DrawTextElement>();
-  for (const el of nonDeleted) {
-    if (el.type === 'text') {
-      const textEl = el as DrawTextElement;
-      if (textEl.containerId) {
-        boundTextByContainer.set(textEl.containerId, textEl);
-      }
-    }
-  }
-
-  const defs = document.createElementNS(SVG_NS, 'defs');
-  svg.appendChild(defs);
-
-  const g = document.createElementNS(SVG_NS, 'g');
-  g.setAttribute('transform', `translate(${-x1 + padding}, ${-y1 + padding})`);
-
-  for (const element of nonDeleted) {
-    const boundText = boundTextByContainer.get(element.id);
-    const svgEl = elementToSvg(element, files, boundText, defs);
-    if (svgEl) {
-      g.appendChild(svgEl);
-    }
-  }
-
-  svg.appendChild(g);
-  return svg;
-}
-
-export function exportToSvgString(
-  elements: readonly DrawElement[],
-  appState: Partial<AppState>,
-  files?: BinaryFiles,
-  opts?: { padding?: number; background?: boolean },
-): string {
-  const svg = exportToSvg(elements, appState, files, opts);
-  const serializer = new XMLSerializer();
-  return serializer.serializeToString(svg);
-}
-
-function createSvgElement(width: number, height: number): SVGSVGElement {
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-  svg.setAttribute('width', String(Math.ceil(width)));
-  svg.setAttribute('height', String(Math.ceil(height)));
-  svg.setAttribute('viewBox', `0 0 ${Math.ceil(width)} ${Math.ceil(height)}`);
-  return svg;
-}
-
-function elementToSvg(
-  element: DrawElement,
-  files?: BinaryFiles,
-  boundText?: DrawTextElement,
-  defs?: SVGDefsElement,
-): SVGElement | null {
-  const g = document.createElementNS(SVG_NS, 'g');
-  g.setAttribute(
-    'transform',
-    `translate(${element.x}, ${element.y})${
-      element.angle ? ` rotate(${(element.angle * 180) / Math.PI}, ${element.width / 2}, ${element.height / 2})` : ''
-    }`,
-  );
-  g.setAttribute('opacity', String(element.opacity / 100));
-
-  switch (element.type) {
-    case 'rectangle': {
-      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-      rect.setAttribute('width', String(element.width));
-      rect.setAttribute('height', String(element.height));
-      applyStrokeAndFill(rect, element);
-      if (element.roundness) {
-        const r = Math.min(element.width, element.height) * 0.1;
-        rect.setAttribute('rx', String(r));
-        rect.setAttribute('ry', String(r));
-      }
-      g.appendChild(rect);
-      break;
-    }
-    case 'ellipse': {
-      const ellipse = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
-      ellipse.setAttribute('cx', String(element.width / 2));
-      ellipse.setAttribute('cy', String(element.height / 2));
-      ellipse.setAttribute('rx', String(element.width / 2));
-      ellipse.setAttribute('ry', String(element.height / 2));
-      applyStrokeAndFill(ellipse, element);
-      g.appendChild(ellipse);
-      break;
-    }
-    case 'diamond': {
-      const w = element.width;
-      const h = element.height;
-      const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-      polygon.setAttribute(
-        'points',
-        `${w / 2},0 ${w},${h / 2} ${w / 2},${h} 0,${h / 2}`,
-      );
-      applyStrokeAndFill(polygon, element);
-      g.appendChild(polygon);
-      break;
-    }
-    case 'text': {
-      const textEl = element as DrawTextElement;
-      if (!textEl.text) break;
-
-      const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-      const fontFamily = FONT_FAMILY_FALLBACKS[textEl.fontFamily] ?? 'sans-serif';
-      text.setAttribute('font-size', String(textEl.fontSize));
-      text.setAttribute('font-family', fontFamily);
-      text.setAttribute('fill', textEl.strokeColor);
-      text.setAttribute('dominant-baseline', 'alphabetic');
-      text.setAttribute('text-anchor', textEl.textAlign === 'center' ? 'middle' : textEl.textAlign === 'right' ? 'end' : 'start');
-      text.setAttribute('style', 'white-space: pre;');
-
-      const lines = textEl.text.split('\n');
-      const lineHeightPx = getLineHeightInPx(textEl.fontSize, textEl.lineHeight);
-      const vOffset = getVerticalOffset(textEl.fontFamily, textEl.fontSize, lineHeightPx);
-      let textX = 0;
-      if (textEl.textAlign === 'center') textX = textEl.width / 2;
-      else if (textEl.textAlign === 'right') textX = textEl.width;
-
-      for (let i = 0; i < lines.length; i++) {
-        const line = lines[i]!;
-        const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-        tspan.setAttribute('x', String(textX));
-        tspan.setAttribute('y', String(i * lineHeightPx + vOffset));
-        tspan.textContent = line || '\u00A0';
-        text.appendChild(tspan);
-      }
-      g.appendChild(text);
-      break;
-    }
-    case 'line':
-    case 'arrow': {
-      const linear = element as DrawLinearElement;
-      if (linear.points && linear.points.length >= 2) {
-        const lineEl = createLinearSvgElement(linear, element);
-
-        if (boundText && defs) {
-          const mask = document.createElementNS(SVG_NS, 'mask');
-          const maskId = `mask-${element.id}`;
-          mask.setAttribute('id', maskId);
-
-          const maskVisible = document.createElementNS(SVG_NS, 'rect');
-          maskVisible.setAttribute('x', '-10000');
-          maskVisible.setAttribute('y', '-10000');
-          maskVisible.setAttribute('width', '20000');
-          maskVisible.setAttribute('height', '20000');
-          maskVisible.setAttribute('fill', '#fff');
-          mask.appendChild(maskVisible);
-
-          const pad = BOUND_TEXT_PADDING;
-          const maskHole = document.createElementNS(SVG_NS, 'rect');
-          maskHole.setAttribute('x', String(boundText.x - element.x - pad));
-          maskHole.setAttribute('y', String(boundText.y - element.y - pad));
-          maskHole.setAttribute('width', String(boundText.width + pad * 2));
-          maskHole.setAttribute('height', String(boundText.height + pad * 2));
-          maskHole.setAttribute('fill', '#000');
-          mask.appendChild(maskHole);
-
-          defs.appendChild(mask);
-
-          const maskedGroup = document.createElementNS(SVG_NS, 'g');
-          maskedGroup.setAttribute('mask', `url(#${maskId})`);
-          maskedGroup.appendChild(lineEl);
-          g.appendChild(maskedGroup);
-        } else {
-          g.appendChild(lineEl);
-        }
-
-        {
-          const pts = linear.points;
-          if (linear.endArrowhead && pts.length >= 2) {
-            const tip = pts[pts.length - 1]!;
-            const prev = pts[pts.length - 2]!;
-            const arrowEl = createArrowheadSvg(prev, tip, linear.endArrowhead, element.strokeColor, element.strokeWidth);
-            if (arrowEl) g.appendChild(arrowEl);
-          }
-          if (linear.startArrowhead && pts.length >= 2) {
-            const tip = pts[0]!;
-            const prev = pts[1]!;
-            const arrowEl = createArrowheadSvg(prev, tip, linear.startArrowhead, element.strokeColor, element.strokeWidth);
-            if (arrowEl) g.appendChild(arrowEl);
-          }
-        }
-      }
-      break;
-    }
-    case 'freedraw': {
-      const fd = element as DrawFreeDrawElement;
-      if (fd.points && fd.points.length >= 2) {
-        const outlinePoints = getFreeDrawOutlinePoints(fd);
-        const d = getSvgPathFromStroke(outlinePoints);
-        if (d) {
-          const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-          path.setAttribute('d', d);
-          path.setAttribute('fill', element.strokeColor);
-          path.setAttribute('stroke', 'none');
-          g.appendChild(path);
-        }
-      }
-      break;
-    }
-    case 'image': {
-      const imgEl = element as DrawImageElement;
-      if (imgEl.fileId && files?.[imgEl.fileId]) {
-        const fileData = files[imgEl.fileId]!;
-        const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
-        image.setAttribute('width', String(element.width));
-        image.setAttribute('height', String(element.height));
-        image.setAttributeNS('http://www.w3.org/1999/xlink', 'href', fileData.dataURL);
-        g.appendChild(image);
-      }
-      break;
-    }
-    case 'frame': {
-      const frameEl = element as DrawFrameElement;
-      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
-      rect.setAttribute('width', String(element.width));
-      rect.setAttribute('height', String(element.height));
-      rect.setAttribute('fill', 'none');
-      rect.setAttribute('stroke', SELECTION_BORDER_COLOR);
-      rect.setAttribute('stroke-width', '2');
-      rect.setAttribute('stroke-dasharray', '8 4');
-      g.appendChild(rect);
-
-      if (frameEl.name) {
-        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
-        text.setAttribute('x', '0');
-        text.setAttribute('y', '-4');
-        text.setAttribute('font-size', '12');
-        text.setAttribute('font-family', 'sans-serif');
-        text.setAttribute('fill', SELECTION_BORDER_COLOR);
-        text.setAttribute('text-anchor', 'start');
-        text.textContent = frameEl.name;
-        g.appendChild(text);
-      }
-      break;
-    }
-    default:
-      return null;
-  }
-
-  return g;
-}
-
-function createLinearSvgElement(
-  linear: DrawLinearElement,
-  element: DrawElement,
-): SVGElement {
-  const pts = linear.points as [number, number][];
-
-  if (element.roundness && pts.length > 2) {
-    const path = document.createElementNS(SVG_NS, 'path');
-    const d = catmullRomToSvgPath(pts);
-    path.setAttribute('d', d);
-    path.setAttribute('fill', 'none');
-    path.setAttribute('stroke', element.strokeColor);
-    path.setAttribute('stroke-width', String(element.strokeWidth));
-    path.setAttribute('stroke-linecap', 'round');
-    path.setAttribute('stroke-linejoin', 'round');
-    applyStrokeDash(path, element);
-    return path;
-  }
-
-  const polyline = document.createElementNS(SVG_NS, 'polyline');
-  const pointsStr = pts.map((p) => `${p[0]},${p[1]}`).join(' ');
-  polyline.setAttribute('points', pointsStr);
-  polyline.setAttribute('fill', 'none');
-  polyline.setAttribute('stroke', element.strokeColor);
-  polyline.setAttribute('stroke-width', String(element.strokeWidth));
-  applyStrokeDash(polyline, element);
-  return polyline;
-}
-
-function catmullRomToSvgPath(points: [number, number][]): string {
-  if (points.length < 2) return '';
-  if (points.length === 2) {
-    return `M ${points[0]![0]},${points[0]![1]} L ${points[1]![0]},${points[1]![1]}`;
-  }
-
-  const parts: string[] = [`M ${points[0]![0]},${points[0]![1]}`];
-  for (let i = 0; i < points.length - 1; i++) {
-    const p0 = points[Math.max(0, i - 1)]!;
-    const p1 = points[i]!;
-    const p2 = points[i + 1]!;
-    const p3 = points[Math.min(points.length - 1, i + 2)]!;
-
-    const cp1x = p1[0] + (p2[0] - p0[0]) / 6;
-    const cp1y = p1[1] + (p2[1] - p0[1]) / 6;
-    const cp2x = p2[0] - (p3[0] - p1[0]) / 6;
-    const cp2y = p2[1] - (p3[1] - p1[1]) / 6;
-
-    parts.push(`C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2[0]},${p2[1]}`);
-  }
-  return parts.join(' ');
-}
-
-function createArrowheadSvg(
-  from: [number, number],
-  to: [number, number],
-  type: Arrowhead,
-  color: string,
-  strokeWidth: number,
-): SVGElement | null {
-  const angle = Math.atan2(to[1] - from[1], to[0] - from[0]);
-  const size = Math.max(10, strokeWidth * 4);
-
-  const leftAngle = angle + Math.PI + Math.PI / 6;
-  const rightAngle = angle + Math.PI - Math.PI / 6;
-  const lx = to[0] + size * Math.cos(leftAngle);
-  const ly = to[1] + size * Math.sin(leftAngle);
-  const rx = to[0] + size * Math.cos(rightAngle);
-  const ry = to[1] + size * Math.sin(rightAngle);
-
-  switch (type) {
-    case 'arrow': {
-      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-      path.setAttribute('d', `M ${lx},${ly} L ${to[0]},${to[1]} L ${rx},${ry}`);
-      path.setAttribute('fill', 'none');
-      path.setAttribute('stroke', color);
-      path.setAttribute('stroke-width', String(strokeWidth));
-      path.setAttribute('stroke-linejoin', 'round');
-      path.setAttribute('stroke-linecap', 'round');
-      return path;
-    }
-    case 'triangle': {
-      const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-      polygon.setAttribute('points', `${to[0]},${to[1]} ${lx},${ly} ${rx},${ry}`);
-      polygon.setAttribute('fill', color);
-      polygon.setAttribute('stroke', 'none');
-      return polygon;
-    }
-    case 'circle': {
-      const r = size / 2;
-      const cx = to[0] + (r * Math.cos(angle + Math.PI));
-      const cy = to[1] + (r * Math.sin(angle + Math.PI));
-      const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-      circle.setAttribute('cx', String(cx));
-      circle.setAttribute('cy', String(cy));
-      circle.setAttribute('r', String(r));
-      circle.setAttribute('fill', color);
-      circle.setAttribute('stroke', 'none');
-      return circle;
-    }
-    case 'diamond': {
-      const half = size / 2;
-      const backX = to[0] + size * Math.cos(angle + Math.PI);
-      const backY = to[1] + size * Math.sin(angle + Math.PI);
-      const midX = (to[0] + backX) / 2;
-      const midY = (to[1] + backY) / 2;
-      const perpX = half * Math.cos(angle + Math.PI / 2);
-      const perpY = half * Math.sin(angle + Math.PI / 2);
-      const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
-      polygon.setAttribute('points', `${to[0]},${to[1]} ${midX + perpX},${midY + perpY} ${backX},${backY} ${midX - perpX},${midY - perpY}`);
-      polygon.setAttribute('fill', color);
-      polygon.setAttribute('stroke', 'none');
-      return polygon;
-    }
-    case 'bar': {
-      const perpX = (size / 2) * Math.cos(angle + Math.PI / 2);
-      const perpY = (size / 2) * Math.sin(angle + Math.PI / 2);
-      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
-      line.setAttribute('x1', String(to[0] + perpX));
-      line.setAttribute('y1', String(to[1] + perpY));
-      line.setAttribute('x2', String(to[0] - perpX));
-      line.setAttribute('y2', String(to[1] - perpY));
-      line.setAttribute('stroke', color);
-      line.setAttribute('stroke-width', String(strokeWidth));
-      line.setAttribute('stroke-linecap', 'round');
-      return line;
-    }
-    default:
-      return null;
-  }
-}
-
-function applyStrokeDash(svgEl: SVGElement, element: DrawElement): void {
-  if (element.strokeStyle === 'dashed') {
-    svgEl.setAttribute('stroke-dasharray', '12 8');
-  } else if (element.strokeStyle === 'dotted') {
-    svgEl.setAttribute('stroke-dasharray', '3 6');
-  }
-}
-
-function applyStrokeAndFill(svgEl: SVGElement, element: DrawElement): void {
-  svgEl.setAttribute('stroke', element.strokeColor);
-  svgEl.setAttribute('stroke-width', String(element.strokeWidth));
-  svgEl.setAttribute(
-    'fill',
-    element.backgroundColor !== 'transparent' ? element.backgroundColor : 'none',
-  );
-  applyStrokeDash(svgEl, element);
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/data/json.ts b/web/apps/web-ele/src/components/zq-draw/data/json.ts
deleted file mode 100644
index b750042..0000000
--- a/web/apps/web-ele/src/components/zq-draw/data/json.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { DrawElement, AppState, BinaryFiles, DrawData } from '../types';
-import { DRAW_VERSION, DRAW_SOURCE } from '../constants';
-
-export function serializeAsJSON(
-  elements: readonly DrawElement[],
-  appState: Partial<AppState>,
-  files: BinaryFiles,
-): string {
-  const data: DrawData = {
-    type: 'zq-draw',
-    version: DRAW_VERSION,
-    source: DRAW_SOURCE,
-    elements: elements.filter((el) => !el.isDeleted),
-    appState: {
-      viewBackgroundColor: appState.viewBackgroundColor,
-      gridModeEnabled: appState.gridModeEnabled,
-      gridSize: appState.gridSize,
-      theme: appState.theme,
-      name: appState.name,
-    },
-    files,
-  };
-  return JSON.stringify(data, null, 2);
-}
-
-export function deserializeFromJSON(json: string): DrawData | null {
-  try {
-    const data = JSON.parse(json);
-    if (data.type !== 'zq-draw') {
-      console.warn('Unknown draw data type:', data.type);
-    }
-    return data as DrawData;
-  } catch {
-    console.error('Failed to parse draw JSON');
-    return null;
-  }
-}
-
-export function toDrawData(
-  elements: readonly DrawElement[],
-  appState: Partial<AppState>,
-  files: BinaryFiles,
-): DrawData {
-  return {
-    type: 'zq-draw',
-    version: DRAW_VERSION,
-    source: DRAW_SOURCE,
-    elements: elements.filter((el) => !el.isDeleted),
-    appState: {
-      viewBackgroundColor: appState.viewBackgroundColor,
-      gridModeEnabled: appState.gridModeEnabled,
-      gridSize: appState.gridSize,
-      theme: appState.theme,
-      name: appState.name,
-    },
-    files,
-  };
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/align.ts b/web/apps/web-ele/src/components/zq-draw/elements/align.ts
deleted file mode 100644
index 59ca243..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/align.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import type { Scene } from '../core/scene';
-import type { DrawElement } from '../types';
-import type { Bounds } from '../math/types';
-import { getElementBounds, getCommonBounds } from './bounds';
-import { getMaximumGroups } from './group';
-
-export interface Alignment {
-  position: 'start' | 'center' | 'end';
-  axis: 'x' | 'y';
-}
-
-export interface Distribution {
-  space: 'between';
-  axis: 'x' | 'y';
-}
-
-function getGroupBounds(group: readonly DrawElement[]): Bounds {
-  return getCommonBounds(group);
-}
-
-export function alignElements(
-  selectedElements: readonly DrawElement[],
-  alignment: Alignment,
-  scene: Scene,
-): void {
-  if (selectedElements.length < 2) return;
-
-  const groups = getMaximumGroups(selectedElements);
-  if (groups.length < 2) return;
-
-  const allBounds = getCommonBounds(selectedElements);
-  const { axis, position } = alignment;
-
-  for (const group of groups) {
-    const groupBounds = getGroupBounds(group);
-    const translation = calculateTranslation(groupBounds, allBounds, axis, position);
-    if (translation === 0) continue;
-
-    for (const el of group) {
-      if (axis === 'x') {
-        scene.mutateElement(el.id, { x: el.x + translation } as Partial<DrawElement>);
-      } else {
-        scene.mutateElement(el.id, { y: el.y + translation } as Partial<DrawElement>);
-      }
-    }
-  }
-}
-
-function calculateTranslation(
-  groupBounds: Bounds,
-  allBounds: Bounds,
-  axis: 'x' | 'y',
-  position: 'start' | 'center' | 'end',
-): number {
-  const idx = axis === 'x' ? 0 : 1;
-  const endIdx = axis === 'x' ? 2 : 3;
-
-  const groupStart = groupBounds[idx];
-  const groupEnd = groupBounds[endIdx];
-  const groupCenter = (groupStart + groupEnd) / 2;
-
-  const allStart = allBounds[idx];
-  const allEnd = allBounds[endIdx];
-  const allCenter = (allStart + allEnd) / 2;
-
-  switch (position) {
-    case 'start':
-      return allStart - groupStart;
-    case 'center':
-      return allCenter - groupCenter;
-    case 'end':
-      return allEnd - groupEnd;
-  }
-}
-
-export function distributeElements(
-  selectedElements: readonly DrawElement[],
-  distribution: Distribution,
-  scene: Scene,
-): void {
-  if (selectedElements.length < 3) return;
-
-  const groups = getMaximumGroups(selectedElements);
-  if (groups.length < 3) return;
-
-  const { axis } = distribution;
-  const idx = axis === 'x' ? 0 : 1;
-  const endIdx = axis === 'x' ? 2 : 3;
-
-  const groupsWithBounds = groups.map((group) => ({
-    group,
-    bounds: getGroupBounds(group),
-  }));
-
-  groupsWithBounds.sort((a, b) => {
-    const aCenter = (a.bounds[idx] + a.bounds[endIdx]) / 2;
-    const bCenter = (b.bounds[idx] + b.bounds[endIdx]) / 2;
-    return aCenter - bCenter;
-  });
-
-  const allBounds = getCommonBounds(selectedElements);
-  const totalSpan = allBounds[endIdx] - allBounds[idx];
-  const totalGroupSize = groupsWithBounds.reduce(
-    (sum, { bounds }) => sum + (bounds[endIdx] - bounds[idx]),
-    0,
-  );
-  const gap = (totalSpan - totalGroupSize) / (groupsWithBounds.length - 1);
-
-  let currentPos = allBounds[idx];
-
-  for (const { group, bounds } of groupsWithBounds) {
-    const groupSize = bounds[endIdx] - bounds[idx];
-    const offset = currentPos - bounds[idx];
-
-    if (Math.abs(offset) > 0.5) {
-      for (const el of group) {
-        if (axis === 'x') {
-          scene.mutateElement(el.id, { x: el.x + offset } as Partial<DrawElement>);
-        } else {
-          scene.mutateElement(el.id, { y: el.y + offset } as Partial<DrawElement>);
-        }
-      }
-    }
-
-    currentPos += groupSize + gap;
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/binding.ts b/web/apps/web-ele/src/components/zq-draw/elements/binding.ts
deleted file mode 100644
index a4df6e3..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/binding.ts
+++ /dev/null
@@ -1,425 +0,0 @@
-import type { Scene } from '../core/scene';
-import type {
-  DrawElement,
-  DrawArrowElement,
-  DrawLinearElement,
-  BoundElement,
-  FixedPointBinding,
-  GlobalPoint,
-  NonDeletedDrawElement,
-} from '../types';
-import { getElementBounds } from './bounds';
-import { pointDistance, pointRotate } from '../math/point';
-import type { Point } from '../math/types';
-import { handleBoundTextResize } from './bound-text';
-
-const BINDING_THRESHOLD = 15;
-const SNAP_DISTANCE = 15;
-
-const BINDABLE_TYPES = new Set([
-  'rectangle',
-  'ellipse',
-  'diamond',
-  'frame',
-  'image',
-  'embeddable',
-]);
-
-export function isBindableElement(element: DrawElement): boolean {
-  return BINDABLE_TYPES.has(element.type);
-}
-
-export function isLinearElement(element: DrawElement): element is DrawLinearElement {
-  return element.type === 'line' || element.type === 'arrow';
-}
-
-export function isArrowElement(element: DrawElement): element is DrawArrowElement {
-  return element.type === 'arrow';
-}
-
-/**
- * Find the closest bindable element near a point, preferring smaller shapes.
- */
-export function getHoveredElementForBinding(
-  point: GlobalPoint,
-  elements: readonly NonDeletedDrawElement[],
-  zoom: number = 1,
-): NonDeletedDrawElement | null {
-  const threshold = BINDING_THRESHOLD / zoom;
-  const candidates: NonDeletedDrawElement[] = [];
-
-  for (let i = elements.length - 1; i >= 0; i--) {
-    const el = elements[i]!;
-    if (!isBindableElement(el) || el.locked) continue;
-    if (isPointNearElement(point, el, threshold)) {
-      candidates.push(el);
-    }
-  }
-
-  if (candidates.length === 0) return null;
-  if (candidates.length === 1) return candidates[0]!;
-
-  return candidates.sort(
-    (a, b) => b.width ** 2 + b.height ** 2 - (a.width ** 2 + a.height ** 2),
-  ).pop()!;
-}
-
-function isPointNearElement(
-  point: GlobalPoint,
-  element: DrawElement,
-  threshold: number,
-): boolean {
-  const [x1, y1, x2, y2] = getElementBounds(element);
-  return (
-    point[0] >= x1 - threshold &&
-    point[0] <= x2 + threshold &&
-    point[1] >= y1 - threshold &&
-    point[1] <= y2 + threshold
-  );
-}
-
-/**
- * Calculate the fixed point ratio (0-1 range) for a point on an element.
- */
-export function calculateFixedPoint(
-  point: GlobalPoint,
-  element: DrawElement,
-): [number, number] {
-  const { x, y, width, height, angle } = element;
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-
-  const localPoint = angle !== 0
-    ? pointRotate([point[0], point[1]] as Point, -angle, [cx, cy])
-    : [point[0], point[1]];
-
-  const ratioX = width === 0 ? 0.5 : Math.max(0, Math.min(1, (localPoint[0] - x) / width));
-  const ratioY = height === 0 ? 0.5 : Math.max(0, Math.min(1, (localPoint[1] - y) / height));
-
-  return [ratioX, ratioY];
-}
-
-/**
- * Convert a fixed point ratio back to a global coordinate.
- */
-export function getGlobalFixedPoint(
-  fixedPoint: [number, number],
-  element: DrawElement,
-): GlobalPoint {
-  const { x, y, width, height, angle } = element;
-  const localX = x + fixedPoint[0] * width;
-  const localY = y + fixedPoint[1] * height;
-
-  if (angle === 0) {
-    return [localX, localY] as GlobalPoint;
-  }
-
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-  const rotated = pointRotate([localX, localY] as Point, angle, [cx, cy]);
-  return rotated as unknown as GlobalPoint;
-}
-
-/**
- * Find the intersection point of a line from element center to a target point
- * with the element's outline.
- */
-export function intersectElementOutline(
-  element: DrawElement,
-  targetPoint: GlobalPoint,
-): GlobalPoint {
-  const { x, y, width, height, angle } = element;
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-
-  const localTarget = angle !== 0
-    ? pointRotate([targetPoint[0], targetPoint[1]] as Point, -angle, [cx, cy])
-    : [targetPoint[0], targetPoint[1]];
-
-  let intersectX: number;
-  let intersectY: number;
-
-  if (element.type === 'ellipse') {
-    const rx = width / 2;
-    const ry = height / 2;
-    const dx = localTarget[0] - cx;
-    const dy = localTarget[1] - cy;
-    const dist = Math.sqrt(dx * dx + dy * dy);
-    if (dist === 0) {
-      intersectX = cx + rx;
-      intersectY = cy;
-    } else {
-      const ndx = dx / dist;
-      const ndy = dy / dist;
-      const t = 1 / Math.sqrt((ndx / rx) ** 2 + (ndy / ry) ** 2);
-      intersectX = cx + ndx * t;
-      intersectY = cy + ndy * t;
-    }
-  } else if (element.type === 'diamond') {
-    const dx = localTarget[0] - cx;
-    const dy = localTarget[1] - cy;
-    const hw = width / 2;
-    const hh = height / 2;
-    const absDx = Math.abs(dx);
-    const absDy = Math.abs(dy);
-    if (absDx === 0 && absDy === 0) {
-      intersectX = cx;
-      intersectY = cy - hh;
-    } else {
-      const t = 1 / (absDx / hw + absDy / hh);
-      intersectX = cx + dx * t;
-      intersectY = cy + dy * t;
-    }
-  } else {
-    const dx = localTarget[0] - cx;
-    const dy = localTarget[1] - cy;
-    const hw = width / 2;
-    const hh = height / 2;
-
-    if (dx === 0 && dy === 0) {
-      intersectX = cx + hw;
-      intersectY = cy;
-    } else {
-      const scaleX = hw / Math.abs(dx || 1);
-      const scaleY = hh / Math.abs(dy || 1);
-      const scale = Math.min(scaleX, scaleY);
-      intersectX = cx + dx * scale;
-      intersectY = cy + dy * scale;
-    }
-  }
-
-  if (angle !== 0) {
-    const rotated = pointRotate(
-      [intersectX, intersectY] as Point,
-      angle,
-      [cx, cy],
-    );
-    return rotated as unknown as GlobalPoint;
-  }
-
-  return [intersectX, intersectY] as GlobalPoint;
-}
-
-/**
- * Bind an arrow endpoint to a target element.
- */
-export function bindArrowToElement(
-  arrow: DrawArrowElement,
-  endpoint: 'start' | 'end',
-  target: DrawElement,
-  scene: Scene,
-): void {
-  const pointIndex = endpoint === 'start' ? 0 : arrow.points.length - 1;
-  const point = arrow.points[pointIndex]!;
-  const globalPoint: GlobalPoint = [
-    arrow.x + point[0],
-    arrow.y + point[1],
-  ] as GlobalPoint;
-
-  const fixedPoint = calculateFixedPoint(globalPoint, target);
-  const binding: FixedPointBinding = {
-    elementId: target.id,
-    fixedPoint,
-  };
-
-  const bindingKey = endpoint === 'start' ? 'startBinding' : 'endBinding';
-  scene.mutateElement(arrow.id, {
-    [bindingKey]: binding,
-  } as Partial<DrawElement>);
-
-  const existingBound = target.boundElements || [];
-  if (!existingBound.some((b) => b.id === arrow.id)) {
-    const newBound: BoundElement[] = [
-      ...existingBound,
-      { id: arrow.id, type: 'arrow' },
-    ];
-    scene.mutateElement(target.id, {
-      boundElements: newBound,
-    } as Partial<DrawElement>);
-  }
-}
-
-/**
- * Unbind an arrow endpoint from its bound element.
- */
-export function unbindArrowFromElement(
-  arrow: DrawArrowElement,
-  endpoint: 'start' | 'end',
-  scene: Scene,
-): void {
-  const bindingKey = endpoint === 'start' ? 'startBinding' : 'endBinding';
-  const binding = arrow[bindingKey];
-  if (!binding) return;
-
-  scene.mutateElement(arrow.id, {
-    [bindingKey]: null,
-  } as Partial<DrawElement>);
-
-  const target = scene.getElement(binding.elementId);
-  if (target && target.boundElements) {
-    const newBound = target.boundElements.filter((b) => b.id !== arrow.id);
-    scene.mutateElement(target.id, {
-      boundElements: newBound.length > 0 ? newBound : null,
-    } as Partial<DrawElement>);
-  }
-}
-
-/**
- * After a bindable element is moved/resized, update all arrows bound to it.
- */
-export function updateBoundElements(
-  element: DrawElement,
-  scene: Scene,
-): void {
-  if (!element.boundElements) return;
-
-  for (const bound of element.boundElements) {
-    if (bound.type !== 'arrow') continue;
-
-    const arrow = scene.getElement(bound.id) as DrawArrowElement | undefined;
-    if (!arrow || arrow.isDeleted) continue;
-
-    updateArrowBinding(arrow, element, scene);
-
-    const updatedArrow = scene.getElement(bound.id);
-    if (updatedArrow) {
-      handleBoundTextResize(updatedArrow, scene);
-    }
-  }
-}
-
-function updateArrowBinding(
-  arrow: DrawArrowElement,
-  boundElement: DrawElement,
-  scene: Scene,
-): void {
-  const updates: Partial<DrawLinearElement> = {};
-  let changed = false;
-
-  if (arrow.startBinding?.elementId === boundElement.id) {
-    const outlinePoint = intersectElementOutline(boundElement, getArrowOtherEnd(arrow, 'start'));
-    const newLocal = [outlinePoint[0] - arrow.x, outlinePoint[1] - arrow.y] as unknown;
-    const newPoints = [...arrow.points];
-    newPoints[0] = newLocal as any;
-    updates.points = newPoints;
-    changed = true;
-  }
-
-  if (arrow.endBinding?.elementId === boundElement.id) {
-    const lastIdx = arrow.points.length - 1;
-    const outlinePoint = intersectElementOutline(boundElement, getArrowOtherEnd(arrow, 'end'));
-    const newLocal = [outlinePoint[0] - arrow.x, outlinePoint[1] - arrow.y] as unknown;
-    const newPoints = updates.points ? [...updates.points] : [...arrow.points];
-    newPoints[lastIdx] = newLocal as any;
-    updates.points = newPoints;
-    changed = true;
-  }
-
-  if (changed) {
-    scene.mutateElement(arrow.id, updates as Partial<DrawElement>);
-  }
-}
-
-function getArrowOtherEnd(
-  arrow: DrawArrowElement,
-  currentEndpoint: 'start' | 'end',
-): GlobalPoint {
-  if (currentEndpoint === 'start') {
-    const lastPoint = arrow.points[arrow.points.length - 1]!;
-    return [arrow.x + lastPoint[0], arrow.y + lastPoint[1]] as GlobalPoint;
-  }
-  const firstPoint = arrow.points[0]!;
-  return [arrow.x + firstPoint[0], arrow.y + firstPoint[1]] as GlobalPoint;
-}
-
-/**
- * Get the four edge midpoints of a bindable element, accounting for rotation.
- */
-export function getElementSnapPoints(element: DrawElement): GlobalPoint[] {
-  const { x, y, width, height, angle } = element;
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-
-  let midpoints: Point[];
-  if (element.type === 'diamond') {
-    midpoints = [
-      [cx, y],           // top vertex
-      [x + width, cy],   // right vertex
-      [cx, y + height],  // bottom vertex
-      [x, cy],           // left vertex
-    ];
-  } else if (element.type === 'ellipse') {
-    midpoints = [
-      [cx, y],           // top
-      [x + width, cy],   // right
-      [cx, y + height],  // bottom
-      [x, cy],           // left
-    ];
-  } else {
-    midpoints = [
-      [cx, y],           // top
-      [x + width, cy],   // right
-      [cx, y + height],  // bottom
-      [x, cy],           // left
-    ];
-  }
-
-  if (angle === 0) {
-    return midpoints as unknown as GlobalPoint[];
-  }
-
-  return midpoints.map(
-    (p) => pointRotate(p, angle, [cx, cy]) as unknown as GlobalPoint,
-  );
-}
-
-/**
- * Find the closest snap midpoint on an element near a given point.
- */
-export function getSnapMidpointNear(
-  point: GlobalPoint,
-  element: DrawElement,
-  zoom: number,
-): GlobalPoint | null {
-  const threshold = SNAP_DISTANCE / zoom;
-  const midpoints = getElementSnapPoints(element);
-  let closest: GlobalPoint | null = null;
-  let minDist = Infinity;
-
-  for (const mp of midpoints) {
-    const d = pointDistance(
-      [point[0], point[1]] as Point,
-      [mp[0], mp[1]] as Point,
-    );
-    if (d <= threshold && d < minDist) {
-      minDist = d;
-      closest = mp;
-    }
-  }
-
-  return closest;
-}
-
-/**
- * Unbind all arrows from an element (used before deletion).
- */
-export function unbindAllBoundElements(
-  element: DrawElement,
-  scene: Scene,
-): void {
-  if (!element.boundElements) return;
-
-  for (const bound of element.boundElements) {
-    const boundEl = scene.getElement(bound.id);
-    if (!boundEl || boundEl.isDeleted) continue;
-
-    if (bound.type === 'arrow' && isArrowElement(boundEl)) {
-      if (boundEl.startBinding?.elementId === element.id) {
-        scene.mutateElement(boundEl.id, { startBinding: null } as Partial<DrawElement>);
-      }
-      if (boundEl.endBinding?.elementId === element.id) {
-        scene.mutateElement(boundEl.id, { endBinding: null } as Partial<DrawElement>);
-      }
-    }
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/bound-text.ts b/web/apps/web-ele/src/components/zq-draw/elements/bound-text.ts
deleted file mode 100644
index a84704a..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/bound-text.ts
+++ /dev/null
@@ -1,506 +0,0 @@
-import type { Scene } from '../core/scene';
-import type {
-  DrawElement,
-  DrawTextElement,
-  DrawLinearElement,
-  BoundElement,
-  TextAlign,
-  VerticalAlign,
-} from '../types';
-import { FONT_FAMILY_FALLBACKS, DEFAULT_LINE_HEIGHT, DEFAULT_FONT_SIZE } from '../constants';
-
-export const BOUND_TEXT_PADDING = 5;
-const ARROW_LABEL_WIDTH_FRACTION = 0.7;
-const ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO = 11;
-
-const VALID_CONTAINER_TYPES = new Set([
-  'rectangle',
-  'ellipse',
-  'diamond',
-  'arrow',
-]);
-
-let _measureCanvas: HTMLCanvasElement | null = null;
-function getMeasureContext(): CanvasRenderingContext2D {
-  if (!_measureCanvas) {
-    _measureCanvas = document.createElement('canvas');
-  }
-  return _measureCanvas.getContext('2d')!;
-}
-
-export function getFontString(fontSize: number, fontFamily: number): string {
-  return `${fontSize}px ${FONT_FAMILY_FALLBACKS[fontFamily] || 'sans-serif'}`;
-}
-
-export function getLineHeightInPx(fontSize: number, lineHeight: number): number {
-  return fontSize * lineHeight;
-}
-
-export function isTextBindableContainer(element: DrawElement): boolean {
-  return VALID_CONTAINER_TYPES.has(element.type);
-}
-
-export function isBoundToContainer(element: DrawElement): boolean {
-  return element.type === 'text' && !!(element as DrawTextElement).containerId;
-}
-
-export function getBoundTextElement(
-  container: DrawElement,
-  scene: Scene,
-): DrawTextElement | null {
-  if (!container.boundElements) return null;
-  const textBound = container.boundElements.find((b) => b.type === 'text');
-  if (!textBound) return null;
-  const el = scene.getElement(textBound.id);
-  if (!el || el.isDeleted || el.type !== 'text') return null;
-  return el as DrawTextElement;
-}
-
-export function getContainerElement(
-  textElement: DrawTextElement,
-  scene: Scene,
-): DrawElement | null {
-  if (!textElement.containerId) return null;
-  const el = scene.getElement(textElement.containerId);
-  if (!el || el.isDeleted) return null;
-  return el;
-}
-
-export function getBoundTextMaxWidth(container: DrawElement): number {
-  const padding = BOUND_TEXT_PADDING * 2;
-  if (container.type === 'ellipse') {
-    return Math.floor(((container.width / 2) * Math.sqrt(2)) * 2 - padding);
-  }
-  if (container.type === 'diamond') {
-    return Math.floor(container.width / 2 - padding);
-  }
-  if (container.type === 'arrow' || container.type === 'line') {
-    const linearWidth = Math.max(container.width, container.height, 1);
-    return Math.max(
-      Math.floor(linearWidth * ARROW_LABEL_WIDTH_FRACTION),
-      DEFAULT_FONT_SIZE * ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO,
-    );
-  }
-  return Math.floor(container.width - padding);
-}
-
-export function getBoundTextMaxHeight(
-  container: DrawElement,
-  textElement?: DrawTextElement,
-): number {
-  const padding = BOUND_TEXT_PADDING * 2;
-  if (container.type === 'ellipse') {
-    return Math.floor(((container.height / 2) * Math.sqrt(2)) * 2 - padding);
-  }
-  if (container.type === 'diamond') {
-    return Math.floor(container.height / 2 - padding);
-  }
-  if (container.type === 'arrow' || container.type === 'line') {
-    return Infinity;
-  }
-  return Math.floor(container.height - padding);
-}
-
-export function computeContainerDimensionForBoundText(
-  dimension: number,
-  containerType: string,
-): number {
-  dimension = Math.ceil(dimension);
-  const padding = BOUND_TEXT_PADDING * 2;
-
-  if (containerType === 'ellipse') {
-    return Math.round(((dimension + padding) / (Math.sqrt(2))) * 2);
-  }
-  if (containerType === 'arrow' || containerType === 'line') {
-    return dimension + padding * 8;
-  }
-  if (containerType === 'diamond') {
-    return 2 * (dimension + padding);
-  }
-  return dimension + padding;
-}
-
-export function getContainerTextCoords(container: DrawElement): { x: number; y: number } {
-  if (container.type === 'ellipse') {
-    const hw = container.width / 2;
-    const hh = container.height / 2;
-    const inscribedHalfW = hw * Math.SQRT1_2;
-    const inscribedHalfH = hh * Math.SQRT1_2;
-    return {
-      x: container.x + hw - inscribedHalfW + BOUND_TEXT_PADDING,
-      y: container.y + hh - inscribedHalfH + BOUND_TEXT_PADDING,
-    };
-  }
-  if (container.type === 'diamond') {
-    const hw = container.width / 4;
-    const hh = container.height / 4;
-    return {
-      x: container.x + container.width / 2 - hw + BOUND_TEXT_PADDING,
-      y: container.y + container.height / 2 - hh + BOUND_TEXT_PADDING,
-    };
-  }
-  return {
-    x: container.x + BOUND_TEXT_PADDING,
-    y: container.y + BOUND_TEXT_PADDING,
-  };
-}
-
-export function getArrowLabelPosition(
-  arrow: DrawLinearElement,
-): { x: number; y: number } {
-  const points = arrow.points;
-  if (!points || points.length < 2) {
-    return { x: arrow.x, y: arrow.y };
-  }
-
-  if (points.length % 2 === 1) {
-    const midIdx = Math.floor(points.length / 2);
-    const pt = points[midIdx]!;
-    return {
-      x: arrow.x + pt[0],
-      y: arrow.y + pt[1],
-    };
-  }
-
-  const midIdx = Math.floor(points.length / 2) - 1;
-  const p1 = points[midIdx]!;
-  const p2 = points[midIdx + 1]!;
-  return {
-    x: arrow.x + (p1[0] + p2[0]) / 2,
-    y: arrow.y + (p1[1] + p2[1]) / 2,
-  };
-}
-
-export function computeBoundTextPosition(
-  container: DrawElement,
-  textElement: DrawTextElement,
-  scene?: Scene,
-): { x: number; y: number } {
-  if (container.type === 'arrow' || container.type === 'line') {
-    const arrow = container as DrawLinearElement;
-    const center = getArrowLabelPosition(arrow);
-    return {
-      x: center.x - textElement.width / 2,
-      y: center.y - textElement.height / 2,
-    };
-  }
-
-  const maxWidth = getBoundTextMaxWidth(container);
-  const maxHeight = getBoundTextMaxHeight(container, textElement);
-
-  const textWidth = textElement.width;
-  const textHeight = textElement.height;
-
-  let offsetX: number;
-  switch (textElement.textAlign as TextAlign) {
-    case 'center':
-      offsetX = (maxWidth - textWidth) / 2;
-      break;
-    case 'right':
-      offsetX = maxWidth - textWidth;
-      break;
-    default:
-      offsetX = 0;
-  }
-
-  let offsetY: number;
-  switch (textElement.verticalAlign as VerticalAlign) {
-    case 'middle':
-      offsetY = (maxHeight - textHeight) / 2;
-      break;
-    case 'bottom':
-      offsetY = maxHeight - textHeight;
-      break;
-    default:
-      offsetY = 0;
-  }
-
-  if (container.type === 'ellipse' || container.type === 'diamond') {
-    const cx = container.x + container.width / 2;
-    const cy = container.y + container.height / 2;
-    const areaX = cx - maxWidth / 2;
-    const areaY = cy - getBoundTextMaxHeight(container, textElement) / 2;
-    return {
-      x: areaX + offsetX,
-      y: areaY + offsetY,
-    };
-  }
-
-  const coords = getContainerTextCoords(container);
-  return {
-    x: coords.x + offsetX,
-    y: coords.y + offsetY,
-  };
-}
-
-export function measureText(
-  text: string,
-  fontSize: number,
-  fontFamily: number,
-  lineHeight: number,
-  maxWidth?: number,
-): { width: number; height: number; wrappedText: string } {
-  const ctx = getMeasureContext();
-  const fontString = getFontString(fontSize, fontFamily);
-  ctx.font = fontString;
-
-  const lineHeightPx = getLineHeightInPx(fontSize, lineHeight);
-  const inputText = text || ' ';
-
-  let lines: string[];
-  let wrappedText: string;
-
-  if (maxWidth && maxWidth > 0 && isFinite(maxWidth)) {
-    lines = wrapText(inputText, ctx, maxWidth);
-    wrappedText = lines.join('\n');
-  } else {
-    lines = inputText.split('\n');
-    wrappedText = inputText;
-  }
-
-  let width = 0;
-  for (const line of lines) {
-    const metrics = ctx.measureText(line || ' ');
-    width = Math.max(width, metrics.width);
-  }
-
-  const height = lines.length * lineHeightPx;
-  return {
-    width: Math.ceil(width),
-    height: Math.ceil(height),
-    wrappedText,
-  };
-}
-
-export function getTextWidth(
-  text: string,
-  fontSize: number,
-  fontFamily: number,
-): number {
-  const ctx = getMeasureContext();
-  ctx.font = getFontString(fontSize, fontFamily);
-  const lines = text.split('\n');
-  let maxW = 0;
-  for (const line of lines) {
-    maxW = Math.max(maxW, ctx.measureText(line || ' ').width);
-  }
-  return Math.ceil(maxW);
-}
-
-export function wrapText(
-  text: string,
-  ctx: CanvasRenderingContext2D,
-  maxWidth: number,
-): string[] {
-  const paragraphs = text.split('\n');
-  const lines: string[] = [];
-
-  for (const paragraph of paragraphs) {
-    if (paragraph === '') {
-      lines.push('');
-      continue;
-    }
-
-    const chars = [...paragraph];
-    let currentLine = '';
-
-    for (let i = 0; i < chars.length; i++) {
-      const char = chars[i]!;
-      const testLine = currentLine + char;
-      const metrics = ctx.measureText(testLine);
-
-      if (metrics.width > maxWidth && currentLine.length > 0) {
-        const lastSpaceIdx = currentLine.lastIndexOf(' ');
-        if (lastSpaceIdx > 0) {
-          lines.push(currentLine.slice(0, lastSpaceIdx));
-          currentLine = currentLine.slice(lastSpaceIdx + 1) + char;
-        } else {
-          lines.push(currentLine);
-          currentLine = char;
-        }
-      } else {
-        currentLine = testLine;
-      }
-    }
-
-    if (currentLine) {
-      lines.push(currentLine);
-    }
-  }
-
-  return lines.length > 0 ? lines : [''];
-}
-
-export function wrapTextToString(
-  text: string,
-  fontSize: number,
-  fontFamily: number,
-  maxWidth: number,
-): string {
-  const ctx = getMeasureContext();
-  ctx.font = getFontString(fontSize, fontFamily);
-  return wrapText(text, ctx, maxWidth).join('\n');
-}
-
-export function redrawTextBoundingBox(
-  textElement: DrawTextElement,
-  container: DrawElement | null,
-  scene: Scene,
-): void {
-  const lineHeight = textElement.lineHeight || DEFAULT_LINE_HEIGHT;
-
-  if (container) {
-    const isArrow = container.type === 'arrow' || container.type === 'line';
-    const maxWidth = getBoundTextMaxWidth(container);
-
-    const metrics = measureText(
-      textElement.originalText,
-      textElement.fontSize,
-      textElement.fontFamily,
-      lineHeight,
-      isArrow ? undefined : maxWidth,
-    );
-
-    const wrappedText = metrics.wrappedText;
-    const textWidth = metrics.width;
-    const textHeight = metrics.height;
-
-    if (!isArrow) {
-      const maxHeight = getBoundTextMaxHeight(container, textElement);
-      if (textHeight > maxHeight) {
-        const nextHeight = computeContainerDimensionForBoundText(
-          textHeight,
-          container.type,
-        );
-        scene.mutateElement(container.id, { height: nextHeight } as Partial<DrawElement>);
-      }
-      if (textWidth > maxWidth) {
-        const nextWidth = computeContainerDimensionForBoundText(
-          textWidth,
-          container.type,
-        );
-        scene.mutateElement(container.id, { width: nextWidth } as Partial<DrawElement>);
-      }
-    }
-
-    const updatedContainer = scene.getElement(container.id) || container;
-    const pos = computeBoundTextPosition(updatedContainer, {
-      ...textElement,
-      text: wrappedText,
-      width: textWidth,
-      height: textHeight,
-    } as DrawTextElement, scene);
-
-    scene.mutateElement(textElement.id, {
-      text: wrappedText,
-      x: pos.x,
-      y: pos.y,
-      width: textWidth,
-      height: textHeight,
-      angle: isArrow ? 0 : container.angle,
-    } as Partial<DrawElement>);
-  } else {
-    const metrics = measureText(
-      textElement.originalText,
-      textElement.fontSize,
-      textElement.fontFamily,
-      lineHeight,
-      textElement.autoResize ? undefined : textElement.width,
-    );
-
-    const updates: Partial<DrawTextElement> = {
-      text: metrics.wrappedText,
-      height: metrics.height,
-    };
-
-    if (textElement.autoResize) {
-      const widthDiff = metrics.width - textElement.width;
-      const heightDiff = metrics.height - textElement.height;
-
-      updates.width = metrics.width;
-
-      if (textElement.textAlign === 'center') {
-        updates.x = textElement.x - widthDiff / 2;
-      } else if (textElement.textAlign === 'right') {
-        updates.x = textElement.x - widthDiff;
-      }
-
-      if (textElement.verticalAlign === 'middle') {
-        updates.y = textElement.y - heightDiff / 2;
-      }
-    }
-
-    scene.mutateElement(textElement.id, updates as Partial<DrawElement>);
-  }
-}
-
-export function bindTextToContainer(
-  textElement: DrawTextElement,
-  container: DrawElement,
-  scene: Scene,
-): void {
-  const isArrow = container.type === 'arrow' || container.type === 'line';
-
-  scene.mutateElement(textElement.id, {
-    containerId: container.id,
-    textAlign: 'center',
-    verticalAlign: 'middle',
-    angle: isArrow ? 0 : container.angle,
-  } as Partial<DrawElement>);
-
-  const existingBound = container.boundElements || [];
-  if (!existingBound.some((b) => b.id === textElement.id)) {
-    const newBound: BoundElement[] = [
-      ...existingBound,
-      { id: textElement.id, type: 'text' },
-    ];
-    scene.mutateElement(container.id, {
-      boundElements: newBound,
-    } as Partial<DrawElement>);
-  }
-
-  const updatedContainer = scene.getElement(container.id) || container;
-  const updatedText = scene.getElement(textElement.id) as DrawTextElement;
-  if (updatedText) {
-    redrawTextBoundingBox(updatedText, updatedContainer, scene);
-  }
-}
-
-export function unbindTextFromContainer(
-  textElement: DrawTextElement,
-  scene: Scene,
-): void {
-  if (!textElement.containerId) return;
-
-  const container = scene.getElement(textElement.containerId);
-  if (container && container.boundElements) {
-    const newBound = container.boundElements.filter((b) => b.id !== textElement.id);
-    scene.mutateElement(container.id, {
-      boundElements: newBound.length > 0 ? newBound : null,
-    } as Partial<DrawElement>);
-  }
-
-  const metrics = measureText(
-    textElement.originalText,
-    textElement.fontSize,
-    textElement.fontFamily,
-    textElement.lineHeight || DEFAULT_LINE_HEIGHT,
-  );
-
-  scene.mutateElement(textElement.id, {
-    containerId: null,
-    text: textElement.originalText,
-    width: metrics.width,
-    height: metrics.height,
-    autoResize: true,
-  } as Partial<DrawElement>);
-}
-
-export function handleBoundTextResize(
-  container: DrawElement,
-  scene: Scene,
-): void {
-  const textEl = getBoundTextElement(container, scene);
-  if (!textEl) return;
-  redrawTextBoundingBox(textEl, container, scene);
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/bounds.ts b/web/apps/web-ele/src/components/zq-draw/elements/bounds.ts
deleted file mode 100644
index 386d874..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/bounds.ts
+++ /dev/null
@@ -1,157 +0,0 @@
-import type { DrawElement, DrawLinearElement, DrawFreeDrawElement } from '../types';
-import type { Bounds } from '../math/types';
-import { pointRotate } from '../math/point';
-
-/**
- * Get the axis-aligned bounding box of an element, accounting for rotation.
- */
-export function getElementBounds(element: DrawElement): Bounds {
-  if (isLinearLike(element)) {
-    return getLinearElementBounds(element as DrawLinearElement);
-  }
-  if (element.type === 'freedraw') {
-    return getFreeDrawBounds(element as DrawFreeDrawElement);
-  }
-  return getGenericElementBounds(element);
-}
-
-function getGenericElementBounds(element: DrawElement): Bounds {
-  const { x, y, width, height, angle } = element;
-
-  if (angle === 0) {
-    return [x, y, x + width, y + height];
-  }
-
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-  const corners: [number, number][] = [
-    [x, y],
-    [x + width, y],
-    [x + width, y + height],
-    [x, y + height],
-  ];
-
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-
-  for (const corner of corners) {
-    const rotated = pointRotate(corner, angle, [cx, cy]);
-    minX = Math.min(minX, rotated[0]);
-    minY = Math.min(minY, rotated[1]);
-    maxX = Math.max(maxX, rotated[0]);
-    maxY = Math.max(maxY, rotated[1]);
-  }
-
-  return [minX, minY, maxX, maxY];
-}
-
-/**
- * Returns the unrotated local bounding box of a linear element's points.
- * Does NOT account for element.angle.
- */
-export function getLinearElementLocalBounds(element: DrawLinearElement): Bounds {
-  const { x, y, points } = element;
-  if (points.length === 0) {
-    return [x, y, x, y];
-  }
-
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-
-  for (const point of points) {
-    const px = x + point[0];
-    const py = y + point[1];
-    minX = Math.min(minX, px);
-    minY = Math.min(minY, py);
-    maxX = Math.max(maxX, px);
-    maxY = Math.max(maxY, py);
-  }
-
-  return [minX, minY, maxX, maxY];
-}
-
-function getLinearElementBounds(element: DrawLinearElement): Bounds {
-  const { x, y, points, angle } = element;
-  if (points.length === 0) {
-    return [x, y, x, y];
-  }
-
-  const cx = x + element.width / 2;
-  const cy = y + element.height / 2;
-
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-
-  for (const point of points) {
-    let px = x + point[0];
-    let py = y + point[1];
-    if (angle !== 0) {
-      const rotated = pointRotate([px, py], angle, [cx, cy]);
-      px = rotated[0];
-      py = rotated[1];
-    }
-    minX = Math.min(minX, px);
-    minY = Math.min(minY, py);
-    maxX = Math.max(maxX, px);
-    maxY = Math.max(maxY, py);
-  }
-
-  return [minX, minY, maxX, maxY];
-}
-
-function getFreeDrawBounds(element: DrawFreeDrawElement): Bounds {
-  const { x, y, points } = element;
-  if (points.length === 0) {
-    return [x, y, x, y];
-  }
-
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-
-  for (const point of points) {
-    const px = x + point[0];
-    const py = y + point[1];
-    minX = Math.min(minX, px);
-    minY = Math.min(minY, py);
-    maxX = Math.max(maxX, px);
-    maxY = Math.max(maxY, py);
-  }
-
-  return [minX, minY, maxX, maxY];
-}
-
-export function getCommonBounds(
-  elements: readonly DrawElement[],
-): Bounds {
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-
-  for (const el of elements) {
-    const [x1, y1, x2, y2] = getElementBounds(el);
-    minX = Math.min(minX, x1);
-    minY = Math.min(minY, y1);
-    maxX = Math.max(maxX, x2);
-    maxY = Math.max(maxY, y2);
-  }
-
-  return [minX, minY, maxX, maxY];
-}
-
-export function getElementCenter(element: DrawElement): [number, number] {
-  const [x1, y1, x2, y2] = getElementBounds(element);
-  return [(x1 + x2) / 2, (y1 + y2) / 2];
-}
-
-function isLinearLike(element: DrawElement): boolean {
-  return element.type === 'line' || element.type === 'arrow';
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/collision.ts b/web/apps/web-ele/src/components/zq-draw/elements/collision.ts
deleted file mode 100644
index bc54a9f..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/collision.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-import type { DrawElement, DrawLinearElement, DrawFreeDrawElement, GlobalPoint } from '../types';
-import { getElementBounds } from './bounds';
-import { pointRotate, pointDistance } from '../math/point';
-import type { Point } from '../math/types';
-import { lineClosestPoint } from '../math/line';
-
-const HIT_THRESHOLD = 10;
-
-/**
- * Test if a scene point hits an element.
- */
-export function hitTest(
-  element: DrawElement,
-  scenePoint: GlobalPoint,
-  zoom: number = 1,
-): boolean {
-  const threshold = HIT_THRESHOLD / zoom;
-
-  if (element.type === 'line' || element.type === 'arrow') {
-    return hitTestLinear(element as DrawLinearElement, scenePoint, threshold);
-  }
-
-  if (element.type === 'freedraw') {
-    return hitTestFreeDraw(element as DrawFreeDrawElement, scenePoint, threshold);
-  }
-
-  if (element.type === 'diamond') {
-    return hitTestDiamond(element, scenePoint, threshold);
-  }
-
-  if (element.type === 'ellipse') {
-    return hitTestEllipse(element, scenePoint, threshold);
-  }
-
-  return hitTestGeneric(element, scenePoint, threshold);
-}
-
-function hitTestGeneric(
-  element: DrawElement,
-  scenePoint: GlobalPoint,
-  threshold: number,
-): boolean {
-  const { x, y, width, height, angle } = element;
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-
-  const rotatedPoint = angle !== 0
-    ? pointRotate(scenePoint as unknown as Point, -angle, [cx, cy])
-    : (scenePoint as unknown as Point);
-
-  const px = rotatedPoint[0];
-  const py = rotatedPoint[1];
-
-  if (element.backgroundColor !== 'transparent') {
-    return (
-      px >= x - threshold &&
-      px <= x + width + threshold &&
-      py >= y - threshold &&
-      py <= y + height + threshold
-    );
-  }
-
-  const nearLeft = Math.abs(px - x) <= threshold && py >= y - threshold && py <= y + height + threshold;
-  const nearRight = Math.abs(px - (x + width)) <= threshold && py >= y - threshold && py <= y + height + threshold;
-  const nearTop = Math.abs(py - y) <= threshold && px >= x - threshold && px <= x + width + threshold;
-  const nearBottom = Math.abs(py - (y + height)) <= threshold && px >= x - threshold && px <= x + width + threshold;
-
-  return nearLeft || nearRight || nearTop || nearBottom;
-}
-
-function hitTestDiamond(
-  element: DrawElement,
-  scenePoint: GlobalPoint,
-  threshold: number,
-): boolean {
-  const { x, y, width, height, angle } = element;
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-
-  const rotatedPoint = angle !== 0
-    ? pointRotate(scenePoint as unknown as Point, -angle, [cx, cy])
-    : (scenePoint as unknown as Point);
-
-  const px = rotatedPoint[0];
-  const py = rotatedPoint[1];
-
-  // A point is inside a diamond if |dx/a| + |dy/b| <= 1
-  // where a = width/2, b = height/2, dx/dy are relative to center
-  const a = width / 2;
-  const b = height / 2;
-  if (a === 0 || b === 0) return false;
-
-  const dx = Math.abs(px - cx);
-  const dy = Math.abs(py - cy);
-  const normalizedDist = dx / a + dy / b;
-
-  if (element.backgroundColor !== 'transparent') {
-    // filled: hit if inside diamond + threshold
-    const thresholdNorm = threshold / Math.min(a, b);
-    return normalizedDist <= 1 + thresholdNorm;
-  }
-
-  // stroke only: hit if near the diamond border
-  const thresholdNorm = threshold / Math.min(a, b);
-  return normalizedDist >= 1 - thresholdNorm && normalizedDist <= 1 + thresholdNorm;
-}
-
-function hitTestEllipse(
-  element: DrawElement,
-  scenePoint: GlobalPoint,
-  threshold: number,
-): boolean {
-  const { x, y, width, height, angle } = element;
-  const cx = x + width / 2;
-  const cy = y + height / 2;
-
-  const rotatedPoint = angle !== 0
-    ? pointRotate(scenePoint as unknown as Point, -angle, [cx, cy])
-    : (scenePoint as unknown as Point);
-
-  const px = rotatedPoint[0];
-  const py = rotatedPoint[1];
-
-  const a = width / 2;
-  const b = height / 2;
-  if (a === 0 || b === 0) return false;
-
-  const dx = px - cx;
-  const dy = py - cy;
-
-  if (element.backgroundColor !== 'transparent') {
-    const thresholdA = a + threshold;
-    const thresholdB = b + threshold;
-    return (dx * dx) / (thresholdA * thresholdA) + (dy * dy) / (thresholdB * thresholdB) <= 1;
-  }
-
-  const outerA = a + threshold;
-  const outerB = b + threshold;
-  const innerA = Math.max(a - threshold, 0);
-  const innerB = Math.max(b - threshold, 0);
-
-  const outerDist = (dx * dx) / (outerA * outerA) + (dy * dy) / (outerB * outerB);
-  const innerDist = innerA > 0 && innerB > 0
-    ? (dx * dx) / (innerA * innerA) + (dy * dy) / (innerB * innerB)
-    : 2; // always "outside" inner if too small
-
-  return outerDist <= 1 && innerDist >= 1;
-}
-
-function hitTestLinear(
-  element: DrawLinearElement,
-  scenePoint: GlobalPoint,
-  threshold: number,
-): boolean {
-  const { x, y, points, angle } = element;
-  const cx = x + element.width / 2;
-  const cy = y + element.height / 2;
-
-  const sp: Point = angle !== 0
-    ? pointRotate([scenePoint[0], scenePoint[1]], -angle, [cx, cy])
-    : [scenePoint[0], scenePoint[1]];
-
-  for (let i = 0; i < points.length - 1; i++) {
-    const a: Point = [x + points[i]![0], y + points[i]![1]];
-    const b: Point = [x + points[i + 1]![0], y + points[i + 1]![1]];
-    const { distanceSq } = lineClosestPoint([a, b], sp);
-    if (Math.sqrt(distanceSq) <= threshold) {
-      return true;
-    }
-  }
-  return false;
-}
-
-function hitTestFreeDraw(
-  element: DrawFreeDrawElement,
-  scenePoint: GlobalPoint,
-  threshold: number,
-): boolean {
-  const { x, y, points, strokeWidth } = element;
-  const sp: Point = [scenePoint[0], scenePoint[1]];
-  const visualThreshold = threshold + (strokeWidth * 4.25) / 2;
-
-  for (let i = 0; i < points.length - 1; i++) {
-    const a: Point = [x + points[i]![0], y + points[i]![1]];
-    const b: Point = [x + points[i + 1]![0], y + points[i + 1]![1]];
-    const { distanceSq } = lineClosestPoint([a, b], sp);
-    if (Math.sqrt(distanceSq) <= visualThreshold) {
-      return true;
-    }
-  }
-
-  if (points.length === 1) {
-    const d = pointDistance([x + points[0]![0], y + points[0]![1]], sp);
-    if (d <= visualThreshold) return true;
-  }
-
-  return false;
-}
-
-/**
- * Test if an element is inside a selection box.
- */
-export function isElementInsideBox(
-  element: DrawElement,
-  box: { x: number; y: number; width: number; height: number },
-): boolean {
-  const [x1, y1, x2, y2] = getElementBounds(element);
-  const bx1 = Math.min(box.x, box.x + box.width);
-  const by1 = Math.min(box.y, box.y + box.height);
-  const bx2 = Math.max(box.x, box.x + box.width);
-  const by2 = Math.max(box.y, box.y + box.height);
-
-  return x1 >= bx1 && y1 >= by1 && x2 <= bx2 && y2 <= by2;
-}
-
-/**
- * Test if an element overlaps a selection box.
- */
-export function isElementOverlappingBox(
-  element: DrawElement,
-  box: { x: number; y: number; width: number; height: number },
-): boolean {
-  const [x1, y1, x2, y2] = getElementBounds(element);
-  const bx1 = Math.min(box.x, box.x + box.width);
-  const by1 = Math.min(box.y, box.y + box.height);
-  const bx2 = Math.max(box.x, box.x + box.width);
-  const by2 = Math.max(box.y, box.y + box.height);
-
-  return x1 <= bx2 && x2 >= bx1 && y1 <= by2 && y2 >= by1;
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/duplicate.ts b/web/apps/web-ele/src/components/zq-draw/elements/duplicate.ts
deleted file mode 100644
index 6fa048b..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/duplicate.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { nanoid } from 'nanoid';
-import type { DrawElement } from '../types';
-
-function randomInteger(): number {
-  return Math.floor(Math.random() * 2 ** 31);
-}
-
-export function duplicateElement(
-  element: DrawElement,
-  offsetX = 10,
-  offsetY = 10,
-): DrawElement {
-  return {
-    ...element,
-    id: nanoid(),
-    x: element.x + offsetX,
-    y: element.y + offsetY,
-    version: 1,
-    versionNonce: randomInteger(),
-    updated: Date.now(),
-    seed: Math.floor(Math.random() * 2 ** 31),
-    groupIds: [],
-    boundElements: null,
-  } as DrawElement;
-}
-
-export function duplicateElements(
-  elements: readonly DrawElement[],
-  offsetX = 10,
-  offsetY = 10,
-): DrawElement[] {
-  const oldToNew = new Map<string, string>();
-
-  const duplicated = elements.map((el) => {
-    const newEl = duplicateElement(el, offsetX, offsetY);
-    oldToNew.set(el.id, newEl.id);
-    return newEl;
-  });
-
-  return duplicated;
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/elbow-arrow.ts b/web/apps/web-ele/src/components/zq-draw/elements/elbow-arrow.ts
deleted file mode 100644
index d1b731a..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/elbow-arrow.ts
+++ /dev/null
@@ -1,214 +0,0 @@
-import type { Scene } from '../core/scene';
-import type {
-  DrawArrowElement,
-  DrawElement,
-  GlobalPoint,
-  LocalPoint,
-} from '../types';
-import { getElementBounds } from './bounds';
-
-const DONGLE_LENGTH = 24;
-const MIN_SEGMENT_LENGTH = 10;
-
-type Direction = 'up' | 'down' | 'left' | 'right';
-
-interface ElbowRouteContext {
-  startPoint: GlobalPoint;
-  endPoint: GlobalPoint;
-  startDir: Direction;
-  endDir: Direction;
-  startBounds: [number, number, number, number] | null;
-  endBounds: [number, number, number, number] | null;
-}
-
-/**
- * Determine the heading direction from a point on an element's outline.
- */
-function getHeadingFromElement(
-  point: GlobalPoint,
-  element: DrawElement | null,
-): Direction {
-  if (!element) return 'right';
-
-  const cx = element.x + element.width / 2;
-  const cy = element.y + element.height / 2;
-  const dx = point[0] - cx;
-  const dy = point[1] - cy;
-
-  if (Math.abs(dx) > Math.abs(dy)) {
-    return dx > 0 ? 'right' : 'left';
-  }
-  return dy > 0 ? 'down' : 'up';
-}
-
-function getDirVector(dir: Direction): [number, number] {
-  switch (dir) {
-    case 'up': return [0, -1];
-    case 'down': return [0, 1];
-    case 'left': return [-1, 0];
-    case 'right': return [1, 0];
-  }
-}
-
-function oppositeDir(dir: Direction): Direction {
-  switch (dir) {
-    case 'up': return 'down';
-    case 'down': return 'up';
-    case 'left': return 'right';
-    case 'right': return 'left';
-  }
-}
-
-function isHorizontal(dir: Direction): boolean {
-  return dir === 'left' || dir === 'right';
-}
-
-/**
- * Simplified elbow arrow routing.
- * Produces an orthogonal path with at most 5 segments (L, Z, or U shape).
- */
-function routeElbow(ctx: ElbowRouteContext): GlobalPoint[] {
-  const { startPoint, endPoint, startDir, endDir } = ctx;
-  const [sx, sy] = startPoint;
-  const [ex, ey] = endPoint;
-
-  const sv = getDirVector(startDir);
-  const ev = getDirVector(oppositeDir(endDir));
-
-  const dongleStart: GlobalPoint = [
-    sx + sv[0] * DONGLE_LENGTH,
-    sy + sv[1] * DONGLE_LENGTH,
-  ] as GlobalPoint;
-
-  const dongleEnd: GlobalPoint = [
-    ex + ev[0] * DONGLE_LENGTH,
-    ey + ev[1] * DONGLE_LENGTH,
-  ] as GlobalPoint;
-
-  const [dsx, dsy] = dongleStart;
-  const [dex, dey] = dongleEnd;
-
-  if (isHorizontal(startDir) && !isHorizontal(endDir)) {
-    return [startPoint, dongleStart, [dsx, dey] as GlobalPoint, dongleEnd, endPoint];
-  }
-
-  if (!isHorizontal(startDir) && isHorizontal(endDir)) {
-    return [startPoint, dongleStart, [dex, dsy] as GlobalPoint, dongleEnd, endPoint];
-  }
-
-  if (isHorizontal(startDir) && isHorizontal(endDir)) {
-    const midX = (dsx + dex) / 2;
-    return [
-      startPoint,
-      dongleStart,
-      [midX, dsy] as GlobalPoint,
-      [midX, dey] as GlobalPoint,
-      dongleEnd,
-      endPoint,
-    ];
-  }
-
-  const midY = (dsy + dey) / 2;
-  return [
-    startPoint,
-    dongleStart,
-    [dsx, midY] as GlobalPoint,
-    [dex, midY] as GlobalPoint,
-    dongleEnd,
-    endPoint,
-  ];
-}
-
-/**
- * Remove redundant collinear points from the path.
- */
-function simplifyPath(points: GlobalPoint[]): GlobalPoint[] {
-  if (points.length <= 2) return points;
-
-  const result: GlobalPoint[] = [points[0]!];
-  for (let i = 1; i < points.length - 1; i++) {
-    const prev = result[result.length - 1]!;
-    const curr = points[i]!;
-    const next = points[i + 1]!;
-
-    const sameX = Math.abs(prev[0] - curr[0]) < 0.5 && Math.abs(curr[0] - next[0]) < 0.5;
-    const sameY = Math.abs(prev[1] - curr[1]) < 0.5 && Math.abs(curr[1] - next[1]) < 0.5;
-
-    if (!sameX && !sameY) {
-      result.push(curr);
-    } else if (sameX || sameY) {
-      // skip collinear
-    } else {
-      result.push(curr);
-    }
-  }
-  result.push(points[points.length - 1]!);
-  return result;
-}
-
-/**
- * Calculate elbow arrow points for a given arrow element.
- */
-export function calculateElbowArrowPoints(
-  arrow: DrawArrowElement,
-  scene: Scene,
-): LocalPoint[] {
-  const firstPoint = arrow.points[0]!;
-  const lastPoint = arrow.points[arrow.points.length - 1]!;
-
-  const startGlobal: GlobalPoint = [
-    arrow.x + firstPoint[0],
-    arrow.y + firstPoint[1],
-  ] as GlobalPoint;
-
-  const endGlobal: GlobalPoint = [
-    arrow.x + lastPoint[0],
-    arrow.y + lastPoint[1],
-  ] as GlobalPoint;
-
-  let startElement: DrawElement | null = null;
-  let endElement: DrawElement | null = null;
-  let startBounds: [number, number, number, number] | null = null;
-  let endBounds: [number, number, number, number] | null = null;
-
-  if (arrow.startBinding) {
-    startElement = scene.getElement(arrow.startBinding.elementId) || null;
-    if (startElement) startBounds = getElementBounds(startElement) as [number, number, number, number];
-  }
-  if (arrow.endBinding) {
-    endElement = scene.getElement(arrow.endBinding.elementId) || null;
-    if (endElement) endBounds = getElementBounds(endElement) as [number, number, number, number];
-  }
-
-  const startDir = getHeadingFromElement(startGlobal, startElement);
-  const endDir = getHeadingFromElement(endGlobal, endElement);
-
-  const ctx: ElbowRouteContext = {
-    startPoint: startGlobal,
-    endPoint: endGlobal,
-    startDir,
-    endDir,
-    startBounds,
-    endBounds,
-  };
-
-  const globalPath = routeElbow(ctx);
-  const simplified = simplifyPath(globalPath);
-
-  return simplified.map(
-    (p) => [p[0] - arrow.x, p[1] - arrow.y] as LocalPoint,
-  );
-}
-
-/**
- * Update an elbow arrow's points after binding changes or element moves.
- */
-export function updateElbowArrowPoints(
-  arrow: DrawArrowElement,
-  scene: Scene,
-): void {
-  if (!arrow.elbowed) return;
-
-  const newPoints = calculateElbowArrowPoints(arrow, scene);
-  scene.mutateElement(arrow.id, { points: newPoints } as Partial<DrawElement>);
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/flip.ts b/web/apps/web-ele/src/components/zq-draw/elements/flip.ts
deleted file mode 100644
index 6200232..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/flip.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import type { Scene } from '../core/scene';
-import type {
-  DrawElement,
-  DrawLinearElement,
-  DrawArrowElement,
-  LocalPoint,
-} from '../types';
-import { getCommonBounds } from './bounds';
-
-export function flipElements(
-  selectedElements: readonly DrawElement[],
-  direction: 'horizontal' | 'vertical',
-  scene: Scene,
-): void {
-  if (selectedElements.length === 0) return;
-
-  if (allAreBoundArrows(selectedElements)) {
-    for (const el of selectedElements) {
-      const arrow = el as DrawArrowElement;
-      scene.mutateElement(arrow.id, {
-        startArrowhead: arrow.endArrowhead,
-        endArrowhead: arrow.startArrowhead,
-      } as Partial<DrawElement>);
-    }
-    return;
-  }
-
-  const [x1, y1, x2, y2] = getCommonBounds(selectedElements);
-  const midX = (x1 + x2) / 2;
-  const midY = (y1 + y2) / 2;
-
-  for (const el of selectedElements) {
-    if (isLinearLike(el)) {
-      flipLinearElement(el as DrawLinearElement, direction, midX, midY, scene);
-    } else {
-      flipGenericElement(el, direction, midX, midY, scene);
-    }
-  }
-}
-
-function flipGenericElement(
-  element: DrawElement,
-  direction: 'horizontal' | 'vertical',
-  midX: number,
-  midY: number,
-  scene: Scene,
-): void {
-  if (direction === 'horizontal') {
-    const newX = 2 * midX - element.x - element.width;
-    scene.mutateElement(element.id, { x: newX } as Partial<DrawElement>);
-  } else {
-    const newY = 2 * midY - element.y - element.height;
-    scene.mutateElement(element.id, { y: newY } as Partial<DrawElement>);
-  }
-}
-
-function flipLinearElement(
-  element: DrawLinearElement,
-  direction: 'horizontal' | 'vertical',
-  midX: number,
-  midY: number,
-  scene: Scene,
-): void {
-  const newPoints = element.points.map((p) => {
-    if (direction === 'horizontal') {
-      return [-p[0], p[1]] as LocalPoint;
-    }
-    return [p[0], -p[1]] as LocalPoint;
-  });
-
-  if (direction === 'horizontal') {
-    const newX = 2 * midX - element.x - element.width;
-    scene.mutateElement(element.id, {
-      x: newX,
-      points: newPoints,
-    } as Partial<DrawElement>);
-  } else {
-    const newY = 2 * midY - element.y - element.height;
-    scene.mutateElement(element.id, {
-      y: newY,
-      points: newPoints,
-    } as Partial<DrawElement>);
-  }
-}
-
-function allAreBoundArrows(elements: readonly DrawElement[]): boolean {
-  return elements.every((el) => {
-    if (el.type !== 'arrow') return false;
-    const arrow = el as DrawArrowElement;
-    return arrow.startBinding != null || arrow.endBinding != null;
-  });
-}
-
-function isLinearLike(element: DrawElement): boolean {
-  return element.type === 'line' || element.type === 'arrow';
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/frame.ts b/web/apps/web-ele/src/components/zq-draw/elements/frame.ts
deleted file mode 100644
index e00d9bc..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/frame.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import type { Scene } from '../core/scene';
-import type { DrawElement, DrawFrameElement, NonDeletedDrawElement } from '../types';
-import { getElementBounds } from './bounds';
-
-export function isFrameElement(element: DrawElement): element is DrawFrameElement {
-  return element.type === 'frame';
-}
-
-export function getFrameChildren(
-  frame: DrawFrameElement,
-  elements: readonly DrawElement[],
-): DrawElement[] {
-  return elements.filter((el) => !el.isDeleted && el.frameId === frame.id);
-}
-
-export function addElementsToFrame(
-  elements: readonly DrawElement[],
-  frame: DrawFrameElement,
-  scene: Scene,
-): void {
-  for (const el of elements) {
-    if (el.id === frame.id || el.type === 'frame') continue;
-    if (el.frameId !== frame.id) {
-      scene.mutateElement(el.id, { frameId: frame.id } as Partial<DrawElement>);
-    }
-  }
-}
-
-export function removeElementsFromFrame(
-  elements: readonly DrawElement[],
-  scene: Scene,
-): void {
-  for (const el of elements) {
-    if (el.frameId) {
-      scene.mutateElement(el.id, { frameId: null } as Partial<DrawElement>);
-    }
-  }
-}
-
-export function removeAllElementsFromFrame(
-  frame: DrawFrameElement,
-  allElements: readonly DrawElement[],
-  scene: Scene,
-): void {
-  const children = getFrameChildren(frame, allElements);
-  removeElementsFromFrame(children, scene);
-}
-
-/**
- * Check if an element's bounds are completely inside a frame's bounds.
- */
-export function isElementInFrame(
-  element: DrawElement,
-  frame: DrawFrameElement,
-): boolean {
-  const [ex1, ey1, ex2, ey2] = getElementBounds(element);
-  const [fx1, fy1, fx2, fy2] = getElementBounds(frame);
-  return ex1 >= fx1 && ey1 >= fy1 && ex2 <= fx2 && ey2 <= fy2;
-}
-
-/**
- * Check if an element overlaps with a frame.
- */
-export function elementOverlapsWithFrame(
-  element: DrawElement,
-  frame: DrawFrameElement,
-): boolean {
-  const [ex1, ey1, ex2, ey2] = getElementBounds(element);
-  const [fx1, fy1, fx2, fy2] = getElementBounds(frame);
-  return ex1 <= fx2 && ex2 >= fx1 && ey1 <= fy2 && ey2 >= fy1;
-}
-
-/**
- * Get all non-frame elements completely inside a frame's bounds.
- */
-export function getElementsInFrame(
-  frame: DrawFrameElement,
-  elements: readonly NonDeletedDrawElement[],
-): NonDeletedDrawElement[] {
-  return elements.filter(
-    (el) => el.id !== frame.id && el.type !== 'frame' && isElementInFrame(el, frame),
-  );
-}
-
-/**
- * After dragging elements, update their frame membership.
- */
-export function updateFrameMembershipOnDrag(
-  draggedElements: readonly DrawElement[],
-  allElements: readonly NonDeletedDrawElement[],
-  scene: Scene,
-): void {
-  const frames = allElements.filter(
-    (el): el is DrawFrameElement & { isDeleted: false } => el.type === 'frame',
-  );
-
-  for (const el of draggedElements) {
-    if (el.type === 'frame') continue;
-
-    let newFrameId: string | null = null;
-    for (const frame of frames) {
-      if (isElementInFrame(el, frame)) {
-        newFrameId = frame.id;
-        break;
-      }
-    }
-
-    if (el.frameId !== newFrameId) {
-      scene.mutateElement(el.id, { frameId: newFrameId } as Partial<DrawElement>);
-    }
-  }
-}
-
-/**
- * Whether frame clipping should be applied for rendering.
- */
-export function shouldApplyFrameClip(
-  element: DrawElement,
-  frameRendering: { enabled: boolean; clip: boolean },
-): boolean {
-  return (
-    frameRendering.enabled &&
-    frameRendering.clip &&
-    element.frameId != null
-  );
-}
-
-/**
- * Get all frames from elements.
- */
-export function getAllFrames(
-  elements: readonly DrawElement[],
-): DrawFrameElement[] {
-  return elements.filter(
-    (el): el is DrawFrameElement => el.type === 'frame' && !el.isDeleted,
-  );
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/group.ts b/web/apps/web-ele/src/components/zq-draw/elements/group.ts
deleted file mode 100644
index 8b9c087..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/group.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { nanoid } from 'nanoid';
-
-import type { Scene } from '../core/scene';
-import type { DrawElement, NonDeletedDrawElement } from '../types';
-
-export function generateGroupId(): string {
-  return nanoid();
-}
-
-export function getElementsInGroup(
-  elements: readonly DrawElement[],
-  groupId: string,
-): DrawElement[] {
-  return elements.filter(
-    (el) => !el.isDeleted && el.groupIds.includes(groupId),
-  );
-}
-
-/**
- * Split selected elements into "maximum groups":
- * elements sharing the outermost groupId are grouped together;
- * ungrouped elements each form their own group.
- */
-export function getMaximumGroups(
-  elements: readonly DrawElement[],
-): DrawElement[][] {
-  const groups = new Map<string, DrawElement[]>();
-  const ungrouped: DrawElement[][] = [];
-
-  for (const el of elements) {
-    if (el.groupIds.length > 0) {
-      const outerGroupId = el.groupIds[el.groupIds.length - 1]!;
-      let group = groups.get(outerGroupId);
-      if (!group) {
-        group = [];
-        groups.set(outerGroupId, group);
-      }
-      group.push(el);
-    } else {
-      ungrouped.push([el]);
-    }
-  }
-
-  return [...groups.values(), ...ungrouped];
-}
-
-export function addToGroup(
-  prevGroupIds: readonly string[],
-  newGroupId: string,
-  editingGroupId?: string | null,
-): string[] {
-  if (editingGroupId) {
-    const idx = prevGroupIds.indexOf(editingGroupId);
-    if (idx >= 0) {
-      return [
-        ...prevGroupIds.slice(0, idx),
-        newGroupId,
-        ...prevGroupIds.slice(idx),
-      ];
-    }
-  }
-  return [...prevGroupIds, newGroupId];
-}
-
-export function removeFromGroup(
-  groupIds: readonly string[],
-  groupId: string,
-): string[] {
-  return groupIds.filter((id) => id !== groupId);
-}
-
-/**
- * Expand selection to include all elements sharing a group with any selected element.
- */
-export function selectGroupsForSelectedElements(
-  selectedIds: Record<string, true>,
-  elements: readonly NonDeletedDrawElement[],
-  editingGroupId?: string | null,
-): { selectedElementIds: Record<string, true>; selectedGroupIds: Record<string, boolean> } {
-  const newSelectedIds: Record<string, true> = { ...selectedIds };
-  const selectedGroupIds: Record<string, boolean> = {};
-
-  for (const el of elements) {
-    if (!selectedIds[el.id]) continue;
-    for (const gid of el.groupIds) {
-      if (gid === editingGroupId) break;
-      selectedGroupIds[gid] = true;
-    }
-  }
-
-  for (const el of elements) {
-    for (const gid of el.groupIds) {
-      if (gid === editingGroupId) break;
-      if (selectedGroupIds[gid]) {
-        newSelectedIds[el.id] = true;
-        break;
-      }
-    }
-  }
-
-  return { selectedElementIds: newSelectedIds, selectedGroupIds };
-}
-
-export function groupElements(
-  selectedElements: readonly DrawElement[],
-  scene: Scene,
-  editingGroupId?: string | null,
-): string {
-  const groupId = generateGroupId();
-  for (const el of selectedElements) {
-    const newGroupIds = addToGroup(el.groupIds, groupId, editingGroupId);
-    scene.mutateElement(el.id, { groupIds: newGroupIds } as Partial<DrawElement>);
-  }
-  return groupId;
-}
-
-export function ungroupElements(
-  elements: readonly DrawElement[],
-  scene: Scene,
-  groupId: string,
-): void {
-  for (const el of elements) {
-    if (el.groupIds.includes(groupId)) {
-      const newGroupIds = removeFromGroup(el.groupIds, groupId);
-      scene.mutateElement(el.id, { groupIds: newGroupIds } as Partial<DrawElement>);
-    }
-  }
-}
-
-/**
- * Get the outermost group ID for an element (the one that should be selected
- * when clicking on the element).
- */
-export function getOutermostGroupId(
-  element: DrawElement,
-  editingGroupId?: string | null,
-): string | null {
-  if (element.groupIds.length === 0) return null;
-  for (let i = element.groupIds.length - 1; i >= 0; i--) {
-    if (element.groupIds[i] === editingGroupId) {
-      return i > 0 ? element.groupIds[i - 1]! : null;
-    }
-  }
-  return element.groupIds[element.groupIds.length - 1]!;
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/linear-element-editor.ts b/web/apps/web-ele/src/components/zq-draw/elements/linear-element-editor.ts
deleted file mode 100644
index cf218f3..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/linear-element-editor.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-import type {
-  DrawLinearElement,
-  DrawElement,
-  LocalPoint,
-  GlobalPoint,
-  LinearElementEditorState,
-} from '../types';
-import {
-  getLinearPointIndexAtPosition,
-  getLinearMidpointIndexAtPosition,
-} from './transform-handles';
-
-export function createLinearEditorState(
-  elementId: string,
-): LinearElementEditorState {
-  return {
-    elementId,
-    selectedPointIndices: [],
-    isDragging: false,
-    dragStartPoint: null,
-    lastDragPoint: null,
-  };
-}
-
-export function isLinearElement(el: DrawElement): el is DrawLinearElement {
-  return el.type === 'line' || el.type === 'arrow';
-}
-
-export function getPointGlobalCoords(
-  element: DrawLinearElement,
-  pointIndex: number,
-): GlobalPoint {
-  const pt = element.points[pointIndex];
-  if (!pt) return [element.x, element.y] as GlobalPoint;
-  return [element.x + pt[0], element.y + pt[1]] as GlobalPoint;
-}
-
-export function handleLinearEditorPointerDown(
-  state: LinearElementEditorState,
-  element: DrawLinearElement,
-  sceneX: number,
-  sceneY: number,
-  zoom: number,
-): { action: 'drag-point' | 'add-midpoint' | 'none'; pointIndex?: number } {
-  const hitIndex = getLinearPointIndexAtPosition(element, sceneX, sceneY, zoom);
-  if (hitIndex !== null) {
-    state.selectedPointIndices = [hitIndex];
-    state.isDragging = true;
-    state.dragStartPoint = [sceneX, sceneY] as GlobalPoint;
-    state.lastDragPoint = [sceneX, sceneY] as GlobalPoint;
-    return { action: 'drag-point', pointIndex: hitIndex };
-  }
-
-  const midIndex = getLinearMidpointIndexAtPosition(element, sceneX, sceneY, zoom);
-  if (midIndex !== null) {
-    return { action: 'add-midpoint', pointIndex: midIndex };
-  }
-
-  return { action: 'none' };
-}
-
-export function handleLinearEditorPointerMove(
-  state: LinearElementEditorState,
-  element: DrawLinearElement,
-  sceneX: number,
-  sceneY: number,
-  shiftKey: boolean,
-): DrawLinearElement | null {
-  if (!state.isDragging || state.selectedPointIndices.length === 0) return null;
-
-  const dx = sceneX - (state.lastDragPoint?.[0] ?? sceneX);
-  const dy = sceneY - (state.lastDragPoint?.[1] ?? sceneY);
-  state.lastDragPoint = [sceneX, sceneY] as GlobalPoint;
-
-  const newPoints = [...element.points] as LocalPoint[];
-  for (const idx of state.selectedPointIndices) {
-    const pt = newPoints[idx];
-    if (!pt) continue;
-
-    let newX = pt[0] + dx;
-    let newY = pt[1] + dy;
-
-    if (shiftKey && element.points.length >= 2) {
-      const prevIdx = idx > 0 ? idx - 1 : idx + 1;
-      const prevPt = newPoints[prevIdx];
-      if (prevPt) {
-        const angle = Math.atan2(newY - prevPt[1], newX - prevPt[0]);
-        const snapped = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4);
-        const dist = Math.hypot(newX - prevPt[0], newY - prevPt[1]);
-        newX = prevPt[0] + Math.cos(snapped) * dist;
-        newY = prevPt[1] + Math.sin(snapped) * dist;
-      }
-    }
-
-    newPoints[idx] = [newX, newY] as LocalPoint;
-  }
-
-  const normalized = normalizePoints(newPoints);
-
-  return {
-    ...element,
-    x: element.x + normalized.offsetX,
-    y: element.y + normalized.offsetY,
-    points: normalized.points,
-    width: normalized.width,
-    height: normalized.height,
-  } as DrawLinearElement;
-}
-
-export function handleLinearEditorPointerUp(
-  state: LinearElementEditorState,
-): void {
-  state.isDragging = false;
-  state.dragStartPoint = null;
-  state.lastDragPoint = null;
-}
-
-export function addPointAtMidpoint(
-  element: DrawLinearElement,
-  segmentIndex: number,
-): { updatedElement: DrawLinearElement; newPointIndex: number } {
-  const p1 = element.points[segmentIndex]!;
-  const p2 = element.points[segmentIndex + 1]!;
-  const midPoint: LocalPoint = [
-    (p1[0] + p2[0]) / 2,
-    (p1[1] + p2[1]) / 2,
-  ] as LocalPoint;
-
-  const newPoints = [...element.points];
-  newPoints.splice(segmentIndex + 1, 0, midPoint);
-
-  return {
-    updatedElement: {
-      ...element,
-      points: newPoints as readonly LocalPoint[],
-    } as DrawLinearElement,
-    newPointIndex: segmentIndex + 1,
-  };
-}
-
-export function deletePoints(
-  element: DrawLinearElement,
-  indices: number[],
-): DrawLinearElement | null {
-  if (element.points.length - indices.length < 2) return null;
-
-  const indexSet = new Set(indices);
-  const newPoints = element.points.filter(
-    (_, i) => !indexSet.has(i),
-  ) as LocalPoint[];
-
-  const normalized = normalizePoints(newPoints);
-
-  return {
-    ...element,
-    x: element.x + normalized.offsetX,
-    y: element.y + normalized.offsetY,
-    points: normalized.points,
-    width: normalized.width,
-    height: normalized.height,
-  } as DrawLinearElement;
-}
-
-function normalizePoints(points: LocalPoint[]): {
-  points: LocalPoint[];
-  offsetX: number;
-  offsetY: number;
-  width: number;
-  height: number;
-} {
-  if (points.length === 0) {
-    return { points: [], offsetX: 0, offsetY: 0, width: 0, height: 0 };
-  }
-
-  const first = points[0]!;
-  const offsetX = first[0];
-  const offsetY = first[1];
-
-  const normalized = points.map(
-    (p) => [p[0] - offsetX, p[1] - offsetY] as LocalPoint,
-  );
-
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  for (const p of normalized) {
-    minX = Math.min(minX, p[0]);
-    minY = Math.min(minY, p[1]);
-    maxX = Math.max(maxX, p[0]);
-    maxY = Math.max(maxY, p[1]);
-  }
-
-  return {
-    points: normalized,
-    offsetX,
-    offsetY,
-    width: Math.abs(maxX - minX),
-    height: Math.abs(maxY - minY),
-  };
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/mutate-element.ts b/web/apps/web-ele/src/components/zq-draw/elements/mutate-element.ts
deleted file mode 100644
index bc0e3f7..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/mutate-element.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { DrawElement } from '../types';
-
-function randomInteger(): number {
-  return Math.floor(Math.random() * 2 ** 31);
-}
-
-/**
- * Immutable element update. Returns a new element with bumped version.
- */
-export function mutateElement<T extends DrawElement>(
-  element: T,
-  updates: Partial<T>,
-): T {
-  return {
-    ...element,
-    ...updates,
-    version: element.version + 1,
-    versionNonce: randomInteger(),
-    updated: Date.now(),
-  };
-}
-
-/**
- * Bump version without changing properties.
- */
-export function bumpVersion<T extends DrawElement>(element: T): T {
-  return {
-    ...element,
-    version: element.version + 1,
-    versionNonce: randomInteger(),
-    updated: Date.now(),
-  };
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/new-element.ts b/web/apps/web-ele/src/components/zq-draw/elements/new-element.ts
deleted file mode 100644
index 1436bf4..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/new-element.ts
+++ /dev/null
@@ -1,294 +0,0 @@
-import { nanoid } from 'nanoid';
-
-import type {
-  DrawElement,
-  DrawRectangleElement,
-  DrawEllipseElement,
-  DrawDiamondElement,
-  DrawTextElement,
-  DrawLinearElement,
-  DrawArrowElement,
-  DrawFreeDrawElement,
-  DrawImageElement,
-  DrawFrameElement,
-  DrawSelectionElement,
-  FillStyle,
-  StrokeStyle,
-  Radians,
-  LocalPoint,
-  Arrowhead,
-  TextAlign,
-  VerticalAlign,
-  FractionalIndex,
-  FileId,
-} from '../types';
-import {
-  DEFAULT_ELEMENT_STROKE_COLOR,
-  DEFAULT_ELEMENT_BACKGROUND_COLOR,
-  DEFAULT_ELEMENT_FILL_STYLE,
-  DEFAULT_ELEMENT_STROKE_WIDTH,
-  DEFAULT_ELEMENT_STROKE_STYLE,
-  DEFAULT_ELEMENT_ROUGHNESS,
-  DEFAULT_ELEMENT_OPACITY,
-  DEFAULT_ELEMENT_ROUNDNESS,
-  DEFAULT_FONT_SIZE,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_TEXT_ALIGN,
-  DEFAULT_VERTICAL_ALIGN,
-  DEFAULT_LINE_HEIGHT,
-  DEFAULT_END_ARROWHEAD,
-  ANGLE_ZERO,
-  FONT_FAMILY_FALLBACKS,
-  ROUNDNESS,
-} from '../constants';
-
-function randomInteger(): number {
-  return Math.floor(Math.random() * 2 ** 31);
-}
-
-function randomSeed(): number {
-  return Math.floor(Math.random() * 2 ** 31);
-}
-
-interface CommonOpts {
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
-  strokeColor?: string;
-  backgroundColor?: string;
-  fillStyle?: FillStyle;
-  strokeWidth?: number;
-  strokeStyle?: StrokeStyle;
-  roughness?: number;
-  opacity?: number;
-  angle?: Radians;
-  locked?: boolean;
-  groupIds?: string[];
-  frameId?: string | null;
-}
-
-function baseElement(
-  type: DrawElement['type'],
-  opts: CommonOpts = {},
-): Omit<DrawElement, 'type'> & { type: string } {
-  return {
-    id: nanoid(),
-    type,
-    x: opts.x ?? 0,
-    y: opts.y ?? 0,
-    width: opts.width ?? 0,
-    height: opts.height ?? 0,
-    angle: opts.angle ?? ANGLE_ZERO,
-    strokeColor: opts.strokeColor ?? DEFAULT_ELEMENT_STROKE_COLOR,
-    backgroundColor: opts.backgroundColor ?? DEFAULT_ELEMENT_BACKGROUND_COLOR,
-    fillStyle: opts.fillStyle ?? DEFAULT_ELEMENT_FILL_STYLE,
-    strokeWidth: opts.strokeWidth ?? DEFAULT_ELEMENT_STROKE_WIDTH,
-    strokeStyle: opts.strokeStyle ?? DEFAULT_ELEMENT_STROKE_STYLE,
-    roughness: opts.roughness ?? DEFAULT_ELEMENT_ROUGHNESS,
-    opacity: opts.opacity ?? DEFAULT_ELEMENT_OPACITY,
-    roundness: DEFAULT_ELEMENT_ROUNDNESS,
-    seed: randomSeed(),
-    version: 1,
-    versionNonce: randomInteger(),
-    index: null as FractionalIndex | null,
-    isDeleted: false,
-    groupIds: opts.groupIds ?? [],
-    frameId: opts.frameId ?? null,
-    boundElements: null,
-    link: null,
-    locked: opts.locked ?? false,
-    updated: Date.now(),
-  };
-}
-
-export function newRectangleElement(
-  opts: CommonOpts = {},
-): DrawRectangleElement {
-  return { ...baseElement('rectangle', opts), type: 'rectangle' } as DrawRectangleElement;
-}
-
-export function newEllipseElement(opts: CommonOpts = {}): DrawEllipseElement {
-  return { ...baseElement('ellipse', opts), type: 'ellipse' } as DrawEllipseElement;
-}
-
-export function newDiamondElement(opts: CommonOpts = {}): DrawDiamondElement {
-  return { ...baseElement('diamond', opts), type: 'diamond' } as DrawDiamondElement;
-}
-
-export function newSelectionElement(
-  opts: CommonOpts = {},
-): DrawSelectionElement {
-  return {
-    ...baseElement('selection', opts),
-    type: 'selection',
-  } as DrawSelectionElement;
-}
-
-export interface TextOpts extends CommonOpts {
-  text?: string;
-  fontSize?: number;
-  fontFamily?: number;
-  textAlign?: TextAlign;
-  verticalAlign?: VerticalAlign;
-  containerId?: string | null;
-  lineHeight?: number;
-  autoResize?: boolean;
-}
-
-export function newTextElement(opts: TextOpts = {}): DrawTextElement {
-  const text = opts.text ?? '';
-  const fontSize = opts.fontSize ?? DEFAULT_FONT_SIZE;
-  const fontFamily = opts.fontFamily ?? DEFAULT_FONT_FAMILY;
-  const lineHeight = opts.lineHeight ?? DEFAULT_LINE_HEIGHT;
-
-  let width = opts.width ?? 0;
-  let height = opts.height ?? 0;
-
-  if (text && (width === 0 || height === 0)) {
-    try {
-      const canvas = document.createElement('canvas');
-      const ctx = canvas.getContext('2d');
-      if (ctx) {
-        const ff = FONT_FAMILY_FALLBACKS[fontFamily] || 'sans-serif';
-        ctx.font = `${fontSize}px ${ff}`;
-        const lines = text.split('\n');
-        let maxW = 0;
-        for (const line of lines) {
-          maxW = Math.max(maxW, ctx.measureText(line || ' ').width);
-        }
-        if (width === 0) width = Math.ceil(maxW);
-        if (height === 0) height = Math.ceil(lines.length * fontSize * lineHeight);
-      }
-    } catch {
-      const lineCount = text.split('\n').length;
-      height = lineCount * fontSize * lineHeight;
-      width = text.length * fontSize * 0.6;
-    }
-  }
-
-  if (height === 0) {
-    height = Math.ceil(fontSize * lineHeight);
-  }
-
-  return {
-    ...baseElement('text', { ...opts, width, height }),
-    type: 'text',
-    text,
-    originalText: text,
-    fontSize,
-    fontFamily,
-    textAlign: (opts.textAlign ?? DEFAULT_TEXT_ALIGN) as TextAlign,
-    verticalAlign: (opts.verticalAlign ?? DEFAULT_VERTICAL_ALIGN) as VerticalAlign,
-    containerId: opts.containerId ?? null,
-    autoResize: opts.autoResize ?? true,
-    lineHeight,
-  } as DrawTextElement;
-}
-
-export interface LinearOpts extends CommonOpts {
-  points?: LocalPoint[];
-  startArrowhead?: Arrowhead | null;
-  endArrowhead?: Arrowhead | null;
-}
-
-export function newLineElement(opts: LinearOpts = {}): DrawLinearElement {
-  return {
-    ...baseElement('line', opts),
-    type: 'line',
-    roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
-    points: opts.points ?? ([[0, 0] as LocalPoint, [0, 0] as LocalPoint]),
-    startBinding: null,
-    endBinding: null,
-    startArrowhead: opts.startArrowhead ?? null,
-    endArrowhead: opts.endArrowhead ?? null,
-  } as DrawLinearElement;
-}
-
-export function newArrowElement(opts: LinearOpts = {}): DrawArrowElement {
-  return {
-    ...baseElement('arrow', opts),
-    type: 'arrow',
-    roundness: { type: ROUNDNESS.PROPORTIONAL_RADIUS },
-    points: opts.points ?? ([[0, 0] as LocalPoint, [0, 0] as LocalPoint]),
-    startBinding: null,
-    endBinding: null,
-    startArrowhead: opts.startArrowhead ?? null,
-    endArrowhead: opts.endArrowhead ?? DEFAULT_END_ARROWHEAD,
-    elbowed: false,
-  } as DrawArrowElement;
-}
-
-export interface FreeDrawOpts extends CommonOpts {
-  points?: LocalPoint[];
-  pressures?: number[];
-  simulatePressure?: boolean;
-}
-
-export function newFreeDrawElement(
-  opts: FreeDrawOpts = {},
-): DrawFreeDrawElement {
-  return {
-    ...baseElement('freedraw', opts),
-    type: 'freedraw',
-    points: opts.points ?? [],
-    pressures: opts.pressures ?? [],
-    simulatePressure: opts.simulatePressure ?? true,
-  } as DrawFreeDrawElement;
-}
-
-export interface ImageOpts extends CommonOpts {
-  fileId?: FileId | null;
-}
-
-export function newImageElement(opts: ImageOpts = {}): DrawImageElement {
-  return {
-    ...baseElement('image', opts),
-    type: 'image',
-    fileId: opts.fileId ?? null,
-    status: 'pending',
-    scale: [1, 1],
-  } as DrawImageElement;
-}
-
-export function newFrameElement(
-  opts: CommonOpts & { name?: string } = {},
-): DrawFrameElement {
-  return {
-    ...baseElement('frame', opts),
-    type: 'frame',
-    name: opts.name ?? null,
-    width: opts.width ?? 800,
-    height: opts.height ?? 600,
-  } as DrawFrameElement;
-}
-
-export function newElementByType(
-  type: DrawElement['type'],
-  opts: CommonOpts = {},
-): DrawElement {
-  switch (type) {
-    case 'rectangle':
-      return newRectangleElement(opts);
-    case 'ellipse':
-      return newEllipseElement(opts);
-    case 'diamond':
-      return newDiamondElement(opts);
-    case 'text':
-      return newTextElement(opts as TextOpts);
-    case 'line':
-      return newLineElement(opts as LinearOpts);
-    case 'arrow':
-      return newArrowElement(opts as LinearOpts);
-    case 'freedraw':
-      return newFreeDrawElement(opts as FreeDrawOpts);
-    case 'image':
-      return newImageElement(opts as ImageOpts);
-    case 'frame':
-      return newFrameElement(opts);
-    case 'selection':
-      return newSelectionElement(opts);
-    default:
-      return newRectangleElement(opts);
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/shape-generator.ts b/web/apps/web-ele/src/components/zq-draw/elements/shape-generator.ts
deleted file mode 100644
index 23b255e..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/shape-generator.ts
+++ /dev/null
@@ -1,479 +0,0 @@
-import rough from 'roughjs';
-import type { RoughCanvas } from 'roughjs/bin/canvas';
-import type { Drawable } from 'roughjs/bin/core';
-import getStroke from 'perfect-freehand';
-import type {
-  DrawElement,
-  DrawLinearElement,
-  DrawArrowElement,
-  DrawFreeDrawElement,
-  Arrowhead,
-} from '../types';
-import {
-  ROUNDNESS,
-  DEFAULT_PROPORTIONAL_RADIUS,
-  DEFAULT_ADAPTIVE_RADIUS,
-} from '../constants';
-
-const cache = new Map<string, Drawable>();
-
-function getCacheKey(element: DrawElement): string {
-  const r = element.roundness ? element.roundness.type : 0;
-  return `${element.id}_${element.version}_${element.seed}_${r}`;
-}
-
-function getLineDash(strokeStyle: string): number[] | undefined {
-  switch (strokeStyle) {
-    case 'dashed':
-      return [12, 8];
-    case 'dotted':
-      return [3, 6];
-    default:
-      return undefined;
-  }
-}
-
-function getRoughOptions(element: DrawElement) {
-  return {
-    seed: element.seed,
-    roughness: element.roughness,
-    fill:
-      element.backgroundColor !== 'transparent'
-        ? element.backgroundColor
-        : undefined,
-    fillStyle: element.fillStyle as string,
-    stroke: element.strokeColor,
-    strokeWidth: element.strokeWidth,
-    strokeLineDash: getLineDash(element.strokeStyle),
-  };
-}
-
-function getCornerRadius(x: number, element: DrawElement): number {
-  if (
-    element.roundness?.type === ROUNDNESS.PROPORTIONAL_RADIUS ||
-    element.roundness?.type === ROUNDNESS.LEGACY
-  ) {
-    return x * DEFAULT_PROPORTIONAL_RADIUS;
-  }
-
-  if (element.roundness?.type === ROUNDNESS.ADAPTIVE_RADIUS) {
-    const fixedRadiusSize =
-      element.roundness?.value ?? DEFAULT_ADAPTIVE_RADIUS;
-    const CUTOFF_SIZE = fixedRadiusSize / DEFAULT_PROPORTIONAL_RADIUS;
-
-    if (x <= CUTOFF_SIZE) {
-      return x * DEFAULT_PROPORTIONAL_RADIUS;
-    }
-    return fixedRadiusSize;
-  }
-
-  return 0;
-}
-
-export function generateRoughDrawable(element: DrawElement): Drawable | null {
-  const key = getCacheKey(element);
-  const cached = cache.get(key);
-  if (cached) return cached;
-
-  const gen = rough.generator();
-  const opts = getRoughOptions(element);
-  let drawable: Drawable | null = null;
-
-  switch (element.type) {
-    case 'rectangle': {
-      if (element.roundness) {
-        const w = element.width;
-        const h = element.height;
-        const r = getCornerRadius(Math.min(w, h), element);
-        drawable = gen.path(
-          `M ${r} 0 L ${w - r} 0 Q ${w} 0, ${w} ${r} L ${w} ${h - r} Q ${w} ${h}, ${w - r} ${h} L ${r} ${h} Q 0 ${h}, 0 ${h - r} L 0 ${r} Q 0 0, ${r} 0`,
-          opts,
-        );
-      } else {
-        drawable = gen.rectangle(0, 0, element.width, element.height, opts);
-      }
-      break;
-    }
-    case 'ellipse':
-      drawable = gen.ellipse(
-        element.width / 2,
-        element.height / 2,
-        element.width,
-        element.height,
-        opts,
-      );
-      break;
-    case 'diamond': {
-      const w = element.width;
-      const h = element.height;
-      const topX = Math.floor(w / 2) + 1;
-      const topY = 0;
-      const rightX = w;
-      const rightY = Math.floor(h / 2) + 1;
-      const bottomX = topX;
-      const bottomY = h;
-      const leftX = 0;
-      const leftY = rightY;
-
-      if (element.roundness) {
-        const verticalRadius = getCornerRadius(
-          Math.abs(topX - leftX),
-          element,
-        );
-        const horizontalRadius = getCornerRadius(
-          Math.abs(rightY - topY),
-          element,
-        );
-        drawable = gen.path(
-          `M ${topX + verticalRadius} ${topY + horizontalRadius} L ${rightX - verticalRadius} ${rightY - horizontalRadius} C ${rightX} ${rightY}, ${rightX} ${rightY}, ${rightX - verticalRadius} ${rightY + horizontalRadius} L ${bottomX + verticalRadius} ${bottomY - horizontalRadius} C ${bottomX} ${bottomY}, ${bottomX} ${bottomY}, ${bottomX - verticalRadius} ${bottomY - horizontalRadius} L ${leftX + verticalRadius} ${leftY + horizontalRadius} C ${leftX} ${leftY}, ${leftX} ${leftY}, ${leftX + verticalRadius} ${leftY - horizontalRadius} L ${topX - verticalRadius} ${topY + horizontalRadius} C ${topX} ${topY}, ${topX} ${topY}, ${topX + verticalRadius} ${topY + horizontalRadius}`,
-          opts,
-        );
-      } else {
-        drawable = gen.polygon(
-          [
-            [topX, topY],
-            [rightX, rightY],
-            [bottomX, bottomY],
-            [leftX, leftY],
-          ],
-          opts,
-        );
-      }
-      break;
-    }
-    case 'line':
-    case 'arrow': {
-      const linear = element as DrawLinearElement;
-      if (linear.points.length >= 2) {
-        const pts = linear.points.map((p) => [p[0], p[1]] as [number, number]);
-        if (pts.length === 2) {
-          drawable = gen.line(pts[0]![0], pts[0]![1], pts[1]![0], pts[1]![1], opts);
-        } else if (element.roundness) {
-          drawable = gen.curve(pts, opts);
-        } else {
-          drawable = gen.linearPath(pts, opts);
-        }
-      }
-      break;
-    }
-    default:
-      return null;
-  }
-
-  if (drawable) {
-    cache.set(key, drawable);
-    if (cache.size > 5000) {
-      const firstKey = cache.keys().next().value;
-      if (firstKey) cache.delete(firstKey);
-    }
-  }
-
-  return drawable;
-}
-
-export function drawElementOnCanvas(
-  rc: RoughCanvas,
-  ctx: CanvasRenderingContext2D,
-  element: DrawElement,
-): void {
-  ctx.save();
-  ctx.translate(element.x, element.y);
-
-  if (element.angle !== 0) {
-    const cx = element.width / 2;
-    const cy = element.height / 2;
-    ctx.translate(cx, cy);
-    ctx.rotate(element.angle);
-    ctx.translate(-cx, -cy);
-  }
-
-  ctx.globalAlpha = element.opacity / 100;
-
-  if (element.type === 'freedraw') {
-    drawFreeDraw(ctx, element as DrawFreeDrawElement);
-  } else if (element.type === 'text') {
-    // text is rendered separately
-  } else if (element.type === 'image') {
-    // image is rendered separately
-  } else if (element.type === 'arrow' && (element as DrawArrowElement).elbowed) {
-    drawElbowedArrowPath(ctx, element as DrawArrowElement);
-    drawArrowheads(ctx, element as DrawArrowElement);
-  } else {
-    const drawable = generateRoughDrawable(element);
-    if (drawable) {
-      rc.draw(drawable);
-    }
-
-    if (element.type === 'arrow' || element.type === 'line') {
-      const linear = element as DrawLinearElement;
-      if (linear.startArrowhead || linear.endArrowhead) {
-        drawArrowheads(ctx, element as DrawArrowElement);
-      }
-    }
-  }
-
-  ctx.restore();
-}
-
-export function getFreeDrawOutlinePoints(
-  element: DrawFreeDrawElement,
-): number[][] {
-  const inputPoints = element.simulatePressure
-    ? element.points
-    : element.points.length
-      ? element.points.map(([x, y], i) => [x, y, element.pressures[i] ?? 0.5])
-      : [[0, 0, 0.5]];
-
-  return getStroke(inputPoints as number[][], {
-    simulatePressure: element.simulatePressure,
-    size: element.strokeWidth * 4.25,
-    thinning: 0.6,
-    smoothing: 0.5,
-    streamline: 0.5,
-    easing: (t: number) => Math.sin((t * Math.PI) / 2),
-    last: true,
-  });
-}
-
-function med(a: number[], b: number[]): number[] {
-  return [(a[0]! + b[0]!) / 2, (a[1]! + b[1]!) / 2];
-}
-
-export function getSvgPathFromStroke(points: number[][]): string {
-  if (!points.length) return '';
-
-  const max = points.length - 1;
-  return points
-    .reduce(
-      (acc: (string | number[])[], point, i, arr) => {
-        if (i === max) {
-          acc.push(point, med(point, arr[0]!), 'L', arr[0]!, 'Z');
-        } else {
-          acc.push(point, med(point, arr[i + 1]!));
-        }
-        return acc;
-      },
-      ['M', points[0]!, 'Q'],
-    )
-    .join(' ')
-    .replace(/(\.\d{2})\d+/g, '$1');
-}
-
-function drawFreeDraw(
-  ctx: CanvasRenderingContext2D,
-  element: DrawFreeDrawElement,
-): void {
-  if (element.points.length < 2) return;
-
-  const outlinePoints = getFreeDrawOutlinePoints(element);
-  const pathData = getSvgPathFromStroke(outlinePoints);
-  if (!pathData) return;
-
-  const path = new Path2D(pathData);
-  ctx.fillStyle = element.strokeColor;
-  ctx.fill(path);
-}
-
-function drawArrowheads(
-  ctx: CanvasRenderingContext2D,
-  element: DrawArrowElement,
-): void {
-  if (element.points.length < 2) return;
-
-  ctx.strokeStyle = element.strokeColor;
-  ctx.fillStyle = element.strokeColor;
-  ctx.lineWidth = element.strokeWidth;
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-
-  if (element.startArrowhead) {
-    const p0 = element.points[0]!;
-    const p1 = element.points[1]!;
-    const angle = Math.atan2(p0[1] - p1[1], p0[0] - p1[0]);
-    drawSingleArrowhead(ctx, p0[0], p0[1], angle, element.startArrowhead, element.strokeWidth);
-  }
-
-  if (element.endArrowhead) {
-    const lastIdx = element.points.length - 1;
-    const pLast = element.points[lastIdx]!;
-    const pPrev = element.points[lastIdx - 1]!;
-    const angle = Math.atan2(pLast[1] - pPrev[1], pLast[0] - pPrev[0]);
-    drawSingleArrowhead(ctx, pLast[0], pLast[1], angle, element.endArrowhead, element.strokeWidth);
-  }
-}
-
-function drawSingleArrowhead(
-  ctx: CanvasRenderingContext2D,
-  tipX: number,
-  tipY: number,
-  angle: number,
-  style: Arrowhead,
-  strokeWidth: number,
-): void {
-  const arrowLen = strokeWidth * 4 + 8;
-  const arrowAngle = Math.PI / 6;
-  const radius = strokeWidth * 2 + 4;
-
-  switch (style) {
-    case 'arrow': {
-      ctx.beginPath();
-      ctx.moveTo(
-        tipX - arrowLen * Math.cos(angle - arrowAngle),
-        tipY - arrowLen * Math.sin(angle - arrowAngle),
-      );
-      ctx.lineTo(tipX, tipY);
-      ctx.lineTo(
-        tipX - arrowLen * Math.cos(angle + arrowAngle),
-        tipY - arrowLen * Math.sin(angle + arrowAngle),
-      );
-      ctx.stroke();
-      break;
-    }
-    case 'triangle': {
-      ctx.beginPath();
-      ctx.moveTo(tipX, tipY);
-      ctx.lineTo(
-        tipX - arrowLen * Math.cos(angle - arrowAngle),
-        tipY - arrowLen * Math.sin(angle - arrowAngle),
-      );
-      ctx.lineTo(
-        tipX - arrowLen * Math.cos(angle + arrowAngle),
-        tipY - arrowLen * Math.sin(angle + arrowAngle),
-      );
-      ctx.closePath();
-      ctx.fill();
-      ctx.stroke();
-      break;
-    }
-    case 'triangle_outline': {
-      ctx.beginPath();
-      ctx.moveTo(tipX, tipY);
-      ctx.lineTo(
-        tipX - arrowLen * Math.cos(angle - arrowAngle),
-        tipY - arrowLen * Math.sin(angle - arrowAngle),
-      );
-      ctx.lineTo(
-        tipX - arrowLen * Math.cos(angle + arrowAngle),
-        tipY - arrowLen * Math.sin(angle + arrowAngle),
-      );
-      ctx.closePath();
-      ctx.stroke();
-      break;
-    }
-    case 'bar': {
-      const perpAngle = angle + Math.PI / 2;
-      ctx.beginPath();
-      ctx.moveTo(
-        tipX + radius * Math.cos(perpAngle),
-        tipY + radius * Math.sin(perpAngle),
-      );
-      ctx.lineTo(
-        tipX - radius * Math.cos(perpAngle),
-        tipY - radius * Math.sin(perpAngle),
-      );
-      ctx.stroke();
-      break;
-    }
-    case 'circle': {
-      ctx.beginPath();
-      ctx.arc(
-        tipX - radius * Math.cos(angle),
-        tipY - radius * Math.sin(angle),
-        radius,
-        0,
-        Math.PI * 2,
-      );
-      ctx.fill();
-      ctx.stroke();
-      break;
-    }
-    case 'circle_outline': {
-      ctx.beginPath();
-      ctx.arc(
-        tipX - radius * Math.cos(angle),
-        tipY - radius * Math.sin(angle),
-        radius,
-        0,
-        Math.PI * 2,
-      );
-      ctx.stroke();
-      break;
-    }
-    case 'diamond': {
-      const dLen = radius * 1.4;
-      const cx = tipX - dLen * Math.cos(angle);
-      const cy = tipY - dLen * Math.sin(angle);
-      ctx.beginPath();
-      ctx.moveTo(tipX, tipY);
-      ctx.lineTo(
-        cx + radius * Math.cos(angle + Math.PI / 2),
-        cy + radius * Math.sin(angle + Math.PI / 2),
-      );
-      ctx.lineTo(
-        cx - dLen * Math.cos(angle) + tipX - cx,
-        cy - dLen * Math.sin(angle) + tipY - cy,
-      );
-      ctx.lineTo(
-        cx - radius * Math.cos(angle + Math.PI / 2),
-        cy - radius * Math.sin(angle + Math.PI / 2),
-      );
-      ctx.closePath();
-      ctx.fill();
-      ctx.stroke();
-      break;
-    }
-    case 'diamond_outline': {
-      const dLen2 = radius * 1.4;
-      const cx2 = tipX - dLen2 * Math.cos(angle);
-      const cy2 = tipY - dLen2 * Math.sin(angle);
-      ctx.beginPath();
-      ctx.moveTo(tipX, tipY);
-      ctx.lineTo(
-        cx2 + radius * Math.cos(angle + Math.PI / 2),
-        cy2 + radius * Math.sin(angle + Math.PI / 2),
-      );
-      ctx.lineTo(
-        cx2 - dLen2 * Math.cos(angle) + tipX - cx2,
-        cy2 - dLen2 * Math.sin(angle) + tipY - cy2,
-      );
-      ctx.lineTo(
-        cx2 - radius * Math.cos(angle + Math.PI / 2),
-        cy2 - radius * Math.sin(angle + Math.PI / 2),
-      );
-      ctx.closePath();
-      ctx.stroke();
-      break;
-    }
-  }
-}
-
-/**
- * Draw an elbowed (orthogonal) arrow path as straight line segments.
- */
-function drawElbowedArrowPath(
-  ctx: CanvasRenderingContext2D,
-  element: DrawArrowElement,
-): void {
-  if (element.points.length < 2) return;
-
-  ctx.strokeStyle = element.strokeColor;
-  ctx.lineWidth = element.strokeWidth;
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-
-  const dash = getLineDash(element.strokeStyle);
-  if (dash) ctx.setLineDash(dash);
-
-  ctx.beginPath();
-  ctx.moveTo(element.points[0]![0], element.points[0]![1]);
-  for (let i = 1; i < element.points.length; i++) {
-    ctx.lineTo(element.points[i]![0], element.points[i]![1]);
-  }
-  ctx.stroke();
-
-  if (dash) ctx.setLineDash([]);
-}
-
-export function clearShapeCache(): void {
-  cache.clear();
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/transform-handles.ts b/web/apps/web-ele/src/components/zq-draw/elements/transform-handles.ts
deleted file mode 100644
index fa6d07e..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/transform-handles.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-import type {
-  DrawElement,
-  DrawLinearElement,
-  TransformHandleType,
-  LocalPoint,
-} from '../types';
-import { TRANSFORM_HANDLE_SIZE, ROTATION_HANDLE_OFFSET } from '../constants';
-import { pointRotate } from '../math/point';
-import type { Point } from '../math/types';
-import { getLinearElementLocalBounds } from './bounds';
-
-export interface TransformHandle {
-  type: TransformHandleType;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface LinearPointHandle {
-  index: number;
-  x: number;
-  y: number;
-  size: number;
-}
-
-function isLinearElement(el: DrawElement): el is DrawLinearElement {
-  return el.type === 'line' || el.type === 'arrow';
-}
-
-function rotateLinearPoint(
-  element: DrawLinearElement,
-  px: number,
-  py: number,
-): [number, number] {
-  if (element.angle === 0) return [px, py];
-  const cx = element.x + element.width / 2;
-  const cy = element.y + element.height / 2;
-  return pointRotate([px, py], element.angle, [cx, cy]);
-}
-
-export function getLinearPointHandles(
-  element: DrawElement,
-  zoom: number,
-): LinearPointHandle[] {
-  if (!isLinearElement(element)) return [];
-
-  const size = TRANSFORM_HANDLE_SIZE / zoom;
-  return element.points.map((pt: LocalPoint, index: number) => {
-    const [rx, ry] = rotateLinearPoint(element, element.x + pt[0], element.y + pt[1]);
-    return { index, x: rx, y: ry, size };
-  });
-}
-
-export function getLinearMidpointHandles(
-  element: DrawElement,
-  zoom: number,
-): LinearPointHandle[] {
-  if (!isLinearElement(element)) return [];
-  if (element.points.length < 2) return [];
-
-  const size = (TRANSFORM_HANDLE_SIZE * 0.7) / zoom;
-  const midpoints: LinearPointHandle[] = [];
-
-  for (let i = 0; i < element.points.length - 1; i++) {
-    const p1 = element.points[i]!;
-    const p2 = element.points[i + 1]!;
-    const mx = element.x + (p1[0] + p2[0]) / 2;
-    const my = element.y + (p1[1] + p2[1]) / 2;
-    const [rx, ry] = rotateLinearPoint(element, mx, my);
-    midpoints.push({ index: i, x: rx, y: ry, size });
-  }
-
-  return midpoints;
-}
-
-export function getLinearPointIndexAtPosition(
-  element: DrawElement,
-  sceneX: number,
-  sceneY: number,
-  zoom: number,
-): number | null {
-  const handles = getLinearPointHandles(element, zoom);
-  const threshold = (TRANSFORM_HANDLE_SIZE / zoom) * 1.5;
-
-  for (const h of handles) {
-    if (Math.hypot(sceneX - h.x, sceneY - h.y) <= threshold) {
-      return h.index;
-    }
-  }
-  return null;
-}
-
-export function getLinearMidpointIndexAtPosition(
-  element: DrawElement,
-  sceneX: number,
-  sceneY: number,
-  zoom: number,
-): number | null {
-  const handles = getLinearMidpointHandles(element, zoom);
-  const threshold = (TRANSFORM_HANDLE_SIZE / zoom) * 1.5;
-
-  for (const h of handles) {
-    if (Math.hypot(sceneX - h.x, sceneY - h.y) <= threshold) {
-      return h.index;
-    }
-  }
-  return null;
-}
-
-export function getTransformHandles(
-  element: DrawElement,
-  zoom: number,
-  omitSides: Partial<Record<TransformHandleType, boolean>> = DEFAULT_OMIT_SIDES,
-): TransformHandle[] {
-  const isLinear = isLinearElement(element);
-
-  if (isLinear) {
-    const linear = element as DrawLinearElement;
-    if (!linear.points || linear.points.length <= 2) {
-      return [];
-    }
-  }
-
-  const size = TRANSFORM_HANDLE_SIZE / zoom;
-  const halfSize = size / 2;
-  const pad = SELECTION_PADDING / zoom;
-
-  let x1: number, y1: number, x2: number, y2: number, cx: number, cy: number;
-  let effectiveAngle: number;
-
-  if (isLinear) {
-    const [bx1, by1, bx2, by2] = getLinearElementLocalBounds(element as DrawLinearElement);
-    x1 = bx1 - pad;
-    y1 = by1 - pad;
-    x2 = bx2 + pad;
-    y2 = by2 + pad;
-    cx = element.x + element.width / 2;
-    cy = element.y + element.height / 2;
-    effectiveAngle = element.angle;
-  } else {
-    const { x, y, width, height } = element;
-    x1 = x - pad;
-    y1 = y - pad;
-    x2 = x + width + pad;
-    y2 = y + height + pad;
-    cx = x + width / 2;
-    cy = y + height / 2;
-    effectiveAngle = element.angle;
-  }
-
-  const allHandles: TransformHandle[] = [];
-
-  if (!omitSides.nw) allHandles.push({ type: 'nw', x: x1 - halfSize, y: y1 - halfSize, width: size, height: size });
-  if (!omitSides.ne) allHandles.push({ type: 'ne', x: x2 - halfSize, y: y1 - halfSize, width: size, height: size });
-  if (!omitSides.sw) allHandles.push({ type: 'sw', x: x1 - halfSize, y: y2 - halfSize, width: size, height: size });
-  if (!omitSides.se) allHandles.push({ type: 'se', x: x2 - halfSize, y: y2 - halfSize, width: size, height: size });
-  if (!omitSides.n) allHandles.push({ type: 'n', x: cx - halfSize, y: y1 - halfSize, width: size, height: size });
-  if (!omitSides.s) allHandles.push({ type: 's', x: cx - halfSize, y: y2 - halfSize, width: size, height: size });
-  if (!omitSides.w) allHandles.push({ type: 'w', x: x1 - halfSize, y: cy - halfSize, width: size, height: size });
-  if (!omitSides.e) allHandles.push({ type: 'e', x: x2 - halfSize, y: cy - halfSize, width: size, height: size });
-
-  if (!omitSides.rotation) {
-    const rotOffset = ROTATION_HANDLE_OFFSET / zoom;
-    allHandles.push({
-      type: 'rotation',
-      x: cx - halfSize,
-      y: y1 - rotOffset - halfSize,
-      width: size,
-      height: size,
-    });
-  }
-
-  if (effectiveAngle !== 0) {
-    const center: Point = [cx, cy];
-    return allHandles.map((h) => {
-      const hCenter: Point = [h.x + h.width / 2, h.y + h.height / 2];
-      const rotated = pointRotate(hCenter, effectiveAngle, center);
-      return {
-        ...h,
-        x: rotated[0] - h.width / 2,
-        y: rotated[1] - h.height / 2,
-      };
-    });
-  }
-
-  return allHandles;
-}
-
-export const DEFAULT_OMIT_SIDES: Partial<Record<TransformHandleType, boolean>> = {
-  n: true,
-  s: true,
-  e: true,
-  w: true,
-};
-
-export const SELECTION_PADDING = 4;
-
-export function getTransformHandleAtPoint(
-  element: DrawElement,
-  point: [number, number],
-  zoom: number,
-): TransformHandleType | null {
-  const handles = getTransformHandles(element, zoom);
-  const threshold = (TRANSFORM_HANDLE_SIZE / zoom) * 1.5;
-
-  for (const handle of handles) {
-    const hx = handle.x + handle.width / 2;
-    const hy = handle.y + handle.height / 2;
-    const dx = point[0] - hx;
-    const dy = point[1] - hy;
-    if (Math.hypot(dx, dy) <= threshold) {
-      return handle.type;
-    }
-  }
-
-  return null;
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/elements/zindex.ts b/web/apps/web-ele/src/components/zq-draw/elements/zindex.ts
deleted file mode 100644
index a8fb84f..0000000
--- a/web/apps/web-ele/src/components/zq-draw/elements/zindex.ts
+++ /dev/null
@@ -1,121 +0,0 @@
-import type { Scene } from '../core/scene';
-import type { DrawElement } from '../types';
-
-/**
- * Collect all indices that must move together with the selected elements:
- * same group members and bound text elements.
- */
-function getIndicesToMove(
-  elements: readonly DrawElement[],
-  selectedIds: Set<string>,
-): Set<number> {
-  const indices = new Set<number>();
-  const idsToInclude = new Set<string>(selectedIds);
-
-  for (const id of selectedIds) {
-    const el = elements.find((e) => e.id === id);
-    if (!el) continue;
-    for (const gid of el.groupIds) {
-      for (let i = 0; i < elements.length; i++) {
-        if (elements[i]!.groupIds.includes(gid)) {
-          idsToInclude.add(elements[i]!.id);
-        }
-      }
-    }
-    if (el.boundElements) {
-      for (const bound of el.boundElements) {
-        idsToInclude.add(bound.id);
-      }
-    }
-  }
-
-  for (let i = 0; i < elements.length; i++) {
-    if (idsToInclude.has(elements[i]!.id)) {
-      indices.add(i);
-    }
-  }
-
-  return indices;
-}
-
-export function moveOneRight(
-  elements: readonly DrawElement[],
-  selectedIds: Record<string, true>,
-  scene: Scene,
-): void {
-  const idSet = new Set(Object.keys(selectedIds));
-  const arr = [...elements];
-  const toMove = getIndicesToMove(arr, idSet);
-  const sortedIndices = [...toMove].sort((a, b) => b - a);
-
-  for (const idx of sortedIndices) {
-    if (idx >= arr.length - 1) continue;
-    const nextIdx = idx + 1;
-    if (toMove.has(nextIdx)) continue;
-    [arr[idx], arr[nextIdx]] = [arr[nextIdx]!, arr[idx]!];
-  }
-
-  scene.replaceAllElements(arr);
-}
-
-export function moveOneLeft(
-  elements: readonly DrawElement[],
-  selectedIds: Record<string, true>,
-  scene: Scene,
-): void {
-  const idSet = new Set(Object.keys(selectedIds));
-  const arr = [...elements];
-  const toMove = getIndicesToMove(arr, idSet);
-  const sortedIndices = [...toMove].sort((a, b) => a - b);
-
-  for (const idx of sortedIndices) {
-    if (idx <= 0) continue;
-    const prevIdx = idx - 1;
-    if (toMove.has(prevIdx)) continue;
-    [arr[idx], arr[prevIdx]] = [arr[prevIdx]!, arr[idx]!];
-  }
-
-  scene.replaceAllElements(arr);
-}
-
-export function moveAllRight(
-  elements: readonly DrawElement[],
-  selectedIds: Record<string, true>,
-  scene: Scene,
-): void {
-  const idSet = new Set(Object.keys(selectedIds));
-  const toMove = getIndicesToMove(elements, idSet);
-  const moving: DrawElement[] = [];
-  const staying: DrawElement[] = [];
-
-  for (let i = 0; i < elements.length; i++) {
-    if (toMove.has(i)) {
-      moving.push(elements[i]!);
-    } else {
-      staying.push(elements[i]!);
-    }
-  }
-
-  scene.replaceAllElements([...staying, ...moving]);
-}
-
-export function moveAllLeft(
-  elements: readonly DrawElement[],
-  selectedIds: Record<string, true>,
-  scene: Scene,
-): void {
-  const idSet = new Set(Object.keys(selectedIds));
-  const toMove = getIndicesToMove(elements, idSet);
-  const moving: DrawElement[] = [];
-  const staying: DrawElement[] = [];
-
-  for (let i = 0; i < elements.length; i++) {
-    if (toMove.has(i)) {
-      moving.push(elements[i]!);
-    } else {
-      staying.push(elements[i]!);
-    }
-  }
-
-  scene.replaceAllElements([...moving, ...staying]);
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2
deleted file mode 100644
index 269b2c7..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-6e066e8de2ac57ea9283adb9c24d7f0c.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-6e066e8de2ac57ea9283adb9c24d7f0c.woff2
deleted file mode 100644
index 984ce67..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-6e066e8de2ac57ea9283adb9c24d7f0c.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-dc6a8806fa96795d7b3be5026f989a17.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-dc6a8806fa96795d7b3be5026f989a17.woff2
deleted file mode 100644
index de0a8e9..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-dc6a8806fa96795d7b3be5026f989a17.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-fcb0fc02dcbee4c9846b3e2508668039.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-fcb0fc02dcbee4c9846b3e2508668039.woff2
deleted file mode 100644
index bef7d54..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/ComicShanns/ComicShanns-Regular-fcb0fc02dcbee4c9846b3e2508668039.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-349fac6ca4700ffec595a7150a0d1e1d.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-349fac6ca4700ffec595a7150a0d1e1d.woff2
deleted file mode 100644
index 3c81f0b..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-349fac6ca4700ffec595a7150a0d1e1d.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-3f2c5db56cc93c5a6873b1361d730c16.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-3f2c5db56cc93c5a6873b1361d730c16.woff2
deleted file mode 100644
index 1e9c460..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-3f2c5db56cc93c5a6873b1361d730c16.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-41b173a47b57366892116a575a43e2b6.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-41b173a47b57366892116a575a43e2b6.woff2
deleted file mode 100644
index 507c11d..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-41b173a47b57366892116a575a43e2b6.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-623ccf21b21ef6b3a0d87738f77eb071.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-623ccf21b21ef6b3a0d87738f77eb071.woff2
deleted file mode 100644
index aa49c36..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-623ccf21b21ef6b3a0d87738f77eb071.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2
deleted file mode 100644
index 98b9616..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-b9dcf9d2e50a1eaf42fc664b50a3fd0d.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-b9dcf9d2e50a1eaf42fc664b50a3fd0d.woff2
deleted file mode 100644
index 58e960c..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-b9dcf9d2e50a1eaf42fc664b50a3fd0d.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-be310b9bcd4f1a43f571c46df7809174.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-be310b9bcd4f1a43f571c46df7809174.woff2
deleted file mode 100644
index b413197..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Excalifont/Excalifont-Regular-be310b9bcd4f1a43f571c46df7809174.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2
deleted file mode 100644
index b9b1c20..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2
deleted file mode 100644
index c9f8bb0..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2
deleted file mode 100644
index 6b06971..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2
deleted file mode 100644
index c21a6ed..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2
deleted file mode 100644
index bd56dc5..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/Virgil/Virgil-Regular.woff2 b/web/apps/web-ele/src/components/zq-draw/fonts/Virgil/Virgil-Regular.woff2
deleted file mode 100644
index bf5d08c..0000000
Binary files a/web/apps/web-ele/src/components/zq-draw/fonts/Virgil/Virgil-Regular.woff2 and /dev/null differ
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/fonts.d.ts b/web/apps/web-ele/src/components/zq-draw/fonts/fonts.d.ts
deleted file mode 100644
index 3e215c3..0000000
--- a/web/apps/web-ele/src/components/zq-draw/fonts/fonts.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare module '*.woff2' {
-  const src: string;
-  export default src;
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/index.ts b/web/apps/web-ele/src/components/zq-draw/fonts/index.ts
deleted file mode 100644
index fc6936d..0000000
--- a/web/apps/web-ele/src/components/zq-draw/fonts/index.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * Font loading for zq-draw.
- *
- * Registers hand-drawn (Excalifont), normal (Nunito) and code (Comic Shanns)
- * font faces via the FontFace API so they are available for both the canvas
- * renderer and the inline text-editor overlay.
- *
- * Xiaolai is loaded via CSS @font-face from public/fonts/Xiaolai/ with
- * unicode-range subsetting so the browser only downloads CJK chunks on demand.
- *
- * Virgil is kept as a backwards-compatible alias that maps to Excalifont.
- */
-
-import './xiaolai.css';
-
-import ExcalifontLatin from './Excalifont/Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2';
-import ExcalifontLatinExt from './Excalifont/Excalifont-Regular-be310b9bcd4f1a43f571c46df7809174.woff2';
-import ExcalifontCyrillic from './Excalifont/Excalifont-Regular-b9dcf9d2e50a1eaf42fc664b50a3fd0d.woff2';
-import ExcalifontGreek from './Excalifont/Excalifont-Regular-41b173a47b57366892116a575a43e2b6.woff2';
-import ExcalifontMisc1 from './Excalifont/Excalifont-Regular-3f2c5db56cc93c5a6873b1361d730c16.woff2';
-import ExcalifontMisc2 from './Excalifont/Excalifont-Regular-349fac6ca4700ffec595a7150a0d1e1d.woff2';
-import ExcalifontDiacritics from './Excalifont/Excalifont-Regular-623ccf21b21ef6b3a0d87738f77eb071.woff2';
-
-import VirgilRegular from './Virgil/Virgil-Regular.woff2';
-
-import NunitoLatin from './Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2';
-import NunitoLatinExt from './Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2';
-import NunitoCyrillic from './Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2';
-import NunitoCyrillicExt from './Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2';
-import NunitoVietnamese from './Nunito/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2';
-
-import ComicShannsLatin from './ComicShanns/ComicShanns-Regular-279a7b317d12eb88de06167bd672b4b4.woff2';
-import ComicShannsLatinExt from './ComicShanns/ComicShanns-Regular-fcb0fc02dcbee4c9846b3e2508668039.woff2';
-import ComicShannsMisc1 from './ComicShanns/ComicShanns-Regular-dc6a8806fa96795d7b3be5026f989a17.woff2';
-import ComicShannsMisc2 from './ComicShanns/ComicShanns-Regular-6e066e8de2ac57ea9283adb9c24d7f0c.woff2';
-
-interface FontDef {
-  family: string;
-  uri: string;
-  descriptors?: FontFaceDescriptors;
-}
-
-const FONT_DEFS: FontDef[] = [
-  // Excalifont (hand-drawn, default)
-  { family: 'Excalifont', uri: ExcalifontLatin, descriptors: { unicodeRange: 'U+20-7e,U+a0-a3,U+a5-a6,U+a8-ab,U+ad-b1,U+b4,U+b6-b8,U+ba-ff,U+131,U+152-153,U+2bc,U+2c6,U+2da,U+2dc,U+304,U+308,U+2013-2014,U+2018-201a,U+201c-201e,U+2020,U+2022,U+2024-2026,U+2030,U+2039-203a,U+20ac,U+2122,U+2212' } },
-  { family: 'Excalifont', uri: ExcalifontLatinExt, descriptors: { unicodeRange: 'U+100-130,U+132-137,U+139-149,U+14c-151,U+154-17e,U+192,U+1fc-1ff,U+218-21b,U+237,U+1e80-1e85,U+1ef2-1ef3,U+2113' } },
-  { family: 'Excalifont', uri: ExcalifontCyrillic, descriptors: { unicodeRange: 'U+400-45f,U+490-491,U+2116' } },
-  { family: 'Excalifont', uri: ExcalifontGreek, descriptors: { unicodeRange: 'U+37e,U+384-38a,U+38c,U+38e-393,U+395-3a1,U+3a3-3a8,U+3aa-3cf,U+3d7' } },
-  { family: 'Excalifont', uri: ExcalifontMisc1, descriptors: { unicodeRange: 'U+2c7,U+2d8-2d9,U+2db,U+2dd,U+302,U+306-307,U+30a-30c,U+326-328,U+212e,U+2211,U+fb01-fb02' } },
-  { family: 'Excalifont', uri: ExcalifontMisc2, descriptors: { unicodeRange: 'U+462-463,U+472-475,U+4d8-4d9,U+4e2-4e3,U+4e6-4e9,U+4ee-4ef' } },
-  { family: 'Excalifont', uri: ExcalifontDiacritics, descriptors: { unicodeRange: 'U+300-301,U+303' } },
-
-  // Virgil (legacy hand-drawn, backwards compat)
-  { family: 'Virgil', uri: VirgilRegular },
-
-  // Nunito (normal / sans-serif)
-  { family: 'Nunito', uri: NunitoLatin, descriptors: { weight: '500' } },
-  { family: 'Nunito', uri: NunitoLatinExt, descriptors: { weight: '500' } },
-  { family: 'Nunito', uri: NunitoCyrillic, descriptors: { weight: '500' } },
-  { family: 'Nunito', uri: NunitoCyrillicExt, descriptors: { weight: '500' } },
-  { family: 'Nunito', uri: NunitoVietnamese, descriptors: { weight: '500' } },
-
-  // Comic Shanns (code / monospace)
-  { family: 'Comic Shanns', uri: ComicShannsLatin, descriptors: { unicodeRange: 'U+20-7e,U+a1-a6,U+a8,U+ab-ac,U+af-b1,U+b4,U+b8,U+bb-bc,U+bf-cf,U+d1-d7,U+d9-de,U+e0-ef,U+f1-f7,U+f9-ff,U+131,U+152-153,U+2c6,U+2da,U+2dc,U+2013-2014,U+2018-201a,U+201c-201d,U+2020-2022,U+2026,U+2039-203a,U+2044,U+20ac,U+2191,U+2193,U+2212' } },
-  { family: 'Comic Shanns', uri: ComicShannsLatinExt, descriptors: { unicodeRange: 'U+100-10f,U+112-125,U+128-130,U+134-137,U+139-13c,U+141-148,U+14c-151,U+154-161,U+164-165,U+168-17f,U+1bf,U+1f7,U+218-21b,U+237,U+1e80-1e85,U+1ef2-1ef3,U+a75b' } },
-  { family: 'Comic Shanns', uri: ComicShannsMisc1, descriptors: { unicodeRange: 'U+2c7,U+2d8-2d9,U+2db,U+2dd,U+315,U+2190,U+2192,U+2200,U+2203-2204,U+2264-2265,U+f6c3' } },
-  { family: 'Comic Shanns', uri: ComicShannsMisc2, descriptors: { unicodeRange: 'U+3bb' } },
-];
-
-let _loaded = false;
-
-export async function loadDrawFonts(): Promise<void> {
-  if (_loaded) return;
-  _loaded = true;
-
-  const promises: Promise<FontFace>[] = [];
-
-  for (const def of FONT_DEFS) {
-    try {
-      const face = new FontFace(
-        def.family,
-        `url(${def.uri}) format('woff2')`,
-        {
-          display: 'swap',
-          style: 'normal',
-          weight: '400',
-          ...def.descriptors,
-        },
-      );
-      document.fonts.add(face);
-      promises.push(face.load());
-    } catch {
-      // skip individual font face errors
-    }
-  }
-
-  await Promise.allSettled(promises);
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/fonts/xiaolai.css b/web/apps/web-ele/src/components/zq-draw/fonts/xiaolai.css
deleted file mode 100644
index 7e0001d..0000000
--- a/web/apps/web-ele/src/components/zq-draw/fonts/xiaolai.css
+++ /dev/null
@@ -1,1880 +0,0 @@
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-09850c4077f3fffe707905872e0e2460.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+f9b8-fa6d,U+fe32,U+fe45-fe4f,U+ff02-ff0b,U+ff0d-ff1e,U+ff20-ff2a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-7eb9fffd1aa890d07d0f88cc82e6cfe4.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+20dd-20de,U+25ef,U+ff2b-ffbe,U+ffc2-ffc7,U+ffca-ffcf,U+ffd2-ffd7,U+ffda-ffdc,U+ffe0-ffe6,U+ffe8-ffee;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-60a3089806700d379f11827ee9843b6b.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+d7eb-d7fb,U+f900-f9b7;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-6fe5c5973cc06f74b2387a631ea36b88.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+d6f2-d7a3,U+d7b0-d7c6,U+d7cb-d7ea;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-b96d9226ce77ec94ceca043d712182e6.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+d609-d6f1;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-6ae5b42180ad70b971c91e7eefb8eba2.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+d520-d608;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-a4c34be6d42152e64b0df90bc4607f64.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+d437-d51f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-c69f61a4ab18d0488c8d1fc12e7028e8.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+d34e-d436;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-e3fcf5180fd466c8915c4e8069491054.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+d265-d34d;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-c1f94158256bb1f3bf665b053d895af9.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+d17c-d264;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-544fc28abe2c5c30e62383fd4dac255f.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+d093-d17b;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-7197d6fda6cba7c3874c53d6381ca239.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+cfaa-d092;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-70c2eb8d64e71a42a834eb857ea9df51.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+cec1-cfa9;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-069e77aac84590e2e991d0a0176d34f2.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+cdd8-cec0;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-41521fade99856108931b4768b1b2648.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+ccf1-cdd7;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-a004ddfcb26e67bd6e678c8ed19e25ce.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+cc08-ccf0;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-04b718e5623574919c8b0dea5f301444.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+cb43-cc07;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-7e4bde7e9c7f84cd34d8a845e384c746.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+ca83-cb42;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-23686f7f29da6e8008c36dd3a80c83d6.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c9a1-ca82;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-69c09cc5fa3e55c74fc4821f76909cc3.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c8b8-c9a0;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-25b7f38e18f035f96cb5e547bd2bd08c.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c7cf-c8b7;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-ba3de316d63c7e339987b16f41a0b879.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c6e6-c7ce;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-12b52b58eb3df36804b9a654ec9ee194.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c5fd-c6e5;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-b1220a3c61f85cc0408deedb4c5f57a2.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c514-c5fc;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4535823663ad81405188a528d8f2b1a2.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c42b-c513;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-3eaa538115d76932653c21d8dc28f207.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c341-c34e,U+c350-c42a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-7e929f262f30c8ee78bf398150b1a7cd.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c258-c340;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-73e309718fd16cea44b4d54a33581811.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c16f-c257;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-9eb5a99df4e76ac3363453ac9ca288b1.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+c086-c16e;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-3e63ed8162808a9e425ed80a8bc79114.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+bf9d-c085;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-cb17fc3db95f6d139afc9d31a8e93293.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+beb4-bf9c;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-c8b71798409ccc126ee264a00aadcf21.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+bdcb-beb3;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-11c345711937f0ba4b8f7b6b919c8440.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+bce2-bdca;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-e480d9c614742d05f0e78f274f1e69e6.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+bbf9-bce1;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-95429962233afd82db1c27df1500a28c.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+bb10-bbf8;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-2cf96d082d35ea3d8106851223ad0d16.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+ba27-bb0f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-2d43040e86ff03ba677f6f9c04cd0805.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+b93e-ba26;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-2a26d20a23b00898ce82f09d2ee47c3f.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+b855-b93d;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-a365e82ed54697a52f27adcea1315fe8.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+b76c-b854;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-f5d079153c99a25b9be5b8583c4cc8a7.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+b683-b76b;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-10a7ae9a371830a80c3d844acf1c02d7.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+b59a-b682;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-e4bca6cfa53e499cae0a6be4894a90e9.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+b4b1-b599;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-60a41c7e1c68f22424e6d22df544bc82.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+11fb-11ff,U+b3cd-b4b0;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-7ab2bed91166a9dca83a5ebfbe2a7f38.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+11e6-11fa,U+b2f9-b3cc;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-670ba603758d94268e8606f240a42e12.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+11d1-11e5,U+b225-b2f8;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-e656f091b9dc4709722c9f4b84d3c797.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+11bc-11d0,U+b151-b224;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-15dc6d811c9cd078f9086a740d5a1038.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+11a7-11bb,U+b07d-b150;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-f0f13b5c60e0af5553bd359f5513be1b.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+1191-11a6,U+afaa-b07c;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-8c2f33cee3993174f7e87c28e4bf42ee.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+117c-1190,U+aed6-afa9;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-761d05e3cd968cf574166867998ef06a.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+1167-117b,U+ae02-aed5;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-642b26e2e5f5fb780b51b593dbc8c851.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+1152-115e,U+1160-1166,U+ad2d-ae01;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-5572b3513ba8df57a3d5d7303ee6b11b.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+113d-1151,U+ac59-ad2c;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-3c9de2ae0ea4bc91a510942dfa4be8d2.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+1100-113c,U+9f95-9f98,U+9f9c-9f9e,U+9fa1-9fce,U+9fd0,U+a960-a97c,U+ac00-ac58;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-671a2c20b1eb9e4ef8a192833940e319.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9771-9772,U+9775,U+9777-977b,U+977d-9784,U+9786-978a,U+978c,U+978e-9790,U+9793,U+9795-9797,U+9799-979f,U+97a1-97a2,U+97a4-97aa,U+97ac,U+97ae,U+97b0-97b1,U+97b3,U+97b5-97e5,U+97e8,U+97ee-97f2,U+97f4,U+97f7-982d;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4dc6d5f188d5c96d44815cd1e81aa885.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9491,U+9496,U+9498,U+94c7,U+94cf,U+94d3-94d4,U+94da,U+94e6,U+94fb,U+951c,U+9520,U+9527,U+9533,U+953d,U+9543,U+9548,U+954b,U+9555,U+955a,U+9560,U+956e,U+9574-9575,U+9577-957e,U+9580-95e7,U+95ec,U+95ff,U+9607,U+9613,U+9618,U+961b,U+961e,U+9620,U+9623-9629,U+962b-962d,U+962f-9630,U+9637-963a,U+963e,U+9641,U+9643,U+964a,U+964e-964f,U+9651-9653,U+9656-965a,U+965c-965e,U+9660,U+9663,U+9665-9666,U+966b,U+966d-9671,U+9673,U+9678-9684,U+9687,U+9689-968a,U+968c,U+968e,U+9691-9693;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-ce4884f96f11589608b76b726a755803.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+923c-9273,U+9275-928d,U+928f-92ad,U+92af-92c7,U+92c9-92ee;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-8f476c4c99813d57cbe6eca4727388ad.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9159,U+915b-915c,U+915f-9160,U+9166-9168,U+916b,U+916d,U+9173,U+917a-917c,U+9180-9184,U+9186,U+9188,U+918a,U+918e-918f,U+9193-9199,U+919c-91a1,U+91a4-91a9,U+91ab-91ac,U+91b0-91b3,U+91b6-91b9,U+91bb-91c6,U+91c8,U+91cb,U+91d0,U+91d2-91db,U+91dd-923b;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-5935a5775af3d5c6307ac667bd9ae74e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+902b-902c,U+9030-9034,U+9037,U+9039-903a,U+903d,U+903f-9040,U+9043,U+9045-9046,U+9048-904c,U+904e,U+9054-9056,U+9059-905a,U+905c-9061,U+9064,U+9066-9067,U+9069-906c,U+906f-9073,U+9076-907c,U+907e,U+9081,U+9084-9087,U+9089-908a,U+908c-9090,U+9092,U+9094,U+9096,U+9098,U+909a,U+909c,U+909e-90a0,U+90a4-90a5,U+90a7-90a9,U+90ab,U+90ad,U+90b2,U+90b7,U+90bc-90bd,U+90bf-90c0,U+90c2-90c3,U+90c6,U+90c8-90c9,U+90cb-90cd,U+90d2,U+90d4-90d6,U+90d8-90da,U+90de-90e0,U+90e3-90e5,U+90e9-90ea,U+90ec,U+90ee,U+90f0-90f3,U+90f5-90f7,U+90f9-90fc,U+90ff-9101,U+9103,U+9105-9118,U+911a-911d,U+911f-9121,U+9124-912e,U+9130,U+9132-9138,U+913a-9142,U+9144-9145,U+9147-9148,U+9151,U+9153-9156,U+9158;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-79f007c1c6d07557120982951ea67998.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8f03-8f65,U+8f6a,U+8f80,U+8f8c,U+8f92,U+8f9d,U+8fa0-8fa2,U+8fa4-8fa7,U+8faa,U+8fac-8faf,U+8fb2-8fb5,U+8fb7-8fb8,U+8fba-8fbc,U+8fbf-8fc0,U+8fc3,U+8fc6,U+8fc9-8fcd,U+8fcf,U+8fd2,U+8fd6-8fd7,U+8fda,U+8fe0-8fe1,U+8fe3,U+8fe7,U+8fec,U+8fef,U+8ff1-8ff2,U+8ff4-8ff6,U+8ffa-8ffc,U+8ffe-8fff,U+9007-9008,U+900c,U+900e,U+9013,U+9015,U+9018-9019,U+901c,U+9023-9025,U+9027-902a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-bafff7a14c27403dcc6cf1432e8ea836.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8d03-8d1c,U+8d20,U+8d51-8d52,U+8d57,U+8d5f,U+8d65,U+8d68-8d6a,U+8d6c,U+8d6e-8d6f,U+8d71-8d72,U+8d78-8d80,U+8d82-8d83,U+8d86-8d89,U+8d8c-8d90,U+8d92-8d93,U+8d95-8d9e,U+8da0-8da2,U+8da4-8db0,U+8db2,U+8db6-8db7,U+8db9,U+8dbb,U+8dbd,U+8dc0-8dc2,U+8dc5,U+8dc7-8dca,U+8dcd,U+8dd0,U+8dd2-8dd5,U+8dd8-8dd9,U+8ddc,U+8de0-8de2,U+8de5-8de7,U+8de9,U+8ded-8dee,U+8df0-8df2,U+8df4,U+8df6,U+8dfc,U+8dfe-8e04,U+8e06-8e08,U+8e0b,U+8e0d-8e0e,U+8e10-8e13,U+8e15-8e1c,U+8e20-8e21,U+8e24-8e28,U+8e2b,U+8e2d,U+8e30,U+8e32-8e34,U+8e36-8e38,U+8e3b-8e3c,U+8e3e-8e3f,U+8e43,U+8e45-8e46;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-543fa46ace099a7099dad69123399400.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8bea,U+8c09,U+8c1e,U+8c38-8c40,U+8c42-8c45,U+8c48,U+8c4a-8c4b,U+8c4d-8c54,U+8c56-8c59,U+8c5b-8c60,U+8c63-8c69,U+8c6c-8c72,U+8c74-8c77,U+8c7b-8c81,U+8c83-8c84,U+8c86-8c88,U+8c8b,U+8c8d-8c93,U+8c95-8c97,U+8c99-8d02;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4ddc14ed3eb0c3e46364317dfc0144a3.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8a64-8a78,U+8a7a-8a88,U+8a8b-8a92,U+8a94-8b06,U+8b08-8b1b;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-0fa55a080fcd0f9dc2e0b0058b793df8.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8987-89c0,U+89c3,U+89cd,U+89d3-89d5,U+89d7-89d9,U+89db,U+89dd,U+89df-89e2,U+89e4,U+89e7-89ea,U+89ec-89ee,U+89f0-89f2,U+89f4-89ff,U+8a01-8a06,U+8a08-8a3d,U+8a3f-8a47,U+8a49-8a63;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-66493ba5a8367f2928812f446f47b56a.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+87e3-87e4,U+87e6-87e9,U+87eb-87ed,U+87ef-87f8,U+87fa-87fd,U+87ff-8802,U+8804-8809,U+880b-8812,U+8814,U+8817-881a,U+881c-8820,U+8823-8831,U+8833-8838,U+883a-883b,U+883d-883f,U+8841-8843,U+8846-884b,U+884e-8853,U+8855-8856,U+8858,U+885a-8860,U+8866-8867,U+886a,U+886d,U+886f,U+8871,U+8873-8876,U+8878-887c,U+8880,U+8883,U+8886-8887,U+8889-888a,U+888c,U+888e-8891,U+8893-8895,U+8897-889b,U+889d-88a1,U+88a3,U+88a5-88aa,U+88ac,U+88ae-88b0,U+88b2-88b6,U+88b8-88bb;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-57862b464a55b18c7bf234ce22907d73.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+86e7-86e8,U+86ea-86ec,U+86ef,U+86f5-86f7,U+86fa-86fd,U+86ff,U+8701,U+8704-8706,U+870b-870c,U+870e-8711,U+8714,U+8716,U+8719,U+871b,U+871d,U+871f-8720,U+8724,U+8726-8728,U+872a-872d,U+872f-8730,U+8732-8733,U+8735-8736,U+8738-873a,U+873c-873d,U+8740-8746,U+874a-874b,U+874d,U+874f-8752,U+8754-8756,U+8758,U+875a-875f,U+8761-8762,U+8766-876d,U+876f,U+8771-8773,U+8775,U+8777-877a,U+877f-8781,U+8784,U+8786-8787,U+8789-878a,U+878c,U+878e-8792,U+8794-8796,U+8798-879e,U+87a0-87a7,U+87a9-87aa,U+87ae,U+87b0-87b2,U+87b4,U+87b6-87b9,U+87bb-87bc,U+87be-87bf,U+87c1-87c5,U+87c7-87c9,U+87cc-87d0,U+87d4-87da,U+87dc-87df,U+87e1-87e2;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-8d3bcabb847b56243b16afe62adaaf21.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8604,U+8606-8610,U+8612-8615,U+8617-8626,U+8628,U+862a-8637,U+8639-863b,U+863d-864c,U+8652-8653,U+8655-8659,U+865b-865d,U+865f-8661,U+8663-866a,U+866d,U+866f-8670,U+8672-8678,U+8683-8689,U+868e-8692,U+8694,U+8696-869b,U+869e-86a2,U+86a5-86a6,U+86ab,U+86ad-86ae,U+86b2-86b3,U+86b7-86b9,U+86bb-86bf,U+86c1-86c3,U+86c5,U+86c8,U+86cc-86cd,U+86d2-86d3,U+86d5-86d7,U+86da,U+86dc-86dd,U+86e0-86e3,U+86e5-86e6;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-2b77e8ebfb2367ab2662396a60e7d320.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8456,U+8458,U+845d-8460,U+8462,U+8464-8468,U+846a,U+846e-8470,U+8472,U+8474,U+8477,U+8479,U+847b-8481,U+8483-8486,U+848a,U+848d,U+848f-8496,U+8498,U+849a-849b,U+849d-84a0,U+84a2-84ae,U+84b0-84b1,U+84b3,U+84b5-84b7,U+84bb-84bc,U+84be,U+84c0,U+84c2-84c3,U+84c5-84c8,U+84cb-84cc,U+84ce-84cf,U+84d2,U+84d4-84d5,U+84d7-84dc,U+84de,U+84e1-84e2,U+84e4,U+84e7-84eb,U+84ed-84ef,U+84f1-84fb,U+84fd-84fe,U+8500-850b,U+850d-8510,U+8512,U+8514-8516,U+8518-8519,U+851b-851e,U+8520,U+8522-852a,U+852d-8536,U+853e-8542,U+8544-8547,U+854b-854f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-0b5d723fdc4e249c140f0909e87d03b4.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+82c2-82c3,U+82c5-82c6,U+82c9,U+82d0,U+82d6,U+82d9-82da,U+82dd,U+82e2,U+82e7-82ea,U+82ec-82ee,U+82f0,U+82f2-82f3,U+82f5-82f6,U+82f8,U+82fa,U+82fc-8300,U+830a-830b,U+830d,U+8310,U+8312-8313,U+8316,U+8318-8319,U+831d-8326,U+8329-832a,U+832e,U+8330,U+8332,U+8337,U+833b,U+833d-833f,U+8341-8342,U+8344-8345,U+8348,U+834a-834e,U+8353,U+8355-8359,U+835d,U+8362,U+8370-8376,U+8379-837a,U+837e-8384,U+8387-8388,U+838a-838d,U+838f-8391,U+8394-8397,U+8399-839a,U+839d,U+839f,U+83a1-83a7,U+83ac-83af,U+83b5,U+83bb,U+83be-83bf,U+83c2-83c4,U+83c6,U+83c8-83c9,U+83cb,U+83cd-83ce,U+83d0-83d3,U+83d5,U+83d7,U+83d9-83db,U+83de,U+83e2-83e4,U+83e6-83e8,U+83eb-83ef,U+83f3-83f7,U+83fa-83fc,U+83fe-8400,U+8402,U+8405,U+8407-840a,U+8410,U+8412-8417,U+8419-841b,U+841e-8423,U+8429-8430,U+8432-8437,U+8439-843b,U+843e-8445,U+8447-8450,U+8452-8455;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-cdbce89e82cc1ab53a2decbf5819278f.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+81a4-81a5,U+81a7,U+81a9,U+81ab-81b2,U+81b4-81b9,U+81bc-81bf,U+81c4-81c5,U+81c7-81c9,U+81cb,U+81cd-81e2,U+81e4-81e6,U+81e8-81e9,U+81eb,U+81ee-81f2,U+81f5-81fa,U+81fd,U+81ff,U+8203,U+8207-820b,U+820e-820f,U+8211,U+8213,U+8215-821a,U+821d,U+8220,U+8224-8227,U+8229,U+822e,U+8232,U+823a,U+823c-823d,U+823f-8243,U+8245-8246,U+8248,U+824a,U+824c-824e,U+8250-8257,U+8259,U+825b-825e,U+8260-8267,U+8269-826d,U+8271,U+8275-8278,U+827b-827c,U+8280-8281,U+8283,U+8285-8287,U+8289,U+828c,U+8290,U+8293-8296,U+829a-829b,U+829e,U+82a0,U+82a2-82a3,U+82a7,U+82b2,U+82b5-82b6,U+82ba-82bc,U+82bf-82c0;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-739bc1a567439c7cffcd1614644593d2.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8059,U+805b-8068,U+806b-8070,U+8072-807e,U+8081-8082,U+8085,U+8088,U+808a,U+808d-8092,U+8094-8095,U+8097,U+8099,U+809e,U+80a3,U+80a6-80a8,U+80ac,U+80b0,U+80b3,U+80b5-80b6,U+80b8-80b9,U+80bb,U+80c5,U+80c7-80cb,U+80cf-80d5,U+80d8,U+80df-80e0,U+80e2-80e3,U+80e6,U+80ee,U+80f5,U+80f7,U+80f9,U+80fb,U+80fe-8101,U+8103-8105,U+8107-8108,U+810b-810c,U+8115,U+8117,U+8119,U+811b-811d,U+811f-812b,U+812d-812e,U+8130,U+8133-8135,U+8137,U+8139-813d,U+813f-8145,U+8147,U+8149,U+814d-814f,U+8152,U+8156-8158,U+815b-815f,U+8161-8164,U+8166,U+8168,U+816a-816c,U+816f,U+8172-8173,U+8175-8178,U+8181,U+8183-8187,U+8189,U+818b-818e,U+8190,U+8192-8197,U+8199-819a,U+819e-81a2;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-72252d73220fa3cd856677888cee1635.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7f3c-7f41,U+7f43,U+7f46-7f4f,U+7f52-7f53,U+7f56,U+7f59,U+7f5b-7f5e,U+7f60,U+7f63-7f67,U+7f6b-7f6d,U+7f6f-7f70,U+7f73,U+7f75-7f78,U+7f7a-7f7d,U+7f7f-7f80,U+7f82-7f89,U+7f8b,U+7f8d,U+7f8f-7f93,U+7f95-7f99,U+7f9b-7f9c,U+7fa0,U+7fa2-7fa3,U+7fa5-7fa6,U+7fa8-7fae,U+7fb1,U+7fb3-7fb7,U+7fba-7fbb,U+7fbe,U+7fc0,U+7fc2-7fc4,U+7fc6-7fc9,U+7fcb,U+7fcd,U+7fcf-7fd3,U+7fd6-7fd7,U+7fd9-7fde,U+7fe2-7fe4,U+7fe7-7fe8,U+7fea-7fed,U+7fef,U+7ff2,U+7ff4-7ffa,U+7ffd-7fff,U+8002,U+8007-800a,U+800e-800f,U+8011,U+8013,U+801a-801b,U+801d-801f,U+8021,U+8023-8024,U+802b-8030,U+8032,U+8034,U+8039-803a,U+803c,U+803e,U+8040-8041,U+8044-8045,U+8047-8049,U+804e-8051,U+8053,U+8055-8057;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-08e0dc436ad0ad61ba5558db0674d762.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7cd8,U+7cda-7cdb,U+7cdd-7cde,U+7ce1-7ce7,U+7ce9-7cee,U+7cf0-7cf7,U+7cf9-7cfa,U+7cfc-7d09,U+7d0b-7d1f,U+7d21,U+7d23-7d26,U+7d28-7d2a,U+7d2c-7d2e,U+7d30-7d6d,U+7d6f-7d76,U+7d78-7d94;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-cf6ff4e0f491ca0cf3038187a997b9b4.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7afe,U+7b00-7b02,U+7b05,U+7b07,U+7b09,U+7b0c-7b0e,U+7b10,U+7b12-7b13,U+7b16-7b18,U+7b1a,U+7b1c-7b1d,U+7b1f,U+7b21-7b23,U+7b27,U+7b29,U+7b2d,U+7b2f-7b30,U+7b32,U+7b34-7b37,U+7b39,U+7b3b,U+7b3d,U+7b3f-7b44,U+7b46,U+7b48,U+7b4a,U+7b4d-7b4e,U+7b53,U+7b55,U+7b57,U+7b59,U+7b5c,U+7b5e-7b5f,U+7b61,U+7b63-7b6d,U+7b6f-7b70,U+7b73-7b74,U+7b76,U+7b78,U+7b7a,U+7b7c-7b7d,U+7b7f,U+7b81-7b84,U+7b86-7b8c,U+7b8e-7b8f,U+7b91-7b93,U+7b96,U+7b98-7b9b,U+7b9e-7ba0,U+7ba3-7ba5,U+7bae-7bb0,U+7bb2-7bb3,U+7bb5-7bb7,U+7bb9-7bc0,U+7bc2-7bc5,U+7bc8-7bcb,U+7bcd-7bd0,U+7bd2,U+7bd4-7bd8,U+7bdb-7bdc,U+7bde-7be0,U+7be2-7be4,U+7be7-7be9,U+7beb-7bed,U+7bef-7bf0,U+7bf2-7bf6,U+7bf8-7bfb,U+7bfd,U+7bff-7c06,U+7c08-7c0a,U+7c0d-7c0e,U+7c10-7c13;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-9cfb2a77a4e45025105ad29a1748b90d.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7a10-7a13,U+7a15-7a16,U+7a18-7a19,U+7a1b-7a1d,U+7a1f,U+7a21-7a22,U+7a24-7a32,U+7a34-7a36,U+7a38,U+7a3a,U+7a3e,U+7a40-7a45,U+7a47-7a50,U+7a52-7a56,U+7a58-7a6f,U+7a71-7a73,U+7a75,U+7a7b-7a7e,U+7a82,U+7a85,U+7a87,U+7a89-7a8c,U+7a8e-7a90,U+7a93-7a94,U+7a99-7a9b,U+7a9e,U+7aa1-7aa4,U+7aa7,U+7aa9-7aab,U+7aae-7ab2,U+7ab4-7abe,U+7ac0-7aca,U+7acc-7ad5,U+7ad7-7ad8,U+7ada-7add,U+7ae1-7ae2,U+7ae4,U+7ae7-7aec,U+7aee,U+7af0-7af8,U+7afb-7afc;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-450da755d5bcb70906e1295e559b9602.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+790d-7912,U+7914-791d,U+791f-7923,U+7925-7933,U+7935-7939,U+793d,U+793f,U+7942-7945,U+7947,U+794a-7952,U+7954-7955,U+7958-7959,U+7961,U+7963-7964,U+7966,U+7969-796c,U+796e,U+7970-7976,U+7979,U+797b-797f,U+7982-7983,U+7986-7989,U+798b-798e,U+7990-7999,U+799b-79a6,U+79a8-79b2,U+79b4-79b8,U+79bc,U+79bf,U+79c2,U+79c4-79c5,U+79c7-79c8,U+79ca,U+79cc,U+79ce-79d0,U+79d3-79d4,U+79d6-79d7,U+79d9-79de,U+79e0-79e2,U+79e5,U+79e8,U+79ea,U+79ec,U+79ee,U+79f1-79f7,U+79f9-79fa,U+79fc,U+79fe-79ff,U+7a01,U+7a04-7a05,U+7a07-7a0a,U+7a0c,U+7a0f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-0986d134c05864f5025962eef9f994a0.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+77d8-77da,U+77dd-77e1,U+77e4,U+77e6,U+77e8,U+77ea,U+77ef-77f2,U+77f4-77f5,U+77f7,U+77f9-77fc,U+7803-7808,U+780a-780b,U+780e-7810,U+7813,U+7815,U+7819,U+781b,U+781e,U+7820-7822,U+7824,U+7828,U+782a-782b,U+782e-782f,U+7831-7833,U+7835-7836,U+783d,U+783f,U+7841-7844,U+7846,U+7848-784b,U+784d,U+784f,U+7851,U+7853-7854,U+7858-785c,U+785e-7869,U+786f-7876,U+7878-787b,U+787d-7886,U+7888,U+788a-788b,U+788f-7890,U+7892,U+7894-7896,U+7899,U+789d-789e,U+78a0,U+78a2,U+78a4,U+78a6,U+78a8-78af,U+78b5-78b8,U+78ba-78bd,U+78bf-78c0,U+78c2-78c4,U+78c6-78c8,U+78cc-78cf,U+78d1-78d3,U+78d6-78d8,U+78da-78e7,U+78e9-78eb,U+78ed-78f1,U+78f3,U+78f5-78f6,U+78f8-78f9,U+78fb-7900,U+7902-7904,U+7906-790c;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-1ee544f0f1dac422545c505baa788992.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+76af-76b0,U+76b3,U+76b5-76be,U+76c0-76c1,U+76c3-76c4,U+76c7,U+76c9,U+76cb-76cc,U+76d3,U+76d5,U+76d9-76da,U+76dc-76de,U+76e0-76e4,U+76e6-76ed,U+76f0,U+76f3,U+76f5-76f7,U+76fa-76fb,U+76fd,U+76ff-7703,U+7705-7706,U+770a,U+770c,U+770e-7718,U+771b-771e,U+7721,U+7723-7725,U+7727,U+772a-772c,U+772e,U+7730-7734,U+7739,U+773b,U+773d-773f,U+7742,U+7744-7746,U+7748-774f,U+7752-7759,U+775c-7760,U+7764,U+7767,U+7769-776a,U+776d-7778,U+777a-777c,U+7781-7783,U+7786-778b,U+778f-7790,U+7793-779e,U+77a1,U+77a3-77a4,U+77a6,U+77a8,U+77ab,U+77ad-77af,U+77b1-77b2,U+77b4,U+77b6-77ba,U+77bc,U+77be,U+77c0-77cc,U+77ce-77d6;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4806e761d750087c2d734fc64596eaff.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7589-758a,U+758c-758e,U+7590,U+7593,U+7595,U+7598,U+759b-759c,U+759e,U+75a2,U+75a6-75aa,U+75ad,U+75b6-75b7,U+75ba-75bb,U+75bf-75c1,U+75c6,U+75cb-75cc,U+75ce-75d1,U+75d3,U+75d7,U+75d9-75da,U+75dc-75dd,U+75df-75e1,U+75e5,U+75e9,U+75ec-75ef,U+75f2-75f3,U+75f5-75f8,U+75fa-75fb,U+75fd-75fe,U+7602,U+7604,U+7606-7609,U+760b,U+760d-760f,U+7611-7614,U+7616,U+761a,U+761c-761e,U+7621,U+7623,U+7627-7628,U+762c,U+762e-762f,U+7631-7632,U+7636-7637,U+7639-763b,U+763d,U+7641-7642,U+7644-764b,U+764e-7653,U+7655,U+7657-765b,U+765d,U+765f-7662,U+7664-766a,U+766c-766e,U+7670-7677,U+7679-767a,U+767c,U+767f-7681,U+7683,U+7685,U+7689-768a,U+768c-768d,U+768f-7690,U+7692,U+7694-7695,U+7697-7698,U+769a-76a3,U+76a5-76ad;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-33432927cd87d40cfe393c7482bf221f.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7492-749b,U+749d,U+749f-74a6,U+74aa-74b9,U+74bb-74d1,U+74d3-74db,U+74dd,U+74df,U+74e1,U+74e5,U+74e7-74ed,U+74f0-74f3,U+74f5,U+74f8-74fe,U+7500-7503,U+7505-750c,U+750e,U+7510,U+7512,U+7514-7517,U+751b,U+751d-751e,U+7520-7524,U+7526-7527,U+752a,U+752e,U+7534,U+7536,U+7539,U+753c-753d,U+753f,U+7541-7544,U+7546-7547,U+7549-754a,U+754d,U+7550-7553,U+7555-7558,U+755d-7564,U+7567-7569,U+756b-7571,U+7573,U+7575-7577,U+757a-757e,U+7580-7582,U+7584-7585,U+7587-7588;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-be549ab72f0719d606a5c01e2c0219b6.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7372-737d,U+737f-7383,U+7385-7386,U+7388,U+738a,U+738c-738d,U+738f-7390,U+7392-7395,U+7397-739a,U+739c-739e,U+73a0-73a1,U+73a3-73a8,U+73aa,U+73ac-73ad,U+73b1,U+73b4-73b6,U+73b8-73b9,U+73bc-73bf,U+73c1,U+73c3-73c7,U+73cb-73cc,U+73ce,U+73d2-73d8,U+73da-73dd,U+73df,U+73e1-73e4,U+73e6,U+73e8,U+73ea-73ec,U+73ee-73f1,U+73f3-7402,U+7404,U+7407-7408,U+740b-740e,U+7411-7419,U+741c-7421,U+7423-7424,U+7427,U+7429,U+742b,U+742d,U+742f,U+7431-7432,U+7437-743b,U+743d-7440,U+7442-7454,U+7456,U+7458,U+745d,U+7460-746c,U+746e-746f,U+7471-7475,U+7478-747d,U+747f,U+7482,U+7484-7486,U+7488-748a,U+748c-748d,U+748f,U+7491;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-019d66dcad46dc156b162d267f981c20.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7054-705d,U+705f-706a,U+706e,U+7071-7074,U+7077,U+7079-707b,U+707d,U+7081-7084,U+7086-7088,U+708b-708d,U+708f-7091,U+7093,U+7097-7098,U+709a-709b,U+709e-70aa,U+70b0,U+70b2,U+70b4-70b6,U+70ba,U+70be-70bf,U+70c4-70c7,U+70c9,U+70cb-70d7,U+70da,U+70dc-70de,U+70e0-70e3,U+70e5,U+70ea,U+70ee,U+70f0-70f6,U+70f8,U+70fa-70fc,U+70fe-7108,U+710b-710f,U+7111-7112,U+7114,U+7117,U+711b-7125,U+7127-712e,U+7132-7135,U+7137-7144,U+7146-7149,U+714b,U+714d,U+714f-715b,U+715d,U+715f-7163,U+7165,U+7169-716d,U+716f-7171,U+7174-7177;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-b5c1596551c256e0e9cf02028595b092.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+722e-722f,U+7232-7234,U+723a,U+723c,U+723e,U+7240-7246,U+7249-724b,U+724e-7251,U+7253-7255,U+7257-7258,U+725a,U+725c,U+725e,U+7260,U+7263-7265,U+7268,U+726a-726d,U+7270-7271,U+7273-7274,U+7276-7278,U+727b-727d,U+7282-7283,U+7285-7289,U+728c,U+728e,U+7290-7291,U+7293-729e,U+72a0-72ab,U+72ae,U+72b1-72b3,U+72b5,U+72ba-72c0,U+72c5-72c7,U+72c9-72cc,U+72cf,U+72d1,U+72d3-72d6,U+72d8,U+72da-72dd,U+72df,U+72e2-72e7,U+72ea-72eb,U+72f5-72f6,U+72f9,U+72fd-7300,U+7302,U+7304-7309,U+730b-730d,U+730f-7312,U+7314,U+7318-731a,U+731f-7320,U+7323-7324,U+7326-7328,U+732d,U+732f-7330,U+7332-7333,U+7335-7336,U+733a-733d,U+7340-734c,U+734e-734f,U+7351,U+7353-7356,U+7358-735f,U+7361-736b,U+736e,U+7370-7371;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-e5f453bb04da18eed01675eeebd88bf8.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+6ec5-6ec6,U+6ec8-6eca,U+6ecc-6ece,U+6ed0,U+6ed2,U+6ed6,U+6ed8-6ed9,U+6edb-6edd,U+6ee3,U+6ee7,U+6eea-6ef3,U+6ef5-6ef8,U+6efa-6f01,U+6f03-6f05,U+6f07-6f08,U+6f0a-6f0e,U+6f10-6f12,U+6f16-6f1f,U+6f21-6f23,U+6f25-6f28,U+6f2c,U+6f2e,U+6f30,U+6f32,U+6f34-6f35,U+6f37-6f3d,U+6f3f-6f45,U+6f48-6f4a,U+6f4c,U+6f4e-6f57,U+6f59-6f5b,U+6f5d,U+6f5f-6f61,U+6f63-6f65,U+6f67-6f6c,U+6f6f-6f71,U+6f73,U+6f75-6f77,U+6f79,U+6f7b,U+6f7d-6f83,U+6f85-6f87,U+6f8a-6f8b,U+6f8f-6f9b,U+6f9d-6fa0,U+6fa2-6fa6,U+6fa8-6fb1;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-cf2cc71752631e579e35b0e423bf2638.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+6d73,U+6d75-6d76,U+6d79-6d7b,U+6d7d-6d81,U+6d83-6d84,U+6d86-6d87,U+6d8a-6d8b,U+6d8d,U+6d8f-6d90,U+6d92,U+6d96-6d9a,U+6d9c,U+6da2,U+6da5,U+6dac-6dad,U+6db0-6db1,U+6db3-6db4,U+6db6-6db7,U+6db9-6dbe,U+6dc1-6dc3,U+6dc8-6dca,U+6dcd-6dd0,U+6dd2-6dd5,U+6dd7,U+6dda-6ddc,U+6ddf,U+6de2-6de3,U+6de5,U+6de7-6dea,U+6ded,U+6def-6df0,U+6df2,U+6df4-6df6,U+6df8,U+6dfa,U+6dfd-6e04,U+6e06-6e09,U+6e0b,U+6e0f,U+6e12-6e13,U+6e15,U+6e18-6e19,U+6e1b-6e1c,U+6e1e-6e1f,U+6e22,U+6e26-6e28,U+6e2a,U+6e2c,U+6e2e,U+6e30-6e31,U+6e33,U+6e35-6e37,U+6e39,U+6e3b-6e42,U+6e45-6e4c,U+6e4f-6e52,U+6e55,U+6e57,U+6e59-6e5a,U+6e5c-6e5e,U+6e60-6e6a,U+6e6c-6e6d,U+6e6f-6e7d,U+6e80-6e82,U+6e84,U+6e87-6e88,U+6e8a-6e8e,U+6e91-6e97,U+6e99-6e9b,U+6e9d-6e9e,U+6ea0-6ea1,U+6ea3-6ea4,U+6ea6,U+6ea8-6ea9,U+6eab-6eae,U+6eb0,U+6eb3,U+6eb5,U+6eb8-6eb9,U+6ebc,U+6ebe-6ec0,U+6ec3-6ec4;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-6f3256af8454371776bc46670d33cc65.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+6bbb-6bbe,U+6bc0,U+6bc3-6bc4,U+6bc6-6bca,U+6bcc,U+6bce,U+6bd0-6bd1,U+6bd8,U+6bda,U+6bdc-6be0,U+6be2-6be9,U+6bec-6bee,U+6bf0-6bf2,U+6bf4,U+6bf6-6bf8,U+6bfa-6bfc,U+6bfe-6c04,U+6c08-6c0c,U+6c0e,U+6c12,U+6c17,U+6c1c-6c1e,U+6c20,U+6c23,U+6c25,U+6c2b-6c2d,U+6c31,U+6c33,U+6c36-6c37,U+6c39-6c3c,U+6c3e-6c3f,U+6c43-6c45,U+6c48,U+6c4b-6c4f,U+6c51-6c53,U+6c56,U+6c58-6c5a,U+6c62-6c63,U+6c65-6c67,U+6c6b-6c6f,U+6c71,U+6c73,U+6c75,U+6c77-6c78,U+6c7a-6c7c,U+6c7f-6c80,U+6c84,U+6c87,U+6c8a-6c8b,U+6c8d-6c8e,U+6c91-6c92,U+6c95-6c98,U+6c9a,U+6c9c-6c9e,U+6ca0,U+6ca2,U+6ca8,U+6cac,U+6caf-6cb0,U+6cb4-6cb7,U+6cba,U+6cc0-6cc3,U+6cc6-6cc8,U+6ccb,U+6ccd-6ccf,U+6cd1-6cd2,U+6cd8-6cda,U+6cdc-6cdd,U+6cdf,U+6ce4,U+6ce6-6ce7,U+6ce9,U+6cec-6ced,U+6cf2,U+6cf4,U+6cf9,U+6cff-6d00,U+6d02-6d03,U+6d05-6d06,U+6d08-6d0a,U+6d0d,U+6d0f-6d11,U+6d13-6d16,U+6d18,U+6d1c-6d1d,U+6d1f-6d24,U+6d26,U+6d28-6d29,U+6d2c-6d2d,U+6d2f-6d30,U+6d34,U+6d36-6d38,U+6d3a,U+6d3f-6d40,U+6d42,U+6d44,U+6d49,U+6d4c,U+6d50,U+6d55-6d58,U+6d5b,U+6d5d,U+6d5f,U+6d61-6d62,U+6d64-6d65,U+6d67-6d68,U+6d6b-6d6d,U+6d70-6d72;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-23f228f3999c01983860012330e4be08.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+6967-696a,U+696c-696d,U+696f-6970,U+6972-6976,U+697a-697b,U+697d-697f,U+6981,U+6983,U+6985,U+698a-698c,U+698e-6993,U+6996-6997,U+6999-699a,U+699d-69a6,U+69a9-69aa,U+69ac,U+69ae-69b0,U+69b2-69b3,U+69b5-69b6,U+69b8-69ba,U+69bc-69c0,U+69c2-69c9,U+69cb,U+69cd,U+69cf,U+69d1-69d3,U+69d5-69da,U+69dc-69de,U+69e1-69ec,U+69ee-69f1,U+69f3-69fc,U+69fe,U+6a00-6a09,U+6a0b-6a16,U+6a19-6a1e,U+6a20,U+6a22-6a27,U+6a29,U+6a2b-6a2e,U+6a30,U+6a32-6a34,U+6a36-6a3c,U+6a3f-6a43,U+6a45-6a46,U+6a48-6a4a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-21430ee05a1248901da8d0de08744d47.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+6830-6831,U+6834-6836,U+683a-683b,U+683f,U+6847,U+684b,U+684d,U+684f,U+6852,U+6856-685f,U+686a,U+686c-6873,U+6875,U+6878-6880,U+6882,U+6884,U+6887-688e,U+6890-6892,U+6894-6896,U+6898-68a1,U+68a3-68a5,U+68a9-68ac,U+68ae,U+68b1-68b2,U+68b4,U+68b6-68bf,U+68c1,U+68c3-68c8,U+68ca,U+68cc,U+68ce-68d1,U+68d3-68d4,U+68d6-68d7,U+68d9,U+68db-68df,U+68e1-68e2,U+68e4-68ed,U+68ef,U+68f2-68f4,U+68f6-68f8,U+68fb,U+68fd-6900,U+6902-6904,U+6906-690a,U+690c,U+690f,U+6911,U+6913-691e,U+6921-6923,U+6925-692c,U+692e-692f,U+6931-6933,U+6935-6938,U+693a-693c,U+693e,U+6940-6941,U+6943-6953,U+6955-6956,U+6958-6959,U+695b-695c,U+695f,U+6961-6962,U+6964-6965;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-5330a2119a716e4e7224ed108b085dac.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+66b8,U+66ba-66bd,U+66bf-66d8,U+66da,U+66de-66e5,U+66e7-66e8,U+66ea-66ef,U+66f1,U+66f5-66f6,U+66f8,U+66fa-66fb,U+66fd,U+6701-6707,U+670c,U+670e-670f,U+6711-6713,U+6716,U+6718-671a,U+671c,U+671e,U+6720-6725,U+6727,U+6729,U+672e,U+6730,U+6732-6733,U+6736-6739,U+673b-673c,U+673e-673f,U+6741,U+6744-6745,U+6747,U+674a-674b,U+674d,U+6752,U+6754-6755,U+6757-675b,U+675d,U+6762-6764,U+6766-6767,U+676b-676c,U+676e,U+6771,U+6774,U+6776,U+6778-677b,U+677d,U+6780,U+6782-6783,U+6785-6786,U+6788,U+678a,U+678c-678f,U+6791-6794,U+6796,U+6799,U+679b,U+679f-67a1,U+67a4,U+67a6,U+67a9,U+67ac,U+67ae,U+67b1-67b2,U+67b4,U+67b9-67c0,U+67c2,U+67c5-67ce,U+67d5-67d7,U+67db,U+67df,U+67e1,U+67e3-67e4,U+67e6-67e8,U+67ea-67eb,U+67ed-67ee,U+67f2,U+67f5-67fc,U+67fe,U+6801-6804,U+6806,U+680d,U+6810,U+6812,U+6814-6815,U+6818-681c,U+681e-6820,U+6822-6828,U+682b-682f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-cd145ce4a0ea18469358df53c207bc1b.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+6569-656a,U+656d-656f,U+6571,U+6573,U+6575-6576,U+6578-6586,U+6588-658a,U+658d-658f,U+6592,U+6594-6596,U+6598,U+659a,U+659d-659e,U+65a0,U+65a2-65a3,U+65a6,U+65a8,U+65aa,U+65ac,U+65ae,U+65b1-65b8,U+65ba-65bb,U+65be-65c0,U+65c2,U+65c7-65ca,U+65cd,U+65d0-65d1,U+65d3-65d5,U+65d8-65df,U+65e1,U+65e3-65e4,U+65ea-65eb,U+65f2-65f5,U+65f8-65f9,U+65fb-65ff,U+6601,U+6604-6605,U+6607-6609,U+660b,U+660d,U+6610-6612,U+6616-6618,U+661a-661c,U+661e,U+6621-6624,U+6626,U+6629-662c,U+662e,U+6630,U+6632-6633,U+6637-663b,U+663d,U+663f-6640,U+6642,U+6644-664a,U+664d-664e,U+6650-6651,U+6658-6659,U+665b-665e,U+6660,U+6662-6663,U+6665,U+6667,U+6669-666d,U+6671-6673,U+6675,U+6678-6679,U+667b-667d,U+667f-6681,U+6683,U+6685-6686,U+6688-668b,U+668d-6690,U+6692-6695,U+6698-669c,U+669e-66a6,U+66a9-66ad,U+66af-66b3,U+66b5-66b7;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-36925dfe329a45086cbb7fc5c20d45ac.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+5f30,U+5f32-5f38,U+5f3b,U+5f3d-5f3f,U+5f41-5f4f,U+5f51,U+5f54,U+5f59-5f5c,U+5f5e-5f60,U+5f63,U+5f65,U+5f67-5f68,U+5f6b,U+5f6e-5f6f,U+5f72,U+5f74-5f76,U+5f78,U+5f7a,U+5f7d-5f7f,U+5f83,U+5f86,U+5f8d-5f8f,U+5f91,U+5f93-5f94,U+5f96,U+5f9a-5f9b,U+5f9d-5fa0,U+5fa2-5fa7,U+5fa9,U+5fab-5fac,U+5faf-5fb4,U+5fb6,U+5fb8-5fbb,U+5fbe-5fc2,U+5fc7-5fc8,U+5fca-5fcb,U+5fce,U+5fd3-5fd5,U+5fda-5fdc,U+5fde-5fdf,U+5fe2-5fe3,U+5fe5-5fe6,U+5fe8-5fe9,U+5fec,U+5fef-5ff0,U+5ff2-5ff4,U+5ff6-5ff7,U+5ff9-5ffa,U+5ffc,U+6007-6009,U+600b-600c,U+6010-6011,U+6013,U+6017-6018,U+601a,U+601e-601f,U+6022-6024,U+602c-602e,U+6030-6034,U+6036-603a,U+603d-603e,U+6040,U+6044-604a,U+604c,U+604e-604f,U+6051,U+6053-6054,U+6056-6058,U+605b-605c,U+605e-6061,U+6065-6066,U+606e,U+6071-6072,U+6074-6075,U+6077,U+607e,U+6080-6082,U+6085-6088,U+608a-608b,U+608e-6091,U+6093,U+6095,U+6097-6099,U+609c,U+609e,U+60a1-60a2,U+60a4-60a5,U+60a7,U+60a9-60aa,U+60ae,U+60b0,U+60b3,U+60b5-60b7,U+60b9-60ba,U+60bd-60c4,U+60c7-60c9,U+60cc;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4bfaa8ffa64c5ee560aa2daba7c9cbd3.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+635a-635d,U+6360,U+6364-6366,U+6368,U+636a-636c,U+636f-6370,U+6372-6375,U+6378-6379,U+637c-637f,U+6381,U+6383-6386,U+638b,U+638d,U+6391,U+6393-6395,U+6397,U+6399-639f,U+63a1,U+63a4,U+63a6,U+63ab,U+63af,U+63b1-63b2,U+63b5-63b6,U+63b9,U+63bb,U+63bd,U+63bf-63c3,U+63c5,U+63c7-63c8,U+63ca-63cc,U+63d1,U+63d3-63d5,U+63d7-63dd,U+63df,U+63e2,U+63e4-63e8,U+63eb-63ec,U+63ee-63f1,U+63f3,U+63f5,U+63f7,U+63f9-63fc,U+63fe,U+6403-6404,U+6406-640a,U+640d-640e,U+6411-6412,U+6415-641a,U+641d,U+641f,U+6422-6425,U+6427-6429,U+642b,U+642e-6433,U+6435-6439,U+643b-643c,U+643e,U+6440,U+6442-6443,U+6449,U+644b-6451,U+6453,U+6455-6457,U+6459-645d,U+645f-6466,U+6468,U+646a-646c,U+646e-6477,U+647b-6481,U+6483,U+6486,U+6488-648f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-112c051027b2d766c19a519f6ee1f4f7.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+61c5-61c7,U+61c9,U+61cc-61d0,U+61d3,U+61d5-61e5,U+61e7-61f4,U+61f6-61fe,U+6200-6205,U+6207,U+6209,U+6213-6214,U+6219,U+621c-621e,U+6220,U+6223,U+6226-6229,U+622b,U+622d,U+622f-6232,U+6235-6236,U+6238-623c,U+6242,U+6244-6246,U+624a,U+624f-6250,U+6255-6257,U+6259-625a,U+625c-6262,U+6264-6265,U+6268,U+6271-6272,U+6274-6275,U+6277-6278,U+627a-627b,U+627d,U+6281-6283,U+6285-6288,U+628b-6290,U+6294,U+6299,U+629c-629e,U+62a3,U+62a6-62a7,U+62a9-62aa,U+62ad-62b0,U+62b2-62b4,U+62b6-62b8,U+62ba,U+62be,U+62c0-62c1,U+62c3,U+62cb,U+62cf,U+62d1,U+62d5,U+62dd-62de,U+62e0-62e1,U+62e4,U+62ea-62eb,U+62f0,U+62f2,U+62f5,U+62f8-62fb,U+6300,U+6303-6306,U+630a-630d,U+630f-6310,U+6312-6315,U+6317-6319,U+631c,U+6326-6327,U+6329,U+632c-632e,U+6330-6331,U+6333-6338,U+633b-633c,U+633e-6341,U+6344,U+6347-6348,U+634a,U+6351-6354,U+6356-6359;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-5b0ed6971aaab9c8ad563230bd5471a7.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+5dd0-5dda,U+5ddc,U+5ddf-5de0,U+5de3-5de4,U+5dea,U+5dec-5ded,U+5df0,U+5df5-5df6,U+5df8-5dfc,U+5dff-5e00,U+5e04,U+5e07,U+5e09-5e0b,U+5e0d-5e0e,U+5e12-5e13,U+5e17,U+5e1e-5e25,U+5e28-5e2c,U+5e2f-5e30,U+5e32-5e36,U+5e39-5e3a,U+5e3e-5e41,U+5e43,U+5e46-5e4b,U+5e4d-5e53,U+5e56-5e5a,U+5e5c-5e5d,U+5e5f-5e60,U+5e63-5e71,U+5e75,U+5e77,U+5e79,U+5e7e,U+5e81-5e83,U+5e85,U+5e88-5e89,U+5e8c-5e8e,U+5e92,U+5e98,U+5e9b,U+5e9d,U+5ea1-5ea4,U+5ea8-5eac,U+5eae-5eb2,U+5eb4,U+5eba-5ebd,U+5ebf-5ec8,U+5ecb-5ed0,U+5ed4-5ed5,U+5ed7-5eda,U+5edc-5ee7,U+5ee9,U+5eeb-5ef3,U+5ef5,U+5ef8-5ef9,U+5efb-5efd,U+5f05-5f07,U+5f09,U+5f0c-5f0e,U+5f10,U+5f12,U+5f14,U+5f16,U+5f19-5f1a,U+5f1c-5f1e,U+5f21-5f24,U+5f28,U+5f2b-5f2c,U+5f2e;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-98f2ad84457de7f3740d9920b8fa8667.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+60cd-60d0,U+60d2-60d4,U+60d6-60d7,U+60d9,U+60db,U+60de,U+60e1-60e5,U+60ea,U+60f1-60f2,U+60f5,U+60f7-60f8,U+60fb-60ff,U+6102-6105,U+6107,U+610a-610c,U+6110-6114,U+6116-6119,U+611b-611e,U+6121-6122,U+6125,U+6128-612a,U+612c-613e,U+6140-6147,U+6149,U+614b,U+614d,U+614f-6150,U+6152-6154,U+6156-615c,U+615e-6161,U+6163-6166,U+6169-616f,U+6171-6174,U+6176,U+6178-618a,U+618c-618d,U+618f-6193,U+6195-619c,U+619e-61a6,U+61aa-61ab,U+61ad-61b6,U+61b8-61bd,U+61bf-61c1,U+61c3-61c4;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-733171b4ffcd17ea1fe1c0ba627173bf.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+5cf4-5cfa,U+5cfc-5d01,U+5d04-5d05,U+5d08-5d0d,U+5d0f-5d13,U+5d15,U+5d17-5d1a,U+5d1c-5d1d,U+5d1f-5d23,U+5d25,U+5d28,U+5d2a-5d2c,U+5d2f-5d33,U+5d35-5d3c,U+5d3f-5d46,U+5d48-5d49,U+5d4d-5d57,U+5d59-5d5a,U+5d5c,U+5d5e-5d68,U+5d6a,U+5d6d-5d6e,U+5d70-5d73,U+5d75-5d81,U+5d83-5d98,U+5d9a-5d9c,U+5d9e-5db6,U+5db8-5dc4,U+5dc6-5dcc,U+5dce-5dcf;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-684d65f1793cac449dde5d59cb3c47fb.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+5b52,U+5b56,U+5b5e,U+5b60-5b61,U+5b67-5b68,U+5b6b,U+5b6d-5b6f,U+5b72,U+5b74,U+5b76-5b79,U+5b7b-5b7c,U+5b7e-5b7f,U+5b82,U+5b86,U+5b8a,U+5b8d-5b8e,U+5b90-5b92,U+5b94,U+5b96,U+5b9f,U+5ba7-5ba9,U+5bac-5baf,U+5bb1-5bb2,U+5bb7,U+5bba-5bbc,U+5bc0-5bc1,U+5bc3,U+5bc8-5bcb,U+5bcd-5bcf,U+5bd1,U+5bd4-5bdc,U+5be0,U+5be2-5be3,U+5be6-5be7,U+5be9-5bed,U+5bef,U+5bf1-5bf7,U+5bfd-5bfe,U+5c00,U+5c02-5c03,U+5c05,U+5c07-5c08,U+5c0b-5c0e,U+5c10,U+5c12-5c13,U+5c17,U+5c19,U+5c1b,U+5c1e-5c21,U+5c23,U+5c26,U+5c28-5c2b,U+5c2d-5c30,U+5c32-5c33,U+5c35-5c37,U+5c43-5c44,U+5c46-5c47,U+5c4c-5c4d,U+5c52-5c54,U+5c56-5c58,U+5c5a-5c5d,U+5c5f,U+5c62,U+5c64,U+5c67-5c6d,U+5c70,U+5c72-5c78,U+5c7b-5c7e,U+5c80,U+5c83-5c87,U+5c89-5c8b,U+5c8e-5c8f,U+5c92-5c93,U+5c95,U+5c9d-5ca1,U+5ca4-5ca8,U+5caa,U+5cae-5cb0,U+5cb2,U+5cb4,U+5cb6,U+5cb9-5cbc,U+5cbe,U+5cc0,U+5cc2-5cc3,U+5cc5-5cca,U+5ccc-5cd1,U+5cd3-5cd8,U+5cda-5ce0,U+5ce2-5ce3,U+5ce7,U+5ce9,U+5ceb-5cec,U+5cee-5cef,U+5cf1-5cf3;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-cbaaefaaf326668277aa24dfa93c4d28.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+593b,U+593d-5940,U+5943,U+5945-5946,U+594a,U+594c-594d,U+5950,U+5952-5953,U+5959,U+595b-595f,U+5961,U+5963-5964,U+5966-5972,U+5975,U+5977,U+597a-597c,U+597e-5980,U+5985,U+5989,U+598b-598c,U+598e-5991,U+5994-5995,U+5998,U+599a-599d,U+599f-59a2,U+59a6-59a7,U+59ac-59ad,U+59b0-59b1,U+59b3-59b8,U+59ba,U+59bc-59bd,U+59bf-59c5,U+59c7-59c9,U+59cc-59cf,U+59d5-59d6,U+59d9,U+59db,U+59de-59e2,U+59e4,U+59e6-59e7,U+59e9-59eb,U+59ed-59f8,U+59fa,U+59fc-59fe,U+5a00,U+5a02,U+5a0a-5a0b,U+5a0d-5a10,U+5a12,U+5a14-5a17,U+5a19-5a1b,U+5a1d-5a1e,U+5a21-5a22,U+5a24,U+5a26-5a28,U+5a2a-5a30,U+5a33,U+5a35,U+5a37-5a3b,U+5a3d-5a3f,U+5a41-5a45,U+5a47-5a48,U+5a4b-5a54,U+5a56-5a59,U+5a5b-5a61,U+5a63-5a66,U+5a68-5a69,U+5a6b-5a73,U+5a78-5a79,U+5a7b-5a7e,U+5a80-5a90;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-58fd02350d0bc52cf1ca3bb32ce9766e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+5a91,U+5a93-5a99,U+5a9c-5aa9,U+5aab-5ab1,U+5ab4,U+5ab6-5ab7,U+5ab9-5abd,U+5abf-5ac0,U+5ac3-5ac8,U+5aca-5acb,U+5acd-5ad1,U+5ad3,U+5ad5,U+5ad7,U+5ad9-5adb,U+5add-5adf,U+5ae2,U+5ae4-5ae5,U+5ae7-5ae8,U+5aea,U+5aec-5af0,U+5af2-5b08,U+5b0a-5b15,U+5b18-5b31,U+5b33,U+5b35-5b36,U+5b38-5b3f,U+5b41-5b4f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-7ccce86603f80a099ddb0cb21d4ae3e3.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+5843,U+5845-584b,U+584e-5850,U+5852-5853,U+5855-5857,U+5859-585d,U+585f-5864,U+5866-586a,U+586d-587d,U+587f,U+5882,U+5884,U+5886-5888,U+588a-5891,U+5894-5898,U+589b-589d,U+58a0-58a7,U+58aa-58bb,U+58bd-58c0,U+58c2-58c4,U+58c6-58d0,U+58d2-58d4,U+58d6-58e3,U+58e5-58ea,U+58ed,U+58ef,U+58f1-58f2,U+58f4-58f5,U+58f7-58f8,U+58fa-5901,U+5903,U+5905-5906,U+5908-590c,U+590e,U+5910-5913,U+5917-5918,U+591b,U+591d-591e,U+5920-5923,U+5926,U+5928,U+592c,U+5930,U+5932-5933,U+5935-5936;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-3717077e38f98d89eae729b6c14e56dc.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+56d0-56d3,U+56d5-56d6,U+56d8-56d9,U+56dc,U+56e3,U+56e5-56ea,U+56ec,U+56ee-56ef,U+56f2-56f3,U+56f6-56f8,U+56fb-56fc,U+5700-5702,U+5705,U+5707,U+570b-571b,U+571d-571e,U+5720-5722,U+5724-5727,U+572b,U+5731-5732,U+5734-5738,U+573c-573d,U+573f,U+5741,U+5743-5746,U+5748-5749,U+574b,U+5752-5756,U+5758-5759,U+5762-5763,U+5765,U+5767,U+576c,U+576e,U+5770-5772,U+5774-5775,U+5778-577a,U+577d-5781,U+5787-578a,U+578d-5791,U+5794-579a,U+579c-579f,U+57a5,U+57a8,U+57aa,U+57ac,U+57af-57b1,U+57b3,U+57b5-57b7,U+57b9-57c1,U+57c4-57ca,U+57cc-57cd,U+57d0-57d1,U+57d3,U+57d6-57d7,U+57db-57dc,U+57de,U+57e1-57e3,U+57e5-57ec,U+57ee,U+57f0-57f3,U+57f5-57f7,U+57fb-57fc,U+57fe-57ff,U+5801,U+5803-5805,U+5808-580a,U+580c,U+580e-5810,U+5812-5814,U+5816-5818,U+581a-581d,U+581f,U+5822-5823,U+5825-5829,U+582b-582f,U+5831-5834,U+5836-5842;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-dbea1af6dcd9860be40c3d18254338f5.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+55f9-55fc,U+55ff,U+5602-5607,U+560a-560b,U+560d,U+5610-5617,U+5619-561a,U+561c-561d,U+5620-5622,U+5625-5626,U+5628-562b,U+562e-5630,U+5633,U+5635,U+5637-5638,U+563a,U+563c-563e,U+5640-564b,U+564f-5653,U+5655-5656,U+565a-565b,U+565d-5661,U+5663,U+5665-5667,U+566d-5670,U+5672-5675,U+5677-567a,U+567d-5684,U+5687-568d,U+5690-5692,U+5694-56a2,U+56a4-56ae,U+56b0-56b6,U+56b8-56bb,U+56bd-56c9,U+56cb-56cf;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4a0fdb40036e87b40aa08dd30584cb85.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+5286-5287,U+5289-528f,U+5291-5292,U+5294-529a,U+529c,U+52a4-52a7,U+52ae-52b0,U+52b4-52bd,U+52c0-52c2,U+52c4-52c6,U+52c8,U+52ca,U+52cc-52cf,U+52d1,U+52d3-52d5,U+52d7,U+52d9-52de,U+52e0-52e3,U+52e5-52ef,U+52f1-52f8,U+52fb-52fd,U+5301-5304,U+5307,U+5309-530c,U+530e,U+5311-5314,U+5318,U+531b-531c,U+531e-531f,U+5322,U+5324-5325,U+5327-5329,U+532b-532d,U+532f-5338,U+533c-533d,U+5340,U+5342,U+5344,U+5346,U+534b-534d,U+5350,U+5354,U+5358-5359,U+535b,U+535d,U+5365,U+5368,U+536a,U+536c-536d,U+5372,U+5376,U+5379,U+537b-537e,U+5380-5381,U+5383,U+5387-5388,U+538a,U+538e-5394,U+5396-5397,U+5399,U+539b-539c,U+539e,U+53a0-53a1,U+53a4,U+53a7,U+53aa-53ad,U+53af-53b5,U+53b7-53ba,U+53bc-53be,U+53c0,U+53c3-53c7,U+53ce-53d0,U+53d2-53d3,U+53d5,U+53da,U+53dc-53de,U+53e1-53e2,U+53e7,U+53f4,U+53fa,U+53fe-5400,U+5402,U+5405,U+5407,U+540b,U+5414,U+5418-541a,U+541c,U+5422,U+5424-5425,U+542a,U+5430,U+5433,U+5436-5437,U+543a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-0f626226ba1272e832aea87bafd9720e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+5101-5105,U+5108-510a,U+510c-5111,U+5113-5120,U+5122-513e,U+5142,U+5147,U+514a,U+514c,U+514e-5150,U+5152-5153,U+5157-5159,U+515b,U+515d-5161,U+5163-5164,U+5166-5167,U+5169-516a,U+516f,U+5172,U+517a,U+517e-517f,U+5183-5184,U+5186-5187,U+518a-518b,U+518e-5191,U+5193-5194,U+5198,U+519a,U+519d-519f,U+51a1,U+51a3,U+51a6-51aa,U+51ad-51ae,U+51b4,U+51b8-51ba,U+51be-51bf,U+51c1-51c3,U+51c5,U+51c8,U+51ca,U+51cd-51ce,U+51d0,U+51d2-51da,U+51dc,U+51de-51df,U+51e2-51e3,U+51e5-51ea,U+51ec,U+51ee,U+51f1-51f2,U+51f4,U+51f7,U+51fe,U+5204-5205,U+5209,U+520b-520c,U+520f-5210,U+5213-5215,U+521c,U+521e-521f,U+5221-5223,U+5225-5227,U+522a,U+522c,U+522f,U+5231-5232,U+5234-5235,U+523c,U+523e,U+5244-5249,U+524b,U+524e-524f,U+5252-5253,U+5255,U+5257-525b,U+525d,U+525f-5260,U+5262-5264,U+5266,U+5268,U+526b-526e,U+5270-5271,U+5273-527c,U+527e,U+5280,U+5283-5285;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-938d90c10ff8c20386af7f242c05d6b0.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+543d,U+543f,U+5441-5442,U+5444-5445,U+5447,U+5449,U+544c-544f,U+5451,U+545a,U+545d-5461,U+5463,U+5465,U+5467,U+5469-5470,U+5474,U+5479-547a,U+547e-547f,U+5481,U+5483,U+5485,U+5487-548a,U+548d,U+5491,U+5493,U+5497-5498,U+549c,U+549e-54a2,U+54a5,U+54ae,U+54b0,U+54b2,U+54b5-54b7,U+54b9-54ba,U+54bc,U+54be,U+54c3,U+54c5,U+54ca-54cb,U+54d6,U+54d8,U+54db,U+54e0-54e4,U+54eb-54ec,U+54ef-54f1,U+54f4-54f9,U+54fb,U+54fe,U+5500,U+5502-5505,U+5508,U+550a-550e,U+5512-5513,U+5515-551a,U+551c-551f,U+5521,U+5525-5526,U+5528-5529,U+552b,U+552d,U+5532,U+5534-5536,U+5538-553b,U+553d,U+5540,U+5542,U+5545,U+5547-5548,U+554b-554f,U+5551-5554,U+5557-555b,U+555d-5560,U+5562-5563,U+5568-5569,U+556b,U+556f-5574,U+5579-557a,U+557d,U+557f,U+5585-5586,U+558c-558e,U+5590,U+5592-5593,U+5595-5597,U+559a-559b,U+559e,U+55a0-55a6,U+55a8-55b0,U+55b2,U+55b4,U+55b6,U+55b8,U+55ba,U+55bc,U+55bf-55c3,U+55c6-55c8,U+55ca-55cb,U+55ce-55d0,U+55d5,U+55d7-55db,U+55de,U+55e0,U+55e2,U+55e7,U+55e9,U+55ed-55ee,U+55f0-55f1,U+55f4,U+55f6,U+55f8;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-b6d128682ee29e471486354d486a1b90.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4fe0,U+4fe2,U+4fe4-4fe5,U+4fe7,U+4feb-4fec,U+4ff0,U+4ff2,U+4ff4-4ff7,U+4ff9,U+4ffb-4ffd,U+4fff-500b,U+500e,U+5010-5011,U+5013,U+5015-5017,U+501b,U+501d-501e,U+5020,U+5022-5024,U+5027,U+502b,U+502f-5039,U+503b,U+503d,U+503f-5042,U+5044-5046,U+5049-504b,U+504d,U+5050-5054,U+5056-5059,U+505b,U+505d-5064,U+5066-506b,U+506d-5075,U+5078-507a,U+507c-507d,U+5081-5084,U+5086-5087,U+5089-508c,U+508e-50a2,U+50a4,U+50a6,U+50aa-50ab,U+50ad-50b1,U+50b3-50b9,U+50bc-50ce,U+50d0-50d5,U+50d7-50d9,U+50db-50e5,U+50e8-50eb,U+50ef-50f2,U+50f4,U+50f6-50fa,U+50fc-5100;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-e51ef413167c6e14e0c0fdcc585f2fc9.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+49d5-4a77;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-9d81066dd2b337c938df6e90380a00dc.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4dac-4dad,U+4daf-4db5,U+4e02,U+4e04-4e06,U+4e0f,U+4e12,U+4e17,U+4e1f-4e21,U+4e23,U+4e26,U+4e29,U+4e2e-4e2f,U+4e31,U+4e33,U+4e35,U+4e37,U+4e3c,U+4e40-4e42,U+4e44,U+4e46,U+4e4a,U+4e51,U+4e55,U+4e57,U+4e5a-4e5b,U+4e62-4e65,U+4e67-4e68,U+4e6a-4e6f,U+4e72,U+4e74-4e7d,U+4e7f-4e85,U+4e87,U+4e8a,U+4e90,U+4e96-4e97,U+4e99,U+4e9c-4e9e,U+4ea3,U+4eaa,U+4eaf-4eb1,U+4eb4,U+4eb6-4eb9,U+4ebc-4ebe,U+4ec8,U+4ecc,U+4ecf-4ed0,U+4ed2,U+4eda-4edc,U+4ee0,U+4ee2,U+4ee6-4ee7,U+4ee9,U+4eed-4eef,U+4ef1,U+4ef4,U+4ef8-4efa,U+4efc,U+4efe,U+4f00,U+4f02-4f08,U+4f0b-4f0c,U+4f12-4f16,U+4f1c-4f1d,U+4f21,U+4f23,U+4f28-4f29,U+4f2c-4f2e,U+4f31,U+4f33,U+4f35,U+4f37,U+4f39,U+4f3b,U+4f3e-4f42,U+4f44-4f45,U+4f47-4f4c,U+4f52,U+4f54,U+4f56,U+4f61-4f62,U+4f66,U+4f68,U+4f6a-4f6b,U+4f6d-4f6e,U+4f71-4f72,U+4f75,U+4f77-4f7a,U+4f7d,U+4f80-4f82,U+4f85-4f87,U+4f8a,U+4f8c,U+4f8e,U+4f90,U+4f92-4f93,U+4f95-4f96,U+4f98-4f9a,U+4f9c,U+4f9e-4f9f,U+4fa1-4fa2,U+4fa4,U+4fab,U+4fad,U+4fb0-4fb4,U+4fb6-4fbe,U+4fc0-4fc2,U+4fc6-4fc9,U+4fcb-4fcd,U+4fd2-4fd6,U+4fd9,U+4fdb;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-20e7bf72fa05de9adf7dbcc7bf51dde6.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4933-49d4;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4095eb84ef3874e2600247bee0b04026.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+487a-4932;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4ee10ae43505e2e0bc62656ced49c0fa.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+47d2-4879,U+2ce7c,U+2ce88,U+2ce93;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-7494dc504ae00ee9cd0505f990f88c5d.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4756-47d1,U+2ca02,U+2ca0e,U+2ca7d,U+2caa9,U+2cb29,U+2cb2e,U+2cb31,U+2cb38-2cb39,U+2cb3f,U+2cb41,U+2cb4e,U+2cb5a,U+2cb64,U+2cb69,U+2cb6c,U+2cb6f,U+2cb76,U+2cb78,U+2cb7c,U+2cbb1,U+2cbbf-2cbc0,U+2cbce,U+2cc5f,U+2ccf5-2ccf6,U+2ccfd,U+2ccff,U+2cd02-2cd03,U+2cd0a,U+2cd8b,U+2cd8d,U+2cd8f-2cd90,U+2cd9f-2cda0,U+2cda8,U+2cdad-2cdae,U+2cdd5,U+2ce18,U+2ce1a,U+2ce23,U+2ce26,U+2ce2a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-8de5b863cb50dfefdd07cb11c774d579.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+46c3-4755,U+2c488,U+2c494,U+2c497,U+2c542,U+2c613,U+2c618,U+2c621,U+2c629,U+2c62b-2c62d,U+2c62f,U+2c642,U+2c64a-2c64b,U+2c72c,U+2c72f,U+2c79f,U+2c7c1,U+2c7fd,U+2c8d9,U+2c8de,U+2c8e1,U+2c8f3,U+2c907,U+2c90a,U+2c91d;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-3e1f8f654357353bf0e04ba5c34b5f7f.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4629-46c2,U+2bdf7,U+2be29,U+2c029-2c02a,U+2c0a9,U+2c0ca,U+2c1d5,U+2c1d9,U+2c1f9,U+2c27c,U+2c288,U+2c2a4,U+2c317,U+2c35b,U+2c361,U+2c364;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-2e33e8dc771ef5e1d9127d60a6b73679.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+458e-4628,U+2b7a9,U+2b7c5,U+2b7e6,U+2b7f9,U+2b806,U+2b80a,U+2b81c,U+2b8b8,U+2bac7,U+2bb5f,U+2bb62,U+2bb7c,U+2bb83,U+2bc1b,U+2bd77,U+2bd87;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-173945821411c09f70c95f98d590e697.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4449-4511,U+2afa2,U+2b127-2b128,U+2b137-2b138,U+2b1ed;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-b358f7a51ece39a3247942b1feabdb29.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+439b-4448,U+2a437,U+2a5f1,U+2a602,U+2a61a,U+2a6b2,U+2a7dd,U+2a8fb,U+2a917,U+2aa30,U+2aa36,U+2aa58;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-23ad2d71b280f00b1363b95b7bea94eb.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4275-430d,U+298c6,U+29a72,U+29d98,U+29ddb,U+29e15,U+29e3d,U+29e49;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-5882ffa04f32584d26109137e2da4352.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4132-41de,U+28bef,U+28c47,U+28c4f,U+28c51,U+28c54,U+28d10,U+28d71,U+28dfb,U+28e1f,U+28e36,U+28e89,U+28e99,U+28eeb,U+28f32,U+28ff8,U+292a0;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-a203b91dad570bf05a58c3c3ddb529bf.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+41df-4274,U+292b1,U+29490,U+295cf,U+2967f,U+296f0,U+29719,U+29750;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-bd77e3c7f9e0b072d96af37f73d1aa32.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+408e-4131,U+285c8-285c9,U+28678,U+28695,U+286d7,U+286fa,U+287e0,U+28946,U+28949,U+2896b,U+28987-28988,U+289ba-289bb,U+28a1e,U+28a29,U+28a43,U+28a71,U+28a99,U+28acd,U+28add,U+28ae4,U+28b49,U+28bc1;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-5a45d991244d4c7140217e1e5f5ca4f4.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3e83-3f2f,U+27139,U+273da-273db,U+273fe,U+27410,U+27449,U+27614-27615,U+27631,U+27684,U+27693,U+2770e,U+27723,U+27752;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-f56414bf9bced67990def8660e306759.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3f30-3fdb,U+27985,U+27a84,U+27bb3,U+27bbe,U+27bc7,U+27cb8,U+27da0,U+27e10;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-583d166e56ba0de4b77eabb47ef67839.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3fdc-408d,U+27fb7,U+27ff9,U+2808a,U+280bb,U+2815d,U+28277,U+28282,U+282e2,U+282f3,U+283cd,U+28408,U+2840c,U+28455,U+28468,U+2856b;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-7f855356ab893b0d2b9c1c83b8116f0e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3dd2-3e82,U+26a58,U+26a8c,U+26ab7,U+26aff,U+26b5c,U+26c21,U+26c29,U+26c73,U+26cdd,U+26e40,U+26e65,U+26f94,U+26ff6-26ff8,U+270f4,U+2710d;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-b57aaedfd8ebdf3931f25119dc6a5eb2.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3d34-3dd1,U+2648d,U+26676,U+2667e,U+266b0,U+2671d,U+2677c,U+267cc,U+268dd,U+268ea,U+26951,U+2696f,U+269dd,U+269fa,U+26a1e;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-b6fd38ca30869792244804b04bc058da.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3c76-3d33,U+25d0a,U+25da1,U+25e2e,U+25e56,U+25e62,U+25e65,U+25ec2,U+25ed7-25ed8,U+25ee8,U+25f23,U+25f5c,U+25fd4,U+25fe0,U+25ffb,U+2600c,U+26017,U+26060,U+260ed,U+26221,U+26270,U+26286,U+2634c,U+26402;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-452225341522a7942f0f6aab1a5c91a3.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3bda-3c75,U+25771,U+257a9,U+257b4,U+259c4,U+259d4,U+25ae3-25ae4,U+25af1,U+25bb2,U+25c14,U+25c4b,U+25c64;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-866fa7613df6b3fd272bcfd4530c0bb9.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3b25-3bd9,U+2504a,U+25055,U+25122,U+2512b,U+251a9,U+251cd,U+251e5,U+2521e,U+2524c,U+2542e,U+2548e,U+254d9,U+2550e,U+25532,U+25562,U+255a7-255a8;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-52a84a22fd1369bffeaf21da2d6158dc.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3a6b-3b24,U+24896,U+249db,U+24a4d,U+24a7d,U+24ac9,U+24b56,U+24b6f,U+24c16,U+24d14,U+24dea,U+24e0e,U+24e37,U+24e6a,U+24e8b,U+24eaa;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-829615148e6357d826b9242eb7fbbd1e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+39a9-3a6a,U+24096,U+24103,U+241ac,U+241c6,U+241fe,U+243bc,U+243f8,U+244d3,U+24629,U+246a5,U+247f1;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-c99eda15fc26a2941579560f76c3a5cf.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+38e3-39a8,U+23a98,U+23c7f,U+23c97-23c98,U+23cfe,U+23d00,U+23d0e,U+23d40,U+23dd3,U+23df9-23dfa,U+23e23,U+23f7e;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-395c35dd584b56b0789f58a0559beaf1.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3760-382a,U+22ab8,U+22b43,U+22b46,U+22b4f-22b50,U+22ba6,U+22bca,U+22c1d,U+22c24,U+22c55,U+22d4c,U+22de1;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-203b0e569e3b14aac86a003dc3fa523e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+382b-38e2,U+231b6,U+231c3-231c4,U+231f5,U+23350,U+23372,U+233d0,U+233d2-233d3,U+233d5,U+233da,U+233df,U+233e4,U+2344a-2344b,U+23451,U+23465,U+234e4,U+2355a,U+23594,U+235c4,U+235cb,U+23638-2363a,U+23647,U+2370c,U+2371c,U+2373f,U+23763-23764,U+237e7,U+237ff,U+23824,U+2383d;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-51a0e808bbc8361236ac521a119758a3.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3698-375f,U+22218,U+2231e,U+223ad,U+224dc,U+226f3,U+2285b,U+228ab,U+2298f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-6e092f71c1e634059ada0e52abadce67.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+35e6-3697,U+21c56,U+21cde,U+21d2d,U+21d45,U+21d62,U+21d78,U+21d92,U+21d9c,U+21da1,U+21db7,U+21de0,U+21e33-21e34,U+21f1e,U+21f76,U+21ffa,U+2217b;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-0f7fb1e0d5015bb1371343153ecf7ce3.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3444-350e,U+20ad3,U+20b1d,U+20b9f,U+20c41,U+20cbf,U+20cd0,U+20d45,U+20de1,U+20e64,U+20e6d,U+20e95,U+20e9d,U+20ea2,U+20f5f,U+210c1,U+21201,U+2123d,U+21255,U+21274,U+2127b;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-d0cf73942fea1c74edbdf0b3011f4656.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+350f-35e5,U+212d7,U+212e4,U+212fd,U+2131b,U+21336,U+21344,U+2139a,U+213c4,U+21413,U+2146d-2146e,U+215d7,U+21647,U+216b4,U+21706,U+21742,U+218bd,U+219c3;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-968cffdc8ee679da094e77ebf50f58ef.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+336d-3443,U+2032b,U+20371,U+20381,U+203f9,U+2044a,U+20509,U+20547,U+205d6,U+20628,U+20676,U+2074f,U+20779,U+20807,U+2083a,U+20895,U+208b9,U+2097c,U+2099d;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-7a07ddc0f0c0f5f4a9bad6ee3dda66b5.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+328b-336c,U+2000b,U+20089,U+200a2,U+200a4,U+20164,U+201a2,U+20213;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-ec181b795ac1fb5a50d700b6e996d745.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+3192-31ba,U+31c0-31e3,U+31f0-321e,U+3220-328a,U+1f250-1f251;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-cfb211578629b7e8153b37240de6a9d5.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+2f74-2fd5,U+3000,U+3003-3007,U+3012-3013,U+3018-301c,U+3020-3029,U+302f-303f,U+3041-3096,U+3099-30a1;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-59e9ff77b0efaf684bc09274fb6908c9.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+30a2-30ff,U+3105-312f,U+3131-318e,U+3190-3191;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-2adbc89c11e65905393d3dfc468b9d5b.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e36,U+4ea0,U+4f74,U+4f91,U+4f94,U+4fc5,U+507e,U+50ed,U+5182,U+51f5,U+525e,U+5282,U+52f9,U+5326,U+537a,U+53a3,U+5423,U+5459,U+54b4,U+54d9,U+55c9,U+57f4,U+580b,U+5902,U+5925,U+5a08,U+5ab5,U+5b84,U+5be4,U+5c22,U+5cb5,U+5cbd,U+5d3e,U+5e31,U+5e5e,U+5e80,U+5ee8,U+5f82,U+5fc9,U+5fed,U+600a,U+605d,U+609b,U+609d,U+60dd,U+6243,U+6322,U+63ce,U+640c,U+643f,U+6445,U+64d7,U+6534,U+6549,U+656b,U+6603,U+674c,U+680a,U+6864,U+69d4,U+6a65,U+6c2a,U+6c46,U+6c5c,U+6d0e,U+6d48,U+6e2b,U+6eb2,U+6eb7,U+6f89,U+706c,U+70b1,U+7113,U+71d4,U+727f,U+72f3,U+7303,U+7321,U+736c,U+736f,U+74a9,U+74de,U+750d,U+7513,U+7592,U+75c4,U+7605,U+760a,U+761b,U+7625,U+762d,U+7643,U+7707,U+7747,U+77b5,U+7839,U+784e,U+78a5,U+7924,U+793b,U+798a,U+7a03,U+7a06,U+7a78,U+7a80,U+7aad,U+7ba8,U+7be5,U+7cc8,U+7ec1,U+7f0b,U+7f0f,U+7f12,U+7f68,U+7f9d,U+8025,U+809c,U+80ad,U+80b7,U+80e8,U+811e,U+8204,U+8223,U+822d,U+823b,U+824b,U+825a,U+827d,U+827f,U+828f,U+82c8,U+8307,U+831b,U+8347,U+837d,U+839b,U+83a9,U+83f9,U+84b9,U+8579,U+864d,U+867f,U+86b0,U+86d1,U+86d8,U+86f2,U+8764,U+8770,U+8788,U+8797,U+87ac-87ad,U+87b5,U+881b,U+8844,U+88bc,U+88fc,U+8930,U+89cf,U+89d6,U+8ba0,U+8bd4,U+8c02,U+8c2b,U+8c85,U+8e23,U+8f81-8f82,U+8fd5,U+90b6,U+90db,U+914e,U+9164,U+91ad,U+943e,U+94b7-94b8,U+94eb,U+950d,U+9514,U+9516,U+9518,U+9529,U+9538,U+953f,U+954e,U+955f,U+95fc,U+9667,U+96b3,U+9792,U+97b2,U+98a1,U+9969,U+9987,U+9998,U+9a80,U+9a92,U+9a96,U+9adf,U+9cb4,U+9cbd,U+9cd0,U+9cd4,U+9e31,U+9e3a,U+9e71,U+9ee5,U+9eea,U+9ef9,U+9fa0;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-70e811fd7994e61f408c923de6ddd078.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e0c,U+4e28,U+4e3f,U+4ec2,U+502e,U+50ba,U+5155,U+5181,U+522d,U+5281,U+5290,U+5369,U+53b6,U+54d5,U+54dc,U+54ff,U+552a,U+553c,U+5588,U+55b5,U+5686,U+570a,U+5776,U+5786,U+57a4,U+5820,U+5865,U+58bc,U+5b32,U+5b65,U+5c1c,U+5c66,U+5c6e,U+5c8d,U+5ddb,U+5f2a,U+5f50,U+5f61,U+6067,U+614a,U+615d,U+619d,U+61d4,U+620b,U+6224-6225,U+6343,U+63ad,U+63f2,U+640b,U+6420,U+6434,U+6496,U+64d0,U+6509,U+652e,U+67a8,U+6833,U+6844,U+684a,U+6920,U+6957,U+6971,U+6a8e,U+6a91,U+6aa0,U+6b43,U+6bea,U+6bf5,U+6c15,U+6cd0,U+6ee0,U+6f24,U+6f2d,U+70c0,U+721d,U+728b,U+72c3,U+72e8,U+730a,U+7338-7339,U+734d,U+746d,U+752f,U+754e,U+770d,U+7735,U+778d,U+77a2,U+77e7,U+7857,U+786d,U+78c9,U+78f2,U+791e,U+7953,U+7b58,U+7b9d,U+7bda,U+7cd7,U+7f32-7f33,U+8022,U+8028-8029,U+8035,U+804d,U+8080,U+80c2,U+80e9,U+80ec,U+80f2,U+810e,U+8221,U+8274,U+82b0,U+82e0,U+83b0,U+8487-8488,U+848e,U+84cd,U+84d0,U+8539,U+857a,U+85a8,U+85b7,U+867c,U+871e,U+8723,U+877e,U+878b,U+8793,U+8803,U+88d2,U+8966,U+89cc,U+89eb,U+8b26,U+8c8a,U+8c98,U+8d33,U+8d47,U+8d55,U+8dbc,U+8e40,U+8e94,U+8f77,U+8f79,U+9058,U+91a2,U+91b5,U+928e,U+9494,U+94b6,U+94de,U+94f4,U+94f9,U+950a,U+950e,U+951e,U+952b,U+953c,U+953e,U+9544,U+9561,U+9564,U+9569,U+95f6,U+9603,U+960d,U+963d,U+9674,U+9794,U+97ab,U+98a5,U+9a9f,U+9ab1,U+9ad1,U+9b0f,U+9b2f,U+9c92,U+9c95,U+9cba,U+9cbc,U+9cc6,U+9ccb,U+9cd8,U+9e32,U+9e38,U+9e5b,U+9e7e,U+9eb4,U+9efb-9efc,U+9f3d;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-c4a687ac4f0c2766eefc9f77ed99cddf.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+2e3b,U+2e80-2e99,U+2e9b-2ef3,U+2f00-2f73,U+ffffd;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-51502f1206be09c565f1547c406e9558.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e69,U+4f1b,U+4f67,U+4f7e,U+4fdc,U+50e6,U+5196,U+5202,U+5233,U+523f,U+52a2,U+536e,U+5476,U+54ad,U+54cf,U+5537,U+561e,U+56dd,U+56df,U+5709,U+572c,U+57cf,U+57f8,U+580d,U+5881,U+589a,U+5941,U+59b2,U+5c25,U+5d24,U+5d74,U+5e42,U+5e8b,U+5eb3,U+5ed2,U+5fad,U+6003,U+603c,U+6083,U+6100,U+6126,U+6206,U+62ca,U+638e,U+63b4,U+6426,U+646d,U+6535,U+65c4,U+66db,U+6715,U+6769,U+6798,U+67c3,U+6861,U+698d,U+69ca,U+69ed,U+69f2,U+69ff,U+6a18,U+6b39,U+6bb3,U+6c0d,U+6cb2,U+6cd6,U+6cf7,U+6cfa,U+6d33,U+6e16,U+6e53-6e54,U+6ebb,U+6fb6,U+709d,U+72ad,U+72f7,U+72fb,U+7313,U+739f,U+74ba,U+754b,U+755b,U+758b,U+75ac,U+75d6,U+7617,U+7635,U+7640,U+76a4,U+76b2,U+775a,U+77bd,U+781f,U+79b3,U+7b2b,U+7b31,U+7b3e,U+7b6e,U+7b9c,U+7c0b,U+7c9e,U+7cc1,U+7ce8,U+7ea5,U+7f21,U+7f27,U+7f74,U+7fb0,U+8031,U+8071,U+80ea,U+8114,U+8160,U+81a6,U+81c1,U+829f,U+82a4,U+82fb,U+831a,U+8333,U+836c,U+83b6,U+83f8,U+8411,U+841c,U+8489,U+848c,U+85a4,U+8627,U+8629,U+866e,U+86b5,U+872e,U+8731,U+877b,U+877d,U+87ea,U+8813,U+8816,U+8864,U+88ce,U+88e5,U+897b,U+89cb,U+89f3,U+8bfc,U+8c35,U+8d46,U+8d4d,U+8dba,U+8e3a,U+8f75,U+8f7e,U+8fd3,U+9161,U+9179,U+917e,U+91a3,U+94ac,U+94d7,U+94e5,U+952a,U+952c,U+9545,U+9565,U+9568,U+956a,U+961d,U+96e0,U+972a,U+9730,U+989f,U+98e7,U+990d,U+9967,U+9993,U+9aa3,U+9ac0,U+9ae1,U+9aeb,U+9af9,U+9c86,U+9c8b,U+9ca0-9ca1,U+9ca3,U+9ce2,U+9e48,U+9e6a,U+9e87,U+9ee2,U+9ee9,U+9f17,U+9f19,U+9f2c,U+9f80;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-1fdc0c67ed57263a80fd108c1f6ccf24.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4ef3,U+50d6,U+50ec,U+51ab,U+51b1,U+52d6,U+54a9,U+54da,U+55be,U+55cd,U+564d,U+572f,U+574c,U+576b,U+57d8,U+57fd,U+5844,U+59d2,U+5ae0,U+5b16,U+5b37,U+5b5b,U+5b80,U+5d1e,U+5d6b,U+5efe,U+5f11,U+5f56,U+5f58,U+5f73,U+5f8c,U+5fc4,U+5fe4,U+602b,U+6106,U+610d,U+63de,U+63f8,U+641b,U+64e4,U+6634,U+676a,U+67b5,U+681d,U+6883,U+69b1,U+69e0,U+6b37,U+6b9b,U+6d7c,U+6ed7,U+6f36,U+6f72,U+6f8c,U+7035,U+7039,U+7173,U+7178,U+7228,U+728f,U+72b4,U+72ef,U+72f4,U+7331,U+7481,U+74e0,U+7540,U+75c3,U+75e6,U+763c,U+764d,U+76cd,U+7704,U+7743,U+7780,U+7847,U+786a,U+78b9,U+7962,U+7a02,U+7aac,U+7ab3,U+7b0a,U+7b4c,U+7b7b,U+7bfc,U+7c0f,U+7c16,U+7c40,U+7ca2,U+7cc7,U+7cf8,U+7d77,U+7e3b,U+7ea1,U+7ea9,U+7ef2,U+7f02,U+7f07,U+7f0c,U+7f23,U+7f2f,U+7fbc,U+8016,U+8020,U+812c,U+8136,U+8182,U+822f,U+8233,U+825f,U+8268,U+8284,U+8288,U+8291,U+8308,U+8311,U+835b,U+836d,U+83dd,U+8406,U+840f,U+845c,U+84b4,U+84e3,U+850c,U+855e,U+863c,U+86ba,U+86c4,U+86de,U+86f1,U+873e,U+87bd,U+87db,U+880a,U+883c,U+887f,U+88f0,U+890a,U+892b,U+895e,U+89ef,U+8a48,U+8bdc,U+8c18,U+8c33,U+8c94,U+8db1,U+8dcf,U+8dd6,U+8de3,U+8e6f,U+8e90,U+8f7a,U+8fb6,U+902d,U+90be,U+91af,U+936a,U+948b,U+94d8,U+9513,U+953a,U+956c,U+963c,U+9654,U+966c,U+9688,U+97b4,U+996b,U+9a75,U+9a7a,U+9aba,U+9aed,U+9b08,U+9b43,U+9c8e,U+9c94,U+9c9a,U+9e2b,U+9e36,U+9e4b,U+9e4e,U+9e55,U+9e63,U+9e68-9e69,U+9ebd,U+9ec9,U+9f0d,U+9f37,U+9f51;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-e11567fd2accf9957cd0d3c2be937d87.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+50a7,U+5240,U+5261,U+52ac,U+531a,U+5363,U+5432,U+5452,U+5456,U+5472,U+5478,U+553f,U+5575,U+5581,U+55cc,U+55fe,U+5601,U+572e,U+57d2,U+57ef,U+581e,U+5924,U+5981,U+5997,U+59a3,U+5aaa,U+5ab8,U+5b34,U+5d5d,U+5def,U+5e11,U+5e91,U+5ed1,U+5ef4,U+5f40,U+600d,U+6019,U+601b,U+605a,U+6092,U+60ab,U+6217,U+623d,U+6369,U+65d2,U+6661,U+670a,U+6753,U+67a7,U+6855,U+68f9,U+6939,U+696e,U+6980,U+6a7c,U+6aab,U+6b82,U+6bf3,U+6bf9,U+6c05,U+6c19-6c1a,U+6ca9,U+6cf6,U+6d1a,U+6dab,U+6f74,U+7085,U+7198,U+71b5,U+7256,U+725d,U+727e,U+72fa,U+7322,U+738e,U+73e5,U+750f,U+755a,U+7594,U+75b3,U+760c,U+7615,U+7630,U+763f,U+77ec,U+7817,U+78a1,U+78d9,U+7905,U+7b2a,U+7b2e,U+7b62,U+7b85,U+7bcc,U+7bea,U+7c26,U+7c74,U+7c9c-7c9d,U+7e47,U+7e9b,U+7e9f,U+7ee0,U+7ee8,U+7ef1,U+7f01,U+7f11,U+7f17,U+7f36,U+7f7e,U+7fee,U+802a,U+80cd,U+8112,U+8169,U+8234,U+8279,U+8298,U+82ca,U+82d8,U+82e1,U+83c0,U+83d4,U+83df,U+8401,U+8451,U+845a,U+8476,U+8478,U+84ba,U+84bd,U+84e0,U+851f,U+8548,U+8556,U+8585,U+868d,U+86e9,U+86f4,U+86f8,U+8765,U+8785,U+87ab,U+87ee,U+8832,U+8872,U+88b7,U+88e2-88e3,U+89da,U+8bce,U+8bd3,U+8bd6,U+8bf9,U+8c16,U+8c73,U+8d5c,U+8dde,U+8f6d,U+8f94,U+8fe8,U+9011,U+915e,U+9185,U+918c,U+94ab,U+94d1,U+94f3,U+9515,U+951d,U+9558,U+9567,U+96ce,U+96e9,U+9785,U+9878,U+987c,U+9883,U+98d1,U+9954,U+9963,U+9a93,U+9ac1,U+9acc,U+9b1f,U+9b49,U+9b4d,U+9b51,U+9ca7,U+9cae,U+9cce,U+9cd3,U+9e37,U+9e39,U+9e41,U+9e46,U+9f22,U+9f2f,U+9f39,U+9f85;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-20cc1bbf50e7efb442756cb605672c1f.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e5c,U+4edf,U+4f25,U+4f32,U+4f5e,U+4f76,U+4faa,U+4fe6,U+5028,U+5048,U+5250,U+535f,U+538d,U+53c1,U+5412,U+5443,U+54d4,U+54dd,U+5541,U+5550,U+5577,U+55dd,U+55f3,U+560f,U+562c,U+5657-5658,U+5664,U+56af,U+575c,U+577c,U+57b2,U+57da,U+5800,U+5a62,U+5aeb,U+5c3b,U+5ca3,U+5d26,U+5d9d,U+5f01,U+5fb5,U+5fdd,U+5ff8,U+6029,U+6041,U+6079,U+60b1,U+6222,U+629f,U+6332,U+63bc,U+63e0,U+6485,U+65ab,U+65c3,U+65c6,U+668c,U+669d,U+66be,U+67fd,U+6800,U+68fc,U+690b,U+6924,U+6978,U+69a7,U+6a3e,U+6a50,U+6a5b,U+6a97,U+6b24,U+6b8d,U+6baa,U+6c10,U+6c54,U+6ceb,U+6d04,U+6d4d,U+6eb1,U+6ebd,U+7110,U+71b3,U+71f9,U+7230,U+728d,U+7292,U+72b8,U+72d2,U+7360,U+73a2,U+7511,U+75a0,U+75c8,U+779f,U+7826,U+7877,U+7a39,U+7aa8,U+7ae6,U+7b04,U+7b0f,U+7baa,U+7bac,U+7c1f,U+7ccd,U+7ecb,U+7ed4,U+7ed7,U+7efb,U+7f0d,U+7f5f,U+7faf,U+7fd5,U+7fe5,U+8027,U+80bc,U+80dd,U+80fc,U+8132,U+815a,U+8167,U+816d,U+81ca,U+8228,U+82a1,U+82a9,U+82ab,U+82cc,U+8351,U+8368,U+83b8,U+83d8,U+83ea,U+83f0,U+8497,U+84c1,U+858f,U+85ff,U+867b,U+86a8-86a9,U+870a,U+8722,U+876e,U+877c,U+87e5,U+8888,U+88df,U+8919,U+8bcc,U+8bdf,U+8be8,U+8bee,U+8c20,U+8c2f,U+8d36,U+8df8,U+8e05,U+8e2f,U+8f9a,U+9021,U+908b,U+90b4,U+90ba,U+90d0,U+90eb,U+90fe,U+91aa,U+933e,U+9486-9487,U+948d,U+9490,U+94ad,U+94bd,U+94d6,U+94d9,U+9507,U+9546,U+955e,U+956b,U+95e9,U+9604,U+960b,U+9612,U+9615,U+9617,U+96b9,U+989a-989b,U+989e,U+9a78,U+9a7d,U+9aa0,U+9aa2,U+9ac2,U+9b23,U+9b3b,U+9c82,U+9cca,U+9cd9,U+9e28,U+9e5a,U+9e5e,U+9e6c,U+9efe,U+9f0b;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-5d2898fbc097a7e24c6f38d80587621e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e47,U+4e8d,U+4f65,U+4f89,U+50ee,U+520e,U+5416,U+5454,U+54bb,U+54c2,U+54d3,U+54de,U+5591,U+55e5,U+560c,U+566b,U+5769,U+578c,U+5793,U+57e4,U+5889,U+593c,U+59ab,U+5ad4,U+5ad8,U+5af1,U+5b53,U+5ba5,U+5c59,U+5c63,U+5d5b,U+5e0f,U+5e14,U+5edb,U+5fbc,U+6004,U+60ad,U+610e,U+61b7,U+624c,U+634c,U+647a,U+64ba,U+65f0,U+6600,U+66f7,U+67e2,U+67f0,U+680c,U+686b,U+6874,U+691f,U+6989,U+6a17,U+6b81,U+6b84,U+6c06-6c07,U+6c3d,U+6d07,U+6d27,U+6d2b,U+6d91,U+6e6b,U+6e8f,U+6fde,U+70bb,U+723b,U+726e,U+72b0,U+72ce,U+72f2,U+7301,U+731e,U+737e,U+7477,U+748e,U+74ff,U+7633,U+7654,U+771a,U+7726,U+7765,U+7768,U+781c,U+7829,U+78d4,U+7913,U+7957,U+79d5,U+79eb,U+7a70,U+7a86,U+7b25,U+7b38,U+7b47,U+7b72,U+7ba6-7ba7,U+7dae,U+7ee1,U+7efe,U+7f26,U+7f31,U+7f35,U+801c,U+8043,U+809f,U+80ab,U+80d7,U+8118,U+8188,U+81cc,U+823e,U+8244,U+824f,U+82b4,U+82c1,U+82e4,U+82f4,U+8306,U+833a,U+835c,U+839c,U+83b3,U+83bc,U+846d,U+867a,U+868b,U+8734,U+87ca,U+886e,U+887e,U+88a2,U+88c9,U+8921,U+8bb5,U+8bf3,U+8c04,U+8c17,U+8c1d,U+8c25,U+8c36,U+8c55,U+8c78,U+8d3d,U+8d40,U+8d59,U+8d67,U+8d91,U+8dbf,U+8deb-8dec,U+8dfd,U+8e14,U+8e41,U+8f8e,U+900b,U+9044,U+9062,U+90cf,U+9123,U+9146,U+9162,U+9172,U+918d,U+9190,U+92c8,U+93ca,U+948c,U+94aa,U+94b2,U+94c8,U+94ca,U+94d5,U+94df,U+94e9-94ea,U+94f7,U+94fc-94fd,U+951b,U+954f,U+9554,U+9559,U+9566,U+9571-9572,U+95f1,U+9608,U+960f,U+97af,U+988f,U+98d5,U+992e,U+9955,U+9ab0,U+9b32,U+9c90,U+9c9e,U+9ca5,U+9ca9,U+9cad,U+9cb1,U+9cc3,U+9e47,U+9ee7,U+9f87;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-ac9ceb44437becc3e9c4dbfebab7fc2d.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e93,U+4ec4,U+4ef5,U+4f27,U+4f7b,U+4fe3,U+5080,U+5121,U+51eb,U+5208,U+52f0,U+53f5,U+5453,U+5466,U+54a6,U+54bf,U+54d0,U+5533,U+5549,U+5556,U+556d,U+558f,U+55f2,U+55f5,U+5627,U+567b,U+56d4,U+571c,U+5739,U+57b4,U+5807,U+58c5,U+59a4,U+59af,U+59d8,U+5a09,U+5a0c,U+5a4a,U+5ad2,U+5b6c,U+5ca2,U+5cac,U+5d03,U+5d6c,U+5db7,U+5ebe,U+5f2d,U+5fea,U+6042,U+6120,U+6175,U+6221,U+623e,U+6339,U+638a,U+643d,U+64b8,U+64e2,U+66e9,U+67b3,U+67c1,U+67d2,U+6832,U+6877,U+68f0,U+6934,U+6966,U+6987,U+6998,U+69c1,U+69ce,U+6a3d,U+6a84,U+6aa9,U+6b87,U+6bd6,U+6c16,U+6c18,U+6cd4,U+6cee,U+6de0,U+6e0c,U+6ecf,U+6f4b,U+70b7,U+7168,U+72d9,U+7352,U+73b3,U+73d0,U+7441,U+74d2,U+75a5,U+75e7-75e8,U+7610,U+7619,U+765e,U+772d,U+7812,U+782c,U+784c,U+7850,U+7856,U+789b,U+78f4,U+7a51,U+7b15,U+7b1e,U+7b24,U+7b5a,U+7bb8,U+7bc1,U+7bd9,U+7ed0,U+7ee6,U+7efa,U+7f1b,U+7f1f,U+7f22,U+7f45,U+7f71,U+7fa7,U+7fbf,U+7ff3,U+8052,U+80b1,U+80db,U+80f4,U+81bb,U+81ec,U+8202,U+8210,U+8249,U+828a,U+828e,U+82e3,U+8315,U+8369,U+8378,U+83a8,U+83aa,U+83b4,U+83e1,U+84fc,U+8538,U+853b,U+859c,U+85ae,U+86b4,U+86c9,U+86cf,U+8725,U+879f,U+87b3,U+887d,U+88fe,U+8a8a,U+8ba7,U+8c07,U+8c14,U+8c30,U+8c47,U+8db5,U+8dd7,U+8e1f,U+8e69,U+8e70,U+8e85,U+8f78,U+8f87,U+8f8b,U+8f8f,U+90c4,U+9143,U+917d,U+948f,U+94cd,U+94d2,U+94ef,U+954a,U+9609-960a,U+96d2,U+9708,U+9765,U+97ea,U+9880,U+98a7,U+996c,U+9980,U+9991,U+9a88,U+9ab6,U+9afb,U+9b47,U+9c87,U+9c9b,U+9cb5,U+9cc7,U+9e2c,U+9e42,U+9e58,U+9ecd,U+9ecf,U+9f8a,U+9f8c;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-c16ed9740b85badf16e86ea782a3062f.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4ebb,U+4edd,U+4fa9,U+502c,U+50a5,U+51c7,U+51fc,U+523d,U+5241,U+530f,U+5464,U+549d,U+54a3,U+5514,U+5527,U+555c,U+556e,U+5576,U+55b1,U+55b9,U+55eb,U+5624,U+564c,U+5671,U+5685,U+568f,U+56d7,U+56e1,U+57a1,U+57d9,U+5942,U+5a67,U+5c50,U+5c7a,U+5c98,U+5d06,U+5d27,U+5d6f,U+5df3,U+5dfd,U+5e19,U+5ea0,U+5eb9,U+5eea,U+5ffe,U+600f,U+606b,U+6215,U+622c,U+6266,U+62bb,U+62bf,U+6308,U+6387,U+63b8,U+63c4,U+63c6,U+63f6,U+6441,U+6555,U+659b,U+6677,U+66a7,U+6775,U+678b,U+679e,U+6840,U+6849,U+6860,U+68c2,U+6910,U+6a28,U+6a2f,U+6a79,U+6b92-6b93,U+6bc2,U+6bfd,U+6c29,U+6c32,U+6c86,U+6cc5,U+6d0c,U+6d60,U+6da0,U+6ddd,U+6e86,U+6ed3,U+6edf,U+6fb9,U+6fd1,U+6fef,U+7023,U+7080,U+70ca,U+712f,U+7145,U+7284,U+732c,U+73c8,U+73d9,U+740a,U+7457,U+7596,U+759d,U+75a3,U+75d8,U+75e3-75e4,U+75ff,U+7622,U+7688,U+76b4,U+76e5,U+7818,U+7887,U+789a,U+78b2,U+7b08,U+7b33,U+7c2a,U+7ccc,U+7ea8,U+7ec0,U+7fe6,U+8012,U+8084,U+8093,U+80e4,U+80ef,U+8297,U+82a8,U+82be,U+8331,U+8366,U+83c5,U+83fd,U+8473,U+84a1,U+84ca,U+84d1,U+857b,U+85c1,U+85d3,U+8605,U+8662,U+86aa,U+86b1,U+86d4,U+86ed,U+86f3,U+8709,U+8748,U+874c,U+8763,U+89c7,U+89de,U+89e5,U+8a3e,U+8ba6,U+8c00,U+8c21,U+8c49,U+8c7a,U+8d30,U+8df9,U+8e51,U+8e59,U+8f6b,U+8f73,U+8ff3,U+9016,U+9026,U+902f,U+9099,U+909b,U+90c7,U+914a,U+91ae,U+91ba,U+9495,U+94a3,U+94af,U+94ba,U+94bf,U+94cc,U+94e1,U+94f0,U+9531,U+955d,U+95f3,U+9697,U+96bc,U+975b,U+977c,U+98a2,U+998a,U+9994-9995,U+9a9b,U+9ab7,U+9ac5,U+9c91,U+9ccf,U+9cd5,U+9e29,U+9edc,U+9edf,U+9f83,U+9f88-9f89;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-aa0d470430e6391eca720c7cfa44446f.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4ee8,U+4f22,U+4f43,U+4f57,U+4f5d,U+4f6f,U+4ff8,U+502d,U+507b,U+5345,U+53df,U+53fb,U+544b,U+5482,U+54a7,U+54cc,U+550f,U+5544,U+5555,U+5594,U+55e8,U+55ec,U+55ef,U+564e,U+56f9,U+5704,U+576d,U+5785,U+57ad,U+5914,U+5958,U+599e,U+59aa,U+59be,U+5a06,U+5abe,U+5ae1,U+5b40,U+5bee,U+5cbf,U+5cc4,U+5ccb,U+5d47,U+603f,U+6078,U+607d,U+607f,U+608c,U+609a,U+60fa,U+61ff,U+621b,U+622e,U+626a,U+6371,U+63ae,U+63cd,U+63d6,U+6410,U+6414,U+6421,U+6448,U+64d8,U+6710,U+6748,U+6772,U+680e,U+6954,U+69ab,U+6c68,U+6c8f,U+6ca4,U+6d2e,U+6e4e,U+6e98,U+6fe0,U+7094,U+70e9,U+7116,U+7119,U+723f,U+73c9,U+74e4,U+753e,U+7548,U+75bd,U+75cd,U+7618,U+7634,U+76c5,U+76f1,U+7708,U+7719,U+777e,U+7791,U+77b3,U+7823,U+7827,U+7830,U+7889,U+7893,U+7949,U+795c,U+79e3,U+7a14,U+7a88,U+7a95,U+7aa0,U+7afd,U+7b90,U+7bd1,U+7bfe,U+7da6,U+7ec2,U+7eef,U+7f03-7f04,U+7f08,U+7f58,U+7f61,U+7f9f,U+8174,U+8200,U+828d,U+82c4,U+82d5,U+82dc,U+82f7,U+832d,U+835a,U+840b,U+8438,U+852b,U+869d,U+86ac,U+86d0,U+86f0,U+8782,U+87a8,U+87d1-87d2,U+87e0,U+8839,U+8913,U+891b,U+8934,U+8941,U+89ca,U+89ce,U+8a07,U+8ba3,U+8bc5,U+8bcb,U+8bdb,U+8c11,U+8c15,U+8c29,U+8c32,U+8dc4,U+8dce,U+8ddb,U+8dfa,U+8e09,U+8e1d,U+8e39,U+8e42,U+8e49,U+8e4b,U+8e8f,U+8f71-8f72,U+9004,U+9036,U+9097,U+90dc,U+90e2,U+90e6,U+90ef,U+9104,U+919a,U+91b4,U+938f,U+9497,U+950f,U+9557,U+9562-9563,U+9573,U+9606,U+9649,U+972d,U+973e,U+97a3,U+97eb,U+988c,U+9894,U+98a6,U+9974,U+9977,U+997d,U+9a90,U+9a9d,U+9aef,U+9ca2,U+9ccd,U+9cdf,U+9e20,U+9e4c,U+9e6b,U+9f3e;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-f2b54d4e7be0eaefe1c2c56836fa5368.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4ede,U+4ee1,U+4eeb,U+4fda,U+4ffe,U+5025,U+506c,U+50f3,U+5106,U+520d,U+525c,U+52ad,U+530d,U+5310,U+539d,U+53a9,U+53fc,U+5421,U+5477,U+54e7,U+551b,U+5530,U+557e,U+5599,U+55c4,U+55d1,U+55d4,U+55df,U+55e4,U+55ea,U+5623,U+562d,U+5654,U+56eb,U+56f5,U+57a7,U+57d5,U+57dd,U+584d,U+5880,U+58ec,U+59dd,U+5a32,U+5a55,U+5a75,U+5b51,U+5b71,U+5b73,U+5cd2,U+5ce4,U+5e5b,U+5e96,U+5fd2,U+607b,U+61d1,U+634b,U+636d,U+63b3,U+63ff,U+64c0,U+661d,U+6657,U+66dc,U+67a5,U+6841,U+6867,U+6901,U+699b,U+6a47,U+6b46,U+6c21,U+6c24,U+6c35,U+6c4a,U+6c94,U+6ca3,U+6d39,U+6d63,U+6d6f,U+6d94,U+705e,U+71e7,U+726f,U+72cd,U+72de,U+72f0,U+7325,U+7350,U+7391,U+741a,U+757f,U+7583,U+75b1,U+75b4,U+75b8,U+75c2,U+75f1,U+766f,U+7699,U+7751,U+789c,U+7a17,U+7be6,U+7cb2,U+7ea3,U+7eb0,U+7ebe,U+7eeb,U+7f25,U+7f2c,U+7fb8,U+8026,U+8037,U+8153,U+8171,U+8191,U+8214,U+821b,U+8222,U+826e,U+82eb,U+830c,U+8314,U+8334,U+83d6,U+8418,U+843c,U+84ff,U+8564,U+8572,U+8616,U+866c,U+8693,U+86a3,U+86a7,U+86af,U+86b6,U+86c6,U+86ca,U+8708,U+870d,U+8759,U+8760,U+87af,U+87c6,U+8869,U+88c6,U+89d0,U+8b07,U+8baa-8bab,U+8bc2,U+8be4,U+8bf0,U+8c2a,U+8c62,U+8c89,U+8d49,U+8d6d,U+8d84,U+8d94,U+8db8,U+8dc6,U+8e2e,U+8e3d,U+8e47,U+8e7f,U+9005,U+9051,U+907d,U+9082,U+9088,U+90b0,U+90d3,U+9150,U+949c,U+94a4,U+94b9,U+94cb,U+94e0,U+9509,U+9512,U+951f,U+9534,U+9552-9553,U+965f,U+96b0,U+9791,U+9889,U+9990,U+9a9c,U+9aa7,U+9c88,U+9cb2-9cb3,U+9cb6-9cb7,U+9cc5,U+9cdc,U+9e22,U+9e2a,U+9e57,U+9e67,U+9e73,U+9e82,U+9eb8,U+9ee0,U+9f9b;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-99a16ef6a64934d5781933dbd9c46b2e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4eb5,U+4f09,U+4f5a,U+4f8f,U+4fce,U+4fdf,U+4fea,U+4ff3,U+500c,U+500f,U+504e,U+5088,U+52be,U+5420,U+5457,U+5499,U+549b,U+54c6,U+54d2,U+558b,U+559f,U+55bd,U+55d6,U+565c,U+567c,U+568e,U+5768,U+577b,U+57a9,U+57ed,U+59f9,U+5a11,U+5a40,U+5ae6,U+5b6a,U+5b93,U+5bb8,U+5c15,U+5c99,U+5c9c,U+5cc1,U+5d2e,U+5d4b,U+5d99,U+5e54,U+5e61,U+5fcf-5fd1,U+6002,U+6006,U+6014,U+60af,U+60c6,U+60da,U+60f4,U+621f,U+62c8,U+631b,U+631e,U+63e9,U+64b5,U+655d,U+6619,U+6635,U+6641,U+67ad,U+67b0,U+67b7,U+67e9,U+684e,U+688f,U+695d,U+696b,U+69b7,U+6a58,U+6c26,U+6d35,U+6d43,U+6d9e,U+6dd9,U+6dec,U+6e11,U+6e6e,U+6e9f,U+6ec2,U+6ee2,U+6ef9,U+6f09,U+6f66,U+6f8d,U+6fc2,U+6fc9,U+729f,U+72c8,U+73de,U+7430,U+7566,U+7579,U+75c9,U+75e2,U+75fc,U+762a,U+7638,U+7678,U+76c2,U+76f9,U+778c,U+77cd,U+77dc,U+7800,U+781d,U+782d,U+783b-783c,U+78a3,U+78ec,U+7980,U+7a23,U+7b95,U+7bdd,U+7c0c,U+7c41,U+7c91,U+7cb3,U+7cc5,U+7ecc,U+7f19,U+7fca,U+8006,U+8069,U+807f,U+80bd,U+80ed,U+814b,U+8198,U+82cb,U+82d2,U+834f,U+8360,U+847a,U+84d6,U+84e5,U+8537,U+85d0,U+8671,U+86a4,U+86ce,U+86f9,U+8703,U+8707,U+8737,U+873b,U+8815,U+8936,U+8bc3,U+8bcf,U+8bd2,U+8bd8,U+8be9,U+8c0c,U+8c0f,U+8c4c,U+8d45,U+8d5d,U+8d73,U+8e31,U+8e6d,U+8e76,U+8fe4,U+9041,U+90d7,U+9169,U+92ae,U+94a1,U+94c4,U+94c9,U+94db,U+94e7,U+9503,U+9506,U+9517,U+9528,U+9537,U+9542,U+9549,U+95fe,U+9616,U+961a,U+96c9,U+96f3,U+9701,U+970e,U+9739,U+9753,U+9798,U+98d2-98d3,U+98d9-98da,U+9968,U+996f,U+9984,U+9997,U+9acb,U+9b03,U+9c85,U+9ca8,U+9cab,U+9e49,U+9e51,U+9e66,U+9f10;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-c40533fdf4cc57177b12803598af7e59.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e15,U+4e1e,U+4e2b,U+4eb3,U+4ec9,U+4f0e,U+4f64,U+501c,U+50a9,U+510b,U+51a2,U+51bc,U+527d,U+52d0,U+53fd,U+5429,U+542e,U+5486,U+54af,U+5506,U+5511,U+5522,U+552c,U+556c,U+55b3,U+55d2,U+55e6,U+55fd,U+561f,U+5639,U+5659,U+5662,U+5693,U+572a,U+5892,U+598a,U+5992,U+59a9,U+5a20,U+5ae3,U+5b17,U+5b7d,U+5d34,U+5d3d,U+5d4a,U+5d82,U+5e1a-5e1b,U+5ea5,U+5f0b,U+5f77,U+5fd6,U+5fff,U+6026,U+6035,U+6063,U+60b4,U+60bb,U+60ee,U+612b,U+6194,U+61ca,U+61e6,U+61f5,U+620a,U+6248,U+62a1,U+62d7,U+6376,U+637b,U+652b,U+65bc,U+65cc,U+65ce,U+65d6,U+664c,U+665f,U+6666,U+6684,U+66b9,U+6773,U+6777,U+6787,U+67de,U+6845,U+693d,U+6994,U+6a35,U+6d54,U+6d5c,U+6d8e,U+6dd6,U+6eb4,U+6f2a,U+6f78,U+704f,U+70ec,U+7118,U+714a,U+7172,U+71b9,U+724d,U+728a,U+7337,U+733e,U+7396,U+73b7,U+73cf,U+7428,U+742c,U+742e,U+74ee,U+74f4,U+7525,U+753a,U+7572,U+75d4,U+765c,U+768e,U+7762,U+777d,U+77fd,U+7825,U+7837,U+78b4,U+795f,U+79ed,U+7a1e,U+7b06,U+7b20,U+7ba9,U+7bab,U+7c7c,U+7cbd,U+7cdc,U+7ec9,U+7ef6,U+7f30,U+7f42,U+7f44,U+7f54,U+7f94,U+8004,U+800b,U+8019,U+809b,U+80ae,U+80c4,U+80f1,U+8146,U+816e,U+817c,U+81c0,U+81fc,U+81fe,U+822b,U+830f,U+832f,U+8340,U+8365,U+8385,U+8392,U+83a0,U+8424,U+84af,U+869c,U+8713,U+8717-8718,U+87c0,U+87cb,U+87fe,U+8821,U+8902,U+89d1,U+8bb9,U+8c12,U+8d32,U+8d53,U+8df7,U+8e7c,U+8f7c,U+8f95,U+8fab,U+9052,U+905b,U+9095,U+909d,U+90c5,U+911e,U+9122,U+916a,U+919b,U+948e,U+9492,U+949a,U+94b5,U+94bc,U+94c6,U+94f1,U+9502,U+9511,U+9536,U+956f-9570,U+9602,U+9621,U+9631,U+998b,U+99a5,U+9a81,U+9a9e,U+9ebe,U+9f8b;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-91ddb2969bf2d31ba02ad82998d1314c.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4f2b,U+4f3d,U+4fac,U+5043,U+5055,U+5140,U+5156,U+51cb,U+5243,U+531d,U+536f,U+53a5,U+53ae,U+53f1,U+541d,U+5431,U+547b,U+5492,U+5494,U+54a4,U+54aa,U+54ce,U+54fd,U+5509,U+5520,U+553e,U+557b,U+55c5,U+55e1,U+55f7,U+5608,U+5636,U+563b,U+5773,U+57a0,U+5811,U+587e,U+58d5,U+59e3,U+5a29,U+5a6a,U+5a76,U+5a7a,U+5ac9,U+5b62,U+5b95,U+5c49,U+5c8c,U+5cab,U+5cb7,U+5d02,U+5d58,U+5e44,U+5e7a,U+5eff,U+5f29,U+5f89,U+5f9c,U+5fa8,U+6005,U+6043,U+60b8,U+60d8,U+60ec,U+60f0,U+6115,U+618e,U+630e,U+637a,U+6390,U+63ac,U+63b0,U+64de,U+6525,U+6538,U+65ee-65ef,U+6631,U+6636,U+6654,U+677c,U+67b8,U+67d8,U+683e,U+6886,U+68b5,U+692d,U+6963,U+6979,U+6988,U+6b59,U+6b9a,U+6c69,U+6c74,U+6cae,U+6ce0,U+6cef,U+6d95,U+6dc5,U+6dde,U+6de6,U+6dfc,U+6ea7,U+6f15,U+6f29,U+7096,U+70c3,U+7131,U+715c,U+7166,U+7266,U+7317,U+731d,U+7329,U+73e9,U+7425,U+7455,U+7490,U+74ef,U+7519,U+75b5,U+75b9,U+75de,U+7656,U+7663,U+7691,U+7729,U+77fe,U+783e,U+787c,U+795a,U+7a79,U+7abf,U+7b3a,U+7b4f,U+7b60,U+7b75,U+7b8d,U+7bb4,U+7bd3,U+7be1,U+7cbc,U+7edb,U+7f1c,U+7f8c,U+7fb2,U+7fb9,U+7fce,U+7ff1,U+810d,U+81c6,U+82a5,U+82aa,U+82de,U+8317,U+8343,U+835e,U+8364,U+836a,U+853a,U+8543,U+854a,U+8559,U+8568,U+85b0,U+85b9,U+864f,U+86e4,U+8715,U+8845,U+8884,U+88e8,U+88f1,U+8983,U+8be1,U+8c1f,U+8c27,U+8c5a,U+8c82,U+8d58,U+8dbe,U+8f98,U+9035,U+9074,U+90a1,U+9149,U+9157,U+93d6,U+949d,U+94c2,U+94e3-94e4,U+95eb,U+95f0,U+9611,U+9619,U+9642,U+968d,U+9706,U+970f,U+97ed,U+988a,U+9893,U+98e8,U+9a77,U+9a87,U+9aa1,U+9abc,U+9cdd,U+9e2f,U+9e33,U+9e44,U+9e5c,U+9e9d,U+9edd;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-774d4f764a1299da5d28ec2f2ffe0d69.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4f58,U+4f6c,U+4f70,U+4fd0,U+5014,U+51bd,U+524c,U+5315,U+5323,U+535e,U+540f,U+542d,U+545b,U+548e,U+549a,U+54ab,U+54fc,U+5567,U+556a,U+5600,U+5618,U+563f,U+5669,U+56f1,U+56ff,U+573b,U+574d,U+579b,U+57b8,U+57c2,U+586c,U+58f9,U+595a,U+598d,U+5993,U+5996,U+59d7,U+5b7a,U+5ba6,U+5c4e,U+5c96,U+5ce5,U+5eb6,U+5f08,U+5f99,U+602f,U+6059,U+606c,U+607a,U+60ed,U+61a9,U+620c,U+6249,U+62a8,U+62c4,U+62ed,U+62fd,U+6342,U+6345,U+6396,U+63a3,U+6402,U+6413,U+642a,U+6487,U+64a9,U+64ac,U+64ae,U+64b7,U+659f,U+65a1,U+667e,U+66f3,U+67e0,U+69db,U+69df,U+6aac,U+6b86,U+6c50,U+6c5e,U+6c76,U+6c85,U+6c8c,U+6cde,U+6d19,U+6d52,U+6da7,U+6db8,U+6e1a,U+6e25,U+6e4d,U+6e5f,U+6ec1,U+6f31,U+6f7a,U+6fa7,U+6fe1,U+701b,U+70ab,U+70f7,U+717d,U+71a8,U+7252,U+72c4,U+72e1,U+7315,U+736d,U+73ae,U+73c0,U+73c2,U+740f,U+75a4,U+7600-7601,U+768b,U+76bf,U+76d4,U+7728,U+772f,U+776c,U+77a0,U+77b0,U+77f8,U+783a,U+78d0,U+78fa,U+7977,U+7a37,U+7a92,U+7afa,U+7b71,U+7b94,U+7cef,U+7f28,U+7fe1,U+808b,U+80e5,U+80eb,U+8110,U+8113,U+812f,U+814c,U+81c3,U+8235,U+82d4,U+8309,U+83c1,U+8431,U+8469,U+84bf,U+84d3,U+84df,U+84e6,U+8511,U+8638,U+86c0,U+86db,U+86fe,U+8757,U+8822,U+8882,U+8885,U+8892,U+88f3,U+892a,U+8ba5,U+8bd9,U+8be0,U+8be7,U+8bfd,U+8c1a,U+8d4a,U+8d4e,U+8d66,U+8dda,U+8e0c,U+8e52,U+8e74,U+8e87,U+8f76,U+8fc2,U+8fe6,U+900d,U+9068,U+90ac,U+90b3,U+90b8,U+90e7,U+9119,U+9131,U+915a,U+916e,U+94b4,U+94d0,U+94e2,U+94ec,U+94ff,U+9522,U+9535,U+9556,U+965b,U+96f9,U+9774,U+9981,U+998d,U+998f,U+9a6e,U+9a7f,U+9a8a,U+9b13,U+9c9f,U+9e3e,U+9e43,U+9e6d,U+9e8b,U+9e92,U+9edb,U+9eef;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-7718fe60986d8b42b1be9c5ace5ccf25.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e10,U+4e56,U+4e98,U+4ec3,U+4f3a,U+4f5f,U+4f88,U+4f97,U+4fa5,U+4fe8,U+504c,U+5197,U+52fa,U+5364,U+53e8,U+5406,U+543c,U+545c,U+5471,U+5480,U+5495,U+54b3,U+54df,U+54e6,U+54ee,U+557c,U+5583,U+55dc,U+55e3,U+566c,U+592f,U+5944,U+5983,U+59ca,U+59e5,U+5a13,U+5a7f,U+5b09,U+5bd0,U+5e4c,U+5eb5,U+5f1b,U+5f3c,U+608d,U+60cb,U+61a7,U+61ac,U+61cb,U+6233,U+62a0,U+62e7,U+62ee,U+62f4,U+62f7,U+634e,U+6382,U+63c9,U+63ea,U+6400,U+645e,U+6482,U+6556,U+6593,U+6615,U+664f,U+66e6,U+672d,U+675e,U+67da,U+6805,U+6808,U+6868,U+68a2,U+695e,U+69ad,U+6a80,U+6a90,U+6b83,U+6be1,U+6c30,U+6cad,U+6cb1,U+6cf1,U+6d31,U+6d93,U+6dae,U+6dbf,U+6dc6-6dc7,U+6e0d,U+6e32,U+6e3a,U+6e85,U+6eba,U+6f3e,U+6f5e,U+6f7c,U+6fee,U+71ee,U+722a,U+72b7,U+72e9,U+73ba,U+73d1,U+7409,U+7435-7436,U+7459-745a,U+747e,U+7487,U+74e2,U+7504,U+752c-752d,U+7599,U+759f,U+75a1,U+75ca,U+75f0,U+761f,U+7629,U+777f,U+7785,U+77a5,U+77bf,U+78d5,U+7934,U+7940,U+79a7,U+7b19,U+7c38,U+7c95,U+7cb1,U+7ce0,U+7eca,U+7ef7,U+7f2b,U+7f81,U+7fcc,U+8046,U+8148,U+8165,U+819b,U+81ba,U+828b,U+82ae,U+82b7,U+82d3,U+8301,U+830e,U+831c,U+8338,U+837c,U+8393,U+8398,U+83ba,U+83e0,U+83e9,U+853c,U+8654,U+86df,U+8712,U+873f,U+874e,U+8783,U+8859,U+88a4,U+8925,U+8bb7,U+8bff,U+8c19,U+8c1b,U+8c24,U+8c2c,U+8d61,U+8db4,U+8e6c,U+8f8a,U+8fe5,U+8ff8,U+901e,U+90f4,U+912f,U+9163,U+9170,U+91dc,U+949b,U+94a8,U+94b3,U+94c0,U+94e8,U+9525,U+9530,U+9539,U+954c-954d,U+9550,U+955b,U+962a,U+9685,U+96cc,U+9776,U+988d,U+9975,U+9985,U+9a6f,U+9aa5,U+9ab8,U+9c7f,U+9ca4,U+9cb8,U+9e25,U+9e35,U+9e4a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-aa5c9ca6cf4fba00433b7aa3fa10671a.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4ea2,U+4ea5,U+4f36,U+4f84,U+4f8d,U+501a,U+5029,U+516e,U+51a5,U+51c4,U+51f8,U+5201,U+527f,U+5321,U+5352,U+5366,U+53e9,U+54c7,U+5632,U+5676,U+56b7,U+56bc,U+56da,U+56e4,U+5703,U+5729,U+5742,U+57a2-57a3,U+5815,U+58d1,U+5919,U+592d,U+5955,U+5a05,U+5a25,U+5a34,U+5b70,U+5b75,U+5bdd,U+5bf0,U+5c41,U+5c79,U+5c91,U+5c94,U+5ce6,U+5ced,U+5d69,U+5dc5,U+5e16,U+5e27,U+5f27,U+5f95,U+5ffb,U+6020,U+604d,U+6055,U+60e6,U+60eb,U+6123,U+618b,U+61a8,U+620d,U+62c7,U+62ce,U+62d9,U+631f,U+634d,U+6452,U+6479,U+64ce,U+64d2,U+655b,U+660a,U+6726,U+67c4,U+6809,U+6853,U+68e3,U+68f1,U+68fa,U+693f,U+6942,U+6995,U+69a8,U+69b4,U+6a71,U+6b89,U+6bcb,U+6bd3,U+6bd9,U+6c40,U+6cf8,U+6cfe,U+6d85,U+6da3,U+6daa,U+6e0e,U+6e43-6e44,U+6f88,U+7078,U+7099,U+70bd,U+70d9,U+70fd,U+7109,U+7184,U+7239,U+733f,U+73f2,U+748b,U+749c,U+749e,U+759a,U+75d2,U+75eb,U+7620,U+766b,U+7693,U+76cf,U+7738,U+773a,U+776b,U+778e,U+77aa,U+7852,U+78be,U+7948,U+795b,U+7960,U+796f,U+79ba,U+7a20,U+7a96,U+7aa5,U+7b03,U+7b28,U+7b50,U+7b77,U+7bc6,U+7bf1,U+7c27,U+7d0a,U+7ead,U+7ec5,U+7ee2,U+7ef0,U+7efd,U+7f0e,U+7f2e,U+7f79,U+7f9a,U+8098,U+80da,U+80e7,U+80f0,U+80f3,U+80fa,U+818a,U+81e7,U+8237-8238,U+8299,U+82b8,U+82ce,U+837b,U+83bd,U+83cf,U+8426,U+8475,U+85c9,U+85d5,U+85dc,U+85e9,U+871a,U+8747,U+8749,U+888d,U+8910,U+891a,U+8bb4,U+8be3,U+8bec,U+8bf2,U+8c06,U+8c0d,U+8d31,U+8d48,U+8de4,U+8e1e,U+8e4a,U+8e66,U+8f84,U+8f97,U+9083,U+90e1,U+9165,U+91c9,U+94b0,U+94f5,U+9504,U+9532,U+956d,U+95f5,U+95fa,U+9668,U+9698,U+96bd,U+9704,U+9773,U+9890,U+996a,U+997a,U+9a74,U+9a8b,U+9cc4,U+9ccc;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4f50e5136e136527280bc902c5817561.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4ea8,U+4f1e,U+4f51,U+4f63,U+4f7c,U+4f83,U+4fa0,U+4fd1,U+4ffa,U+5018,U+5026,U+508d,U+50bb,U+50f5,U+50fb,U+5162,U+5319,U+5320,U+538c,U+5413,U+541f,U+5475,U+54bd,U+54d1,U+5589,U+5598,U+575f,U+57ae,U+57e0,U+5937,U+5974,U+5978,U+59ae,U+5a1f,U+5a49,U+5ab3,U+5b99,U+5b9b,U+5ba0,U+5be1,U+5be5,U+5c09,U+5c27,U+5de2,U+5e9a,U+5f26,U+5f8a,U+5f98,U+6021,U+606d,U+60bc,U+60d5,U+60e7,U+611a,U+614c,U+6254,U+626f,U+6292,U+6296,U+62b9,U+62e2,U+631a,U+631d,U+6320,U+6346,U+63ba,U+6467,U+64bc,U+658b,U+663c,U+6643,U+6652,U+6656,U+6687,U+66d9,U+66dd,U+66f0,U+673d,U+67ab,U+6816-6817,U+68a7,U+68ad,U+68cd,U+68e0,U+6986,U+69fd,U+6b47,U+6bd7,U+6c1f,U+6c2e-6c2f,U+6cbe,U+6de4,U+6e1d,U+6e83,U+6e9c,U+6ed4-6ed5,U+6f4d,U+70f9,U+7130,U+716e,U+718f,U+71ac,U+71e5,U+72fc,U+731c,U+7334,U+73ca,U+7422,U+7426,U+745f,U+7470,U+75af,U+75f4,U+762b,U+763e,U+7696,U+7737,U+7741,U+77a7,U+77bb,U+77ee,U+785d,U+788c,U+78ca,U+7901,U+796d,U+7985,U+79fd,U+7a3c,U+7a57,U+7a74,U+7b5b,U+7caa,U+7cb9,U+7cd5,U+7eac,U+7eb6,U+7ed1,U+7ee5,U+7f20,U+7f2a,U+7f38,U+7f69,U+7fa1,U+8018,U+8038,U+803f,U+804b,U+80a2,U+80be,U+80d6,U+817a,U+81fb,U+820c,U+82ad,U+82af,U+82bd,U+8327,U+8354,U+835f,U+8367,U+836b,U+840c,U+841d,U+8471,U+849c,U+84b2,U+84c9,U+8517,U+851a,U+8549,U+8681,U+8721,U+8776,U+88d9,U+88f9,U+89c5,U+8c1c,U+8c34,U+8d81,U+8d9f,U+8e0a,U+8e72,U+8eb2,U+8fed,U+901b,U+902e,U+906e,U+9091,U+90aa,U+90af,U+915d,U+9171,U+946b,U+9489,U+9499,U+94a5,U+9508,U+9524,U+952d,U+9551,U+9576,U+95f7,U+9600,U+96b6,U+96c0,U+9756,U+97f6,U+98a0,U+98a4,U+997f,U+9a73,U+9a86,U+9ad3,U+9e3d,U+9ed4;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-093b9ef39a46ceae95a1df18a0a3a326.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e4d,U+4e5e,U+4ec7,U+4ed5,U+50da,U+50e7,U+515c,U+51a4,U+51ff,U+5203,U+5254,U+5300,U+533e,U+5375,U+53ee,U+5435,U+543b,U+5455,U+548b,U+548f,U+54d7,U+54fa,U+5578,U+5587,U+55a7,U+560e,U+5760,U+576f,U+5777,U+5830,U+58a9,U+5962,U+59e8,U+5a07,U+5a23,U+5a3c,U+5b5a,U+5bb5,U+5bc5,U+5bde,U+5c7f,U+5cb1,U+5ce8,U+5cea,U+5d29,U+5d4c,U+5e18,U+5f57,U+5f5d,U+5f87,U+5ff1,U+6016,U+601c,U+6064,U+6177,U+61d2,U+625b,U+62e3,U+62f1,U+634f,U+63a0,U+6401,U+6405,U+6495,U+64c2,U+6512,U+6577,U+6590,U+65a7,U+65a9,U+65f7,U+6627,U+6655,U+6714,U+6795,U+67d1,U+67ff,U+68b3,U+68d5,U+68d8,U+6930,U+6960,U+6977,U+69bb,U+69d0,U+6a31,U+6b7c,U+6bb4,U+6c22,U+6c72,U+6c79,U+6c7e,U+6c81,U+6c93,U+6ca5,U+6cbc,U+6ce3,U+6cfb,U+6d3c,U+6da9,U+6df3,U+6e2d,U+6eaf,U+6ec7,U+6f13,U+6f33,U+6f62,U+6fa1,U+7011,U+707c,U+708a,U+70c1,U+70d8,U+70eb,U+711a,U+7194,U+7281,U+7316,U+7357,U+7384,U+7405,U+742a,U+745b,U+7574,U+7578,U+75ea,U+7682,U+7792,U+77d7,U+77e9,U+77eb,U+77f6,U+780c,U+78c5,U+7941,U+79e4,U+7a1a,U+7a9c,U+7ad6,U+7b5d,U+7bf7,U+7c07,U+7c3f,U+7c9f,U+7ca5,U+7cdf,U+7e82,U+7eab,U+7ece,U+7eda,U+7f09,U+7f15,U+7f9e,U+7fdf,U+7fe9,U+803b,U+803d,U+80aa,U+80b4,U+813e,U+8155,U+817b,U+819d,U+821c,U+82b9,U+82df,U+82ef,U+8304,U+83b9,U+8446,U+853d,U+85af,U+85fb,U+8650,U+865e,U+86d9,U+86ee,U+8700,U+8862,U+889c,U+88d4,U+88f8,U+895f,U+8a79,U+8bb3,U+8bb6,U+8bc0,U+8beb,U+8bf5,U+8c23,U+8c79,U+8d1e,U+8dcb,U+8e29,U+8e44,U+8e81,U+8eac,U+8eaf,U+8f8d,U+9050,U+90f8,U+914b,U+948a,U+94be,U+94ee,U+950c,U+9540,U+962e,U+9647,U+9661,U+9699,U+96cf,U+9716,U+9761,U+97a0,U+97e7,U+9a7c,U+9a8f,U+9ae6,U+9cd6,U+9e26;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-a0ca5df4258213d7fc9fce80f65ce760.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4fa3,U+4fae,U+4fd8,U+4fef,U+50a3,U+5189,U+5195,U+51db,U+51f3,U+51f9,U+5220,U+5228,U+5288,U+52ff,U+532e,U+533f,U+5351,U+53db,U+53ed,U+5450,U+5484,U+5490,U+54c9,U+54e9,U+5501,U+5507,U+5543,U+55d3,U+56a3,U+575e,U+589f,U+5984,U+59ec,U+5a04,U+5a36,U+5a77,U+5a9a-5a9b,U+5ab2,U+5ac2,U+5ad6,U+5bc7,U+5c2c,U+5c34,U+5c51,U+5cd9,U+5d0e,U+5deb,U+5e3c,U+5e87,U+5ed3,U+5f13,U+5f64,U+5fe1,U+606a,U+6096,U+60df,U+60f6,U+60f9,U+6151,U+620e,U+6241,U+6252,U+6273,U+627c,U+6289,U+62c2,U+62cc,U+62ef,U+6361,U+6363,U+63b7,U+63e3,U+6518,U+66ae,U+6756,U+6789,U+6813,U+6829,U+6862,U+6866,U+6893,U+6897,U+690e,U+6984,U+69cc,U+6a1f,U+6a44,U+6a59,U+6ba1,U+6c13,U+6c90,U+6ca6,U+6cbd,U+6ccc,U+6cd3,U+6cd7,U+6d4a,U+6d4f,U+6d5a,U+6d9f,U+6da1,U+6dcc,U+6ea5,U+6ee4,U+6ee6,U+6f2f,U+6f8e,U+701a,U+7095,U+709c,U+70af,U+70db,U+70e8,U+714e,U+715e,U+71a0,U+71ce,U+7235,U+7280,U+72d0,U+72f8,U+73ab,U+7410,U+745c,U+7480,U+74a7-74a8,U+74e3,U+75ae,U+75f9,U+76b1,U+76ce,U+7736,U+77e2-77e3,U+781a,U+789f,U+797a,U+79be,U+79c3,U+79c6,U+79f8,U+7a8d,U+7a98,U+7aa6,U+7aff,U+7b1b,U+7cd9,U+7d6e,U+7ede,U+7eee,U+7f00,U+7f24,U+7f2d,U+7fd8,U+800d,U+8116,U+8151,U+81b3,U+8205,U+82c7,U+82db,U+832c,U+8335,U+8339,U+8386,U+846b,U+8587,U+8611,U+8682,U+868a,U+868c,U+8774,U+88d8,U+88f4,U+8912,U+8b6c,U+8bbd,U+8c0e,U+8c41,U+8d26,U+8d3b-8d3c,U+8d50,U+8dea,U+8e35,U+8f99,U+8fe2,U+8fe9,U+9017,U+914c,U+916f,U+9175-9176,U+918b,U+94a0,U+94ae,U+94ce,U+94f2,U+951a,U+952f,U+9541,U+9640,U+9672,U+968b,U+96cd,U+96ef,U+9713,U+97ec,U+9885,U+9992,U+9a6d,U+9a79,U+9a85,U+9cbb,U+9cd7,U+9cde,U+9e93,U+9f9f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-d2666cbed13462c5dc36fa2f15c202ca.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e11,U+4ed7,U+4fcf,U+4fe9,U+4fed,U+50ac,U+50b2,U+5112,U+5180,U+5188,U+51f6,U+522e,U+5265,U+52cb,U+52df,U+5349,U+5367,U+5378,U+537f,U+5395,U+5398,U+53d4,U+543e,U+5440,U+5446,U+54b8,U+5565-5566,U+5580,U+55bb,U+56ca,U+572d,U+573e,U+574e,U+5782-5784,U+58f3,U+5938-5939,U+5948,U+594e,U+5a1c,U+5a74,U+5ae9,U+5b55,U+5b5c,U+5bb0,U+5bd3,U+5bf8,U+5c3f,U+5d14,U+5d2d,U+5df7,U+5dfe,U+5e05-5e06,U+5e1c,U+5e62,U+5e7b,U+5e7d,U+5ed6,U+5f2f,U+5f66,U+5f6c,U+5fa1,U+604b,U+609f,U+60a6,U+60e8,U+6101,U+6124,U+6127,U+6148,U+61be,U+6247,U+62d8,U+62da,U+633d,U+635e,U+6367,U+6380,U+638f,U+63a9,U+63fd,U+641c,U+64e6,U+655e,U+6572,U+6591,U+65a5,U+6691,U+6735,U+67a2-67a3,U+67ef,U+680b,U+6876,U+6905,U+6a0a,U+6a61,U+6b79,U+6bb7,U+6bbf,U+6c41,U+6c55,U+6c83,U+6c9b,U+6ca7,U+6cfc,U+6d46,U+6d51,U+6d74,U+6d9d,U+6daf,U+6dc0,U+6deb,U+6e17,U+6e24,U+6e89,U+6ea2,U+6ef4,U+6f6d,U+707f,U+70b3,U+70e4,U+70ef,U+710a,U+722c,U+725f,U+7261,U+72ee,U+72f1,U+730e,U+732b,U+7433,U+7538,U+75bc,U+7624,U+7709,U+7750,U+7779,U+7802,U+7898,U+78a7,U+78b1,U+78cb,U+78f7,U+7984,U+7a83,U+7aed,U+7b3c,U+7b4b,U+7c92,U+7c98,U+7ca4,U+7eb9,U+7ee3,U+7ef3,U+7ef5,U+7f05,U+7f55,U+7f62,U+7fc1,U+7fd4,U+7fe0,U+8042,U+806a,U+80a0,U+80a4,U+80c3,U+8102,U+8106,U+814a,U+8154,U+8247,U+8258,U+82cd,U+8328,U+832b,U+8389,U+83ca,U+845b,U+846c,U+84b8,U+8574,U+859b,U+8680,U+8695,U+86c7,U+8702,U+886c,U+8896,U+88b1,U+88e4,U+8bc8,U+8c10,U+8c26,U+8c28,U+8c2d,U+8d4c,U+8d63,U+8f67,U+8f74,U+8fc4,U+9006,U+9063,U+90a2,U+90b1,U+90c1,U+9177,U+9189,U+9493,U+949e,U+94fe,U+9610,U+961c,U+96a7,U+96fe,U+978d,U+97f5,U+9888,U+997c,U+9a84,U+9b3c,U+9b44-9b45,U+9b54,U+9e64,U+9f0e,U+9f9a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-1e6fd68f1f3902ce48ce8c69df385622.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e19,U+4e38,U+4e53,U+4e7e,U+4e9f,U+4ec6,U+4f50,U+4fde,U+502a,U+5154,U+517d,U+51d1,U+51f0,U+5239,U+5256,U+52c9,U+52fe,U+5308,U+532a,U+535c,U+5384,U+53a2,U+53a8,U+53c9,U+53e0,U+5496,U+54ac,U+54c0,U+54c4,U+54e8,U+5561,U+5582,U+561b,U+5631,U+566a,U+5764,U+576a,U+5792,U+57ab,U+584c,U+5885,U+58f6,U+59a8,U+5acc,U+5bc2,U+5c38-5c39,U+5c60,U+5c6f,U+5c82,U+5c90,U+5d16,U+5dcd,U+5e37,U+5e90,U+5eb8,U+5f6a,U+5fcc,U+6012,U+6068,U+6073,U+607c,U+6094,U+6109,U+621a,U+626e,U+6284,U+62d0,U+62e6,U+62fe,U+6321,U+6328,U+632b,U+6349,U+6454,U+65ed,U+660f,U+6674,U+66a8,U+6749,U+674f,U+6760,U+67af,U+6850,U+6854,U+6869,U+68a8,U+68d2,U+68f5,U+6912,U+6b49,U+6b6a,U+6bef,U+6c28,U+6c5d,U+6c82,U+6cab,U+6cb8,U+6cc4,U+6cf5,U+6d47,U+6d78,U+6da4,U+6dc4,U+6dcb,U+6df9,U+6e0a,U+6e23,U+6e5b,U+6eb6,U+6f06,U+6f47,U+6f84,U+6f9c,U+6fd2,U+7076,U+70ac,U+7199,U+723d,U+72ac,U+72ed,U+7476,U+7529,U+752b,U+754f,U+7554,U+75d5,U+7626,U+76ef,U+7720,U+7766,U+7784,U+77ac,U+780d,U+7838,U+7845,U+786b,U+78b3,U+7978,U+79b9,U+79c9,U+79e7,U+7a3d,U+7a84,U+7a9f,U+7b0b,U+7b52,U+7c7d,U+7f1a,U+7fc5,U+7ff0,U+804a,U+8086-8087,U+808c,U+809a,U+80ba,U+810a,U+8180,U+818f,U+81c2,U+81ed,U+8231,U+8292,U+829c,U+82a6,U+82d1,U+8346,U+838e,U+839e,U+83c7,U+83f1,U+8403,U+840e,U+8513,U+857e,U+85e4,U+867e,U+871c,U+87ba,U+87f9,U+884d,U+8944,U+8a93,U+8c05,U+8d2c,U+8d2e,U+8d42-8d43,U+8dfb,U+8e22,U+8eba,U+8f69,U+8f9c,U+8fa3,U+8fa8,U+8fb1,U+900a,U+9038,U+903b,U+9042,U+904f,U+90b5,U+90dd,U+9102,U+9187,U+94a7,U+94c5,U+9523,U+95f8,U+95fd,U+960e,U+964b-964c,U+96c1,U+9709,U+971c,U+97ad,U+9882,U+9965,U+9976,U+9988,U+99a8,U+9a82,U+9a9a,U+9b41,U+9c8d,U+9e45,U+9e70,U+9e9f,U+9f3b,U+9f7f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-87599f94b6cc129d505b375798d0d751.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e08,U+4e18,U+4e1b,U+4e22,U+4e27,U+4e32,U+4e52,U+4e73,U+4ead,U+4ed4,U+4ed9,U+4ef0,U+4fa6,U+5076,U+5179,U+51bb,U+51c9,U+51ef,U+51fd,U+524a,U+526a,U+529d,U+52ab,U+5306,U+5339,U+53d9,U+540a,U+5410,U+541e,U+5439,U+54b1,U+54ed,U+5564,U+558a,U+55b7,U+5634,U+574a,U+5751,U+57a6,U+57cb,U+57d4,U+5824,U+582a,U+5835,U+5858,U+5893,U+58e4,U+5951,U+5986,U+59da,U+59fb,U+59ff,U+5a03,U+5a46,U+5ac1,U+5b5d,U+5bfa,U+5c18,U+5c3a,U+5c48,U+5c4f,U+5c61,U+5cb3,U+5d1b,U+5e15,U+5e3d,U+5e99,U+5e9e,U+5eca,U+5f0a,U+5f17-5f18,U+5f25,U+5f7c,U+5fcd,U+6028,U+60a0,U+60ac,U+60d1,U+614e,U+6155,U+6168,U+61c8,U+6208,U+6212,U+6251,U+629a-629b,U+62ab-62ac,U+62fc,U+6323,U+632a,U+63d2,U+643a,U+6491-6492,U+649e,U+64b0,U+64c5,U+659c,U+6614,U+662d,U+6664,U+6670,U+6676,U+6746,U+67cf,U+67d4,U+682a,U+6843,U+6846,U+68da,U+6b3a,U+6b67,U+6c27,U+6c5b,U+6c64,U+6c70,U+6caa,U+6cca,U+6ce1,U+6d12,U+6d45,U+6dd1,U+6dd8,U+6e34,U+6e7f,U+6ee5,U+6f02,U+7092,U+70c2,U+70e6,U+7115,U+7237,U+7272,U+727a,U+72c2,U+739b,U+73b2,U+743c,U+751c,U+758f,U+75b2,U+7686,U+76c6,U+76d2,U+76fc,U+775b,U+77a9,U+7816,U+788e,U+7897,U+78b0,U+79bd,U+7a0d,U+7a91,U+7a9d,U+7ae3,U+7bad,U+7cca,U+7d2b,U+7eb1,U+7f06,U+7f14,U+7f1d,U+7f50,U+7ffc,U+8036,U+80bf,U+80c1,U+80ce,U+80f8,U+8109,U+810f,U+8170,U+8179,U+819c,U+821f,U+8230,U+8236,U+8273,U+829d,U+82f9,U+8305,U+8350,U+83b2,U+83cc,U+8404,U+840d,U+8427,U+8482,U+8679,U+8854,U+886b,U+8bbc,U+8be6,U+8c31,U+8c6b,U+8d4b,U+8dcc,U+8e2a,U+8e48,U+8f90,U+8fb0,U+9022,U+903c,U+903e,U+9065,U+916c,U+917f,U+94a9,U+94c3,U+94dd,U+94ed,U+9510,U+953b,U+96c7,U+970d,U+9738,U+9877,U+987d,U+989c,U+98d8,U+9a70,U+9a91,U+9aa4,U+9b42,U+9b4f,U+9e2d,U+9e3f,U+9e7f,U+9f20;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-06c77b8c66e51ed6c63ccb502dd8b8af.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e59,U+4ed3,U+4f0f,U+4f38,U+4f69,U+4fa7,U+4faf,U+4ff1,U+5077,U+5085,U+5144,U+5151,U+51af,U+51b6,U+51cc,U+523a,U+5251,U+5269,U+5272,U+52d8,U+5353,U+5389,U+53f9,U+5401,U+5415,U+541b,U+54f2,U+5524,U+554a,U+559d,U+5609,U+5740,U+575d,U+5806,U+5821,U+586b,U+5915,U+594f,U+5960,U+5999,U+59a5,U+59b9,U+59c6,U+59d1,U+59dc,U+5b5f,U+5b64,U+5b87,U+5bb4,U+5bbf,U+5c16,U+5c1d,U+5c3e,U+5c9a,U+5ca9,U+5cad,U+5cfb,U+5de1,U+5de7,U+5de9,U+5ef7,U+5f04,U+5f70,U+5f79,U+5fc6,U+602a,U+6050,U+6052,U+6070,U+6084,U+60b2,U+60dc,U+60e9,U+6167,U+6170,U+61c2,U+6270,U+6291,U+62b1,U+62bc,U+62dc,U+62df,U+62f3,U+6324,U+633a,U+6377,U+6398,U+63cf,U+640f,U+642c-642d,U+6458,U+6478,U+6500,U+654c,U+6566,U+658c,U+65c1,U+65cb,U+65e8,U+65ec,U+6696-6697,U+6734,U+679a,U+679d,U+67dc,U+67f3-67f4,U+680f,U+683d,U+684c,U+68af,U+699c,U+6bc1,U+6c0f,U+6c1b,U+6c57,U+6c6a,U+6d3d,U+6d6e,U+6d82,U+6db5,U+6dee,U+6e58,U+6eaa,U+6ecb,U+6ede,U+6ee9,U+6f0f,U+6f20,U+6f58,U+704c,U+7070,U+70b8,U+718a,U+7238,U+7262,U+7275,U+72b9,U+72d7,U+72e0,U+741b,U+7434,U+7483,U+74f6-74f7,U+75ab,U+764c,U+7761,U+7855,U+7891,U+78c1,U+79d2,U+7a00,U+7a3b,U+7c97,U+7ea4,U+7eb2,U+7ed2,U+7eea,U+7ef8,U+7f18,U+7fbd,U+8000,U+8010,U+8096,U+809d,U+80a9,U+817f,U+81e3,U+8206,U+8212,U+82ac,U+8302,U+8361,U+8377,U+83f2,U+8461,U+848b,U+84ec,U+8521,U+85aa,U+8870,U+8877,U+8881,U+888b,U+88ad,U+88c2,U+8986,U+8bd1,U+8bf1,U+8d24,U+8d2a,U+8d3e-8d3f,U+8d41,U+8d56,U+8d64,U+8d6b,U+8e0f,U+8f70,U+8f85,U+8f88,U+8fa9,U+9003,U+901d,U+90b9,U+90ce,U+94a6,U+94f8,U+9505,U+95ea,U+95ef,U+95f2,U+95f9,U+9601,U+9605,U+9634,U+966a,U+9677,U+9690,U+9694,U+96d5,U+971e,U+9896-9897,U+9972,U+9a71,U+9a76,U+9a7e,U+9e1f,U+9e23;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-13ae07ed2e272d26d59bc0691cd7117a.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e01,U+4e43,U+4ea6,U+4ef2,U+4eff,U+4f26,U+4f2a,U+4f2f,U+4f5b,U+4fa8,U+4fca,U+4fd7,U+5021,U+504f,U+5141,U+51c0,U+51dd,U+51e4,U+51ed,U+5200,U+5237,U+5427,U+5448,U+54a8,U+5706,U+5708,U+5723,U+575b,U+57c3,U+5899,U+58a8,U+58c1,U+5976,U+5988,U+59bb,U+59d0,U+59d3,U+5a18,U+5a31,U+5a92,U+5b54,U+5b85,U+5baa-5bab,U+5bc4,U+5bd2,U+5be8,U+5bff,U+5c65,U+5d07,U+5e1d,U+5e78,U+5e7c,U+5f03,U+5f1f,U+5f39,U+5f6d,U+5f92,U+5faa,U+5fbd,U+5fe7,U+5ffd,U+60a8,U+60ef,U+6108,U+6162,U+622a,U+6234,U+626b,U+626d,U+62c6,U+62d2,U+62d4,U+62d6,U+62e8,U+6316,U+6355,U+63ed,U+6447,U+64a4,U+65f1,U+6606,U+6628,U+664b,U+6668,U+6682,U+66f9,U+66fc,U+66ff,U+6717,U+6740,U+676d,U+67aa,U+67ec,U+67f1,U+6842,U+6851,U+695a,U+6982,U+6a2a,U+6b20,U+6b23,U+6b32,U+6b96,U+6bc5,U+6beb,U+6c60,U+6c9f,U+6cea,U+6cf3,U+6d1e,U+6d53,U+6d66,U+6d69,U+6d8c,U+6d9b,U+6db2,U+6de1,U+6dfb,U+6e14,U+6ed1,U+6eda,U+6ee8,U+6f2b,U+706d,U+7089,U+708e,U+70ad-70ae,U+70e7,U+7126,U+714c,U+71c3,U+71d5,U+7206,U+7259,U+731b,U+73a9,U+73bb,U+74dc,U+7532,U+7545,U+755c,U+75c7,U+7687,U+76d7,U+76f2,U+788d,U+78e8,U+79e6,U+79e9,U+7a3f,U+7a46,U+7a97,U+7af9,U+7bee,U+7c4d,U+7c89,U+7cd6,U+7eb5,U+7ebd,U+7ed8,U+8017,U+8033,U+80c0,U+80de,U+80f6,U+8138,U+817e,U+81a8,U+820d,U+827e,U+82b3,U+82d7,U+83b1,U+84c4,U+84dd,U+8584,U+864e,U+865a,U+866b,U+86cb,U+88d5,U+89e6,U+8bca,U+8bde,U+8bfa,U+8c0a,U+8c37,U+8c46,U+8c6a,U+8c8c,U+8d1d,U+8d29,U+8d4f,U+8d54,U+8d5a,U+8d60,U+8d62,U+8f7f,U+8f96,U+8f9e-8f9f,U+8fc1,U+8fdf,U+8fea,U+8ff7,U+9012,U+906d,U+9075,U+90a6,U+90bb,U+90ca,U+9178,U+9192,U+91ca,U+94bb,U+94dc,U+94fa,U+9501,U+950b,U+9521,U+955c,U+963b,U+9655,U+9675-9676,U+9887,U+9891,U+9971,U+9a97,U+9ece,U+9ed8;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-353f33792a8f60dc69323ddf635a269e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e1d,U+4e39,U+4e4c,U+4e4f,U+4e54,U+4e58,U+4e95,U+4ea1,U+4eab,U+4eae,U+4ec1,U+4f10,U+4f19,U+4f30,U+4f34,U+4fb5,U+503e,U+518c,U+5192,U+51a0,U+51ac,U+51b0,U+51e1,U+5211,U+5242,U+52a3,U+52b2,U+52c3,U+52c7,U+52d2,U+52e4,U+5377,U+539a,U+53a6,U+53e5,U+5417,U+5510,U+552f,U+5531,U+574f-5750,U+5761,U+5851,U+5854,U+58ee,U+593a,U+5949,U+5954,U+5a5a,U+5b8b,U+5bbd,U+5c04,U+5c0a,U+5c4b,U+5ce1,U+5cf0,U+5e10,U+5e8a,U+5e9f,U+5ec9,U+5f31,U+5f84,U+5fd8-5fd9,U+5fe0,U+6015,U+6062,U+6069,U+6076,U+6089,U+60a3,U+60ca,U+620f,U+624e,U+6263,U+6298,U+62a2,U+62bd,U+6311,U+6350,U+6389,U+638c,U+63f4,U+6446,U+644a,U+6469,U+64cd,U+654f,U+6562,U+656c,U+65d7,U+65e6,U+65fa,U+660c,U+6653,U+66b4,U+670b,U+672b,U+676f-6770,U+6881,U+6885,U+68a6,U+68cb,U+68ee,U+6b8a,U+6c88-6c89,U+6cc9,U+6ce5,U+6d01,U+6d17,U+6d1b,U+6d59,U+6d6a,U+6da8,U+6df7,U+6e10,U+6e20-6e21,U+6f5c,U+706f,U+70bc,U+719f,U+7267,U+732a,U+73cd,U+7518,U+756a,U+7586,U+7591,U+75db,U+76c8,U+76d0,U+76d6,U+76d8,U+76df,U+76fe,U+77db,U+7801,U+786c,U+795d,U+7965,U+79cb,U+7a77,U+7a7f,U+7aef,U+7b11,U+7bb1,U+7bc7,U+7ea0,U+7eaf,U+7ed5,U+7edc,U+7f13,U+7f29,U+7f34,U+7f8a,U+7ffb,U+8015,U+8058,U+805a,U+8083,U+80af,U+80c6,U+80cc,U+811a,U+8150,U+82e5,U+8336,U+8352,U+83ab,U+8428,U+8463,U+852c,U+8861,U+89c8,U+8bcd,U+8bd7,U+8bda,U+8be2,U+8bef,U+8bf8,U+8c0b,U+8c13,U+8d34,U+8d3a,U+8d74,U+8d76,U+8da3,U+8dd1,U+8ddd,U+8ddf,U+8df3,U+8f68,U+8f6f,U+8f7d,U+8f91,U+8f9b,U+8fbd,U+8fc8,U+8fd4,U+8feb,U+8ff9,U+900f,U+9057,U+907f-9080,U+90d1,U+90ed,U+91ce,U+9519,U+9526,U+95ed,U+9614,U+9635,U+9644,U+9686,U+96c5,U+96ea,U+9707,U+9732,U+9759,U+978b,U+9876,U+9881,U+9910,U+996e,U+9970,U+9c81,U+9e21,U+9ebb,U+9f84;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-0facdf1ea213ba40261022f5d5ed4493.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e3d,U+4e4e,U+4e71,U+4e8f,U+4ed8,U+4eea,U+4f0a,U+4f0d,U+4f11,U+4f1f,U+4f24,U+4f3c,U+4f73,U+4fc4,U+500d,U+5012,U+501f,U+503a,U+505c,U+507f,U+50a8,U+514d,U+5178,U+517c,U+51b2,U+51b7,U+520a,U+5238,U+523b,U+52b1,U+535a,U+5371,U+5385,U+53eb-53ec,U+53f3,U+53f6,U+5409,U+542b,U+542f,U+5434,U+5462,U+5473,U+547c,U+54c8,U+54ea,U+56fa,U+5733,U+5757,U+5766,U+5802,U+585e,U+590f,U+591c,U+591f,U+5947,U+594b,U+5987,U+5a01,U+5b59,U+5b63,U+5b88,U+5b97,U+5b9c,U+5bbe,U+5bfb,U+5c01,U+5c1a,U+5c24,U+5c3c,U+5c97,U+5c9b,U+5cb8,U+5de6,U+5e01,U+5e2e,U+5e45,U+5e55,U+5e84,U+5ef6,U+5f02,U+5f52,U+5f69,U+5f7b,U+5f90,U+5fae,U+6000,U+600e,U+6025,U+60e0,U+6276,U+6297,U+62b5,U+62cd,U+62d3,U+62e5,U+62e9,U+62ff,U+6302,U+632f,U+63e1,U+6444,U+64ad,U+653b,U+6551,U+6563,U+65a4,U+65e7,U+6620,U+667a,U+66f2,U+671d,U+6731,U+6742,U+675f,U+6768,U+677e-677f,U+6790,U+67b6,U+67d3,U+6863,U+68b0,U+68c9,U+690d,U+6b8b,U+6bcd,U+6bd2,U+6bd5,U+6c38,U+6c61,U+6cbf,U+6cdb,U+6cf0,U+6d2a,U+6d89,U+6da6,U+6f6e,U+6fb3,U+7075,U+707e,U+70df,U+7164,U+7236,U+725b,U+7389,U+73e0,U+745e,U+74e6,U+751a,U+7537,U+75be,U+76ae,U+76db,U+793c,U+7956,U+7981,U+79d8,U+79df,U+79fb,U+7adf,U+7ae5,U+7b14,U+7b26,U+7b54,U+7b79,U+7d2f,U+7eb8,U+7eba,U+7ec6,U+7ee9,U+7eff,U+7f5a,U+7f6a,U+7f72,U+8089,U+80a5,U+80e1,U+8111,U+8131,U+821e,U+822c,U+8270,U+8499,U+8651,U+867d,U+8840,U+8857,U+8863,U+88c1,U+89c9,U+89d2,U+8a89,U+8bed,U+8bfe,U+8c01,U+8c22,U+8d21,U+8d25,U+8d2f,U+8d5e,U+8d75,U+8d8b,U+8dc3,U+8de8,U+8df5,U+8f6e,U+8f86,U+8f89,U+8fc5,U+8ff0,U+8ffd,U+9014,U+904d,U+90ae,U+9274,U+949f,U+952e,U+969c,U+96c4,U+96e8,U+96f6-96f7,U+97e9,U+987f,U+996d,U+9a7b,U+9aa8,U+9c7c,U+9c9c,U+9e4f,U+9f13,U+9f50;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-f8ee5d36068a42b51d0e4a1116cfcec1.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e13,U+4e16,U+4e1c,U+4e24,U+4e3e,U+4e49,U+4e61,U+4e66,U+4e89,U+4e8c,U+4e94,U+4e9b,U+4ea4,U+4eac,U+4ebf,U+4eca,U+4ef6-4ef7,U+4efb,U+4f18,U+4f20,U+4f46,U+4f7f,U+4fe1,U+503c,U+505a,U+5146,U+5148,U+515a,U+5171,U+5177,U+519b,U+51b3,U+51c6,U+51e0,U+5212,U+521b,U+522b,U+529e,U+52bf,U+534e-534f,U+5355,U+5357,U+5382,U+539f,U+53bb,U+53bf,U+53c2,U+53c8,U+53ca,U+53d6-53d8,U+53e3,U+53ea,U+53f0,U+540d,U+5411,U+56db,U+56de,U+56e0,U+56e2,U+578b,U+57ce,U+57fa,U+589e,U+5904,U+5934,U+5982,U+5b89,U+5b8c,U+5bfc,U+5c06,U+5c11,U+5c40,U+5c71,U+5e38,U+5e72,U+5e76,U+5e7f,U+5e94,U+5e9c,U+5f0f,U+5f15,U+5f20,U+5f3a,U+5f62,U+5f88,U+5fc5,U+5fd7,U+5feb,U+601d,U+6027,U+60c5,U+60f3,U+610f,U+6216,U+6218,U+624b,U+624d,U+6279,U+628a,U+6295,U+6301,U+6307,U+636e,U+63a5,U+63a8,U+652f,U+6536,U+653e,U+6548,U+6559,U+6570,U+65bd,U+65e0,U+6602,U+660e,U+6613,U+66f4,U+6700,U+670d,U+671f,U+672f,U+6743,U+674e,U+6751,U+6761,U+6784,U+6797,U+679c,U+67e5,U+6807,U+6837,U+683c,U+6b21,U+6b63-6b65,U+6bcf,U+6bd4,U+6c42,U+6c5f,U+6ca1,U+6cbb,U+6d3b,U+6d41,U+6d88,U+6df1,U+70b9,U+7136,U+7269,U+7279,U+7531,U+754c,U+767e,U+76ca,U+76f8,U+770b,U+7740,U+7814,U+79ef,U+7a0b,U+7a0e,U+7a76,U+7b80,U+7cbe,U+7cfb,U+7e41,U+7ea7,U+7ec4,U+7ec7,U+7ed3,U+7ed9,U+7edf,U+7f8e,U+8001,U+804c,U+8054,U+80b2,U+81f3,U+8425,U+8868,U+88ab,U+897f,U+89c1-89c2,U+89c4,U+89c6,U+89e3,U+8ba1,U+8ba4,U+8bae,U+8bb0,U+8bba,U+8bc1,U+8c03,U+8d28,U+8d39,U+8def,U+8f66,U+8f6c,U+8fd0-8fd1,U+9020,U+9053,U+90a3,U+90fd,U+91cc,U+9500,U+9547,U+95e8,U+95f4,U+961f,U+9645,U+9662,U+96be,U+96c6,U+9700,U+9769,U+97e6,U+9875,U+9879,U+9886,U+9898,U+98ce,U+9996,U+2b5af,U+2cc56,U+2e9f5,U+30edd-30ede;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-79d494361ae093b69e74ee9dbe65bfd4.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e03,U+4e30,U+4e34,U+4e45,U+4e60,U+4e70,U+4e88,U+4e91-4e92,U+4ea9,U+4eb2,U+4ec0,U+4ecb,U+4ecd,U+4ee4,U+4fee,U+5019,U+5047,U+50cf,U+5145,U+516d,U+5170,U+5175,U+5199,U+51cf,U+51fb,U+521a,U+5224,U+5267,U+52aa,U+5347-5348,U+534a,U+5356,U+5361,U+536b,U+5370,U+538b,U+53e4,U+53e6,U+5403,U+5426,U+5428,U+542c,U+5438,U+5668,U+56ed,U+56f4,U+56fe,U+57df,U+592a,U+5957,U+5b69,U+5b81,U+5b8f,U+5b98,U+5b9d,U+5ba1,U+5ba4,U+5bb3,U+5bc6,U+5bdf,U+5c3d,U+5c5e,U+5c81,U+5ddd,U+5de8,U+5dee,U+5e0c,U+5e86,U+5e8f,U+5e93,U+5e95,U+5e97,U+5ea7,U+5ead,U+5eb7,U+5f55,U+5f81,U+5f85,U+5ff5,U+6001,U+613f,U+6258,U+6267,U+6269,U+626c,U+627e,U+62db,U+62ec,U+6325,U+635f,U+6362,U+6388,U+6392,U+63a2,U+63a7,U+63aa,U+641e,U+6545,U+6597,U+65e2,U+65e9,U+661f,U+665a,U+666e-666f,U+66fe,U+6728,U+67d0,U+6811,U+6838,U+6865,U+697c,U+6b22,U+6b27,U+6b4c,U+6b62,U+6b66,U+6b7b,U+6bdb,U+6c47,U+6c49,U+6c7d,U+6c99,U+6cfd,U+6d0b,U+6d25,U+6d32,U+6d3e,U+6d4b,U+6e29,U+6e56,U+6e7e,U+6f14,U+6fc0,U+706b,U+70c8,U+7247,U+72af,U+72b6,U+72ec,U+732e,U+73ed,U+7403,U+7533,U+753b,U+7559,U+7565,U+7597,U+767b,U+773c,U+7763,U+77ed,U+77ff,U+7968,U+798f,U+79bb,U+79c0-79c1,U+7ad9,U+7ae0,U+7b51,U+7b7e,U+7cae,U+7d22,U+7ea2,U+7eb3,U+7eb7,U+7ec3,U+7ec8,U+7ecd,U+7edd,U+7efc,U+7f16,U+7f3a,U+7f51,U+7f57,U+7f6e,U+80dc,U+822a,U+8239,U+826f,U+82cf,U+82e6,U+8349,U+8363,U+83dc,U+8457,U+85cf,U+878d,U+8865,U+8a00,U+8b66,U+8ba2,U+8ba8,U+8bad,U+8bb2,U+8bc9,U+8bd5,U+8bfb,U+8d2b,U+8d35,U+8d37,U+8f7b,U+8f93,U+8fce,U+8fdd,U+9000-9002,U+9010,U+9047,U+9093,U+9152,U+9488,U+94a2,U+9633,U+9636,U+963f,U+9646,U+9648,U+964d,U+9664,U+9669,U+9760,U+97f3,U+987a,U+987e,U+9884,U+98de,U+9986,U+9ed1;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-74e2263a91439c25b91d5132ce9f4d62.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4e14,U+4e25,U+4e48,U+4e50,U+4e5d,U+4e9a,U+4ec5,U+4efd,U+4f17,U+4f4e-4f4f,U+4f55,U+4f59,U+4f60,U+4f8b,U+4f9b,U+4f9d,U+4fbf,U+4fc3,U+5065,U+513f,U+5149,U+514b,U+516b,U+5174,U+517b,U+518d,U+51b5,U+5207,U+5217-5219,U+521d,U+526f,U+529f,U+52a9,U+52b3,U+5305,U+533b,U+5343,U+5360,U+5373-5374,U+5386,U+53cb-53cd,U+53f2,U+53f7,U+544a,U+5468,U+547d,U+54cd,U+552e,U+5584,U+56f0,U+571f,U+5747,U+575a,U+57f9,U+5883,U+58eb,U+58f0,U+5907,U+590d,U+592e,U+5931,U+5956,U+5965,U+5973,U+5979,U+59cb,U+5b57-5b58,U+5b83,U+5ba2-5ba3,U+5bb9,U+5bcc,U+5c42,U+5c45,U+5c4a,U+5dde,U+5df1,U+5df4,U+5e03,U+5e08,U+5e26,U+5e2d,U+5f71,U+5f80,U+5f8b,U+5fb7,U+606f,U+611f,U+6237,U+623f,U+6253,U+627f,U+6293,U+62a4,U+62c5,U+62c9,U+6309,U+6574,U+6599,U+65ad,U+65af,U+65c5,U+65cf,U+6625,U+663e,U+671b,U+672a,U+6750,U+6781,U+6821,U+6839,U+6848,U+68c0,U+6a21,U+6b3e,U+6bb5,U+6c14,U+6cb3,U+6cb9,U+6ce8,U+6e05,U+6e2f,U+6e38,U+6e90,U+6ee1,U+70ed,U+7167,U+7231,U+7248,U+724c,U+7387,U+738b,U+73af,U+7530,U+75c5,U+767d,U+76d1,U+76f4,U+771f,U+77e5,U+77f3,U+7834,U+7840,U+786e,U+793a,U+795e,U+79f0,U+7a33,U+7a7a,U+7a81,U+7ade,U+7b56,U+7b97,U+7c73,U+7c7b,U+7d20,U+7d27,U+7ea6,U+7eaa,U+7ebf,U+7ee7,U+7eed,U+7ef4,U+7fa4,U+8003,U+80a1,U+81f4,U+8272,U+827a,U+8282,U+82b1,U+82f1,U+8303,U+836f,U+83b7,U+843d,U+88c5,U+8ba9,U+8baf,U+8bb8,U+8bbf,U+8bc4,U+8bc6,U+8bdd,U+8be5,U+8bf7,U+8c08,U+8c61,U+8d1f,U+8d22-8d23,U+8d27,U+8d2d,U+8d38,U+8d5b,U+8d70,U+8d85,U+8d8a,U+8db3,U+8eab,U+8f83,U+8fb9,U+8fdc,U+8fde,U+9009,U+901f,U+914d,U+91c7,U+94b1,U+94c1,U+94f6,U+95fb,U+9632,U+9650,U+968f,U+9752,U+975e,U+987b,U+989d,U+98df,U+9999,U+9a6c,U+9a8c,U+9ec4,U+9feb-9fec;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-ee8bae97908d5147b423f77ad0d3c1bb.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+98fb-990c,U+990e-990f,U+9911-992d,U+992f-9953,U+9956-9962,U+9964,U+9966,U+9973,U+9978-9979,U+997b,U+997e,U+9982-9983,U+9989,U+998c,U+998e,U+999a-99a4,U+99a6-99a7,U+99a9-99c8;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-56467a5c8840c4d23a60b2f935114848.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8e4c-8e50,U+8e53-8e58,U+8e5a-8e65,U+8e67-8e68,U+8e6a-8e6b,U+8e6e,U+8e71,U+8e73,U+8e75,U+8e77-8e7b,U+8e7d-8e7e,U+8e80,U+8e82-8e84,U+8e86,U+8e88-8e8e,U+8e91-8e93,U+8e95-8e9b,U+8e9d,U+8e9f-8eaa,U+8ead-8eae,U+8eb0-8eb1,U+8eb3-8eb9,U+8ebb-8ecd,U+8ecf-8f02;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-145aa02cdd91946e67dc934e1acffe75.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+2e3a,U+3001-3002,U+3008-3011,U+3014-3017,U+301d-301f,U+4dae,U+4e00,U+4e07,U+4e09-4e0b,U+4e0d-4e0e,U+4e1a,U+4e2a,U+4e2d,U+4e3a-4e3b,U+4e4b,U+4e5f,U+4e86,U+4e8b,U+4e8e,U+4ea7,U+4eba,U+4ece,U+4ed1,U+4ed6,U+4ee3,U+4ee5,U+4eec,U+4f01,U+4f1a,U+4f4d,U+4f53,U+4f5c,U+4fdd,U+5143,U+5165,U+5168,U+516c,U+5173,U+5176,U+5185,U+519c,U+51fa,U+5206,U+5229,U+5230,U+5236,U+524d,U+529b,U+52a0-52a1,U+52a8,U+5316-5317,U+533a,U+5341,U+5362,U+53d1,U+53ef,U+53f8,U+5404,U+5408,U+540c,U+540e,U+5458,U+548c,U+54c1,U+54e5,U+5546,U+559c,U+56fd,U+5728,U+5730,U+573a,U+5916,U+591a,U+5927,U+5929,U+592b,U+597d,U+59d4,U+5b50,U+5b66,U+5b9a,U+5b9e,U+5bb6,U+5bf9,U+5c0f,U+5c14,U+5c31,U+5c55,U+5de5,U+5df2,U+5e02,U+5e73-5e74,U+5ea6,U+5efa,U+5f00,U+5f53,U+5f97,U+5fc3,U+603b,U+6210-6211,U+6240,U+6280,U+62a5,U+63d0,U+6539,U+653f,U+6587,U+65b0,U+65b9,U+65e5,U+65f6,U+662f,U+6708-6709,U+672c,U+673a,U+675c,U+6765,U+6c11,U+6c34,U+6cd5,U+6ce2,U+6d4e,U+6d77,U+73b0,U+7406,U+751f,U+7528,U+7535,U+7684,U+76ee,U+793e,U+79cd,U+79d1,U+7acb,U+7b2c,U+7b49,U+7ba1,U+7ecf,U+8005,U+800c,U+80fd,U+81ea,U+884c,U+8981,U+8bbe,U+8bf4,U+8d44,U+8d77,U+8fbe,U+8fc7,U+8fd8-8fd9,U+8fdb,U+901a,U+90e8,U+91cd,U+91cf,U+91d1,U+9485,U+957f,U+95ee,U+9762,U+9ad8,U+9ea6,U+9f99,U+9fcf,U+9fd4,U+9fed,U+fe10-fe19,U+fe30-fe31,U+fe33-fe44,U+ff01,U+ff0c,U+ff1f,U+2b4e7,U+2b7f7,U+2b7fc,U+2cb2d,U+2cb3b,U+2cb4a,U+2cb5b,U+2cb73;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-54acdfc2166ad7fcbd074f75fd4a56ba.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+6490,U+6493-6494,U+6497-6498,U+649a-649d,U+649f-64a3,U+64a5-64a8,U+64aa-64ab,U+64af,U+64b1-64b4,U+64b6,U+64b9,U+64bb,U+64bd-64bf,U+64c1,U+64c3-64c4,U+64c6-64cc,U+64cf,U+64d1,U+64d3-64d6,U+64d9-64dd,U+64df-64e1,U+64e3,U+64e5,U+64e7-64ff,U+6501-6508,U+650a-6511,U+6513-6517,U+6519-6524,U+6526-652a,U+652c-652d,U+6530-6533,U+6537,U+653a,U+653c-653d,U+6540-6544,U+6546-6547,U+654a-654b,U+654d-654e,U+6550,U+6552-6554,U+6557-6558,U+655a,U+655c,U+655f-6561,U+6564-6565,U+6567-6568;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-29cec36cd205b211da97acabaa62f055.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9695-9696,U+969a-969b,U+969d-96a6,U+96a8-96af,U+96b1-96b2,U+96b4-96b5,U+96b7-96b8,U+96ba-96bb,U+96bf,U+96c2-96c3,U+96c8,U+96ca-96cb,U+96d0-96d1,U+96d3-96d4,U+96d6-96df,U+96e1-96e7,U+96eb-96ee,U+96f0-96f2,U+96f4-96f5,U+96f8,U+96fa-96fd,U+96ff,U+9702-9703,U+9705,U+970a-970c,U+9710-9712,U+9714-9715,U+9717-971b,U+971d,U+971f-9729,U+972b-972c,U+972e-972f,U+9731,U+9733-9737,U+973a-973d,U+973f-9751,U+9754-9755,U+9757-9758,U+975a,U+975c-975d,U+975f,U+9763-9764,U+9766-9768,U+976a-9770;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-3756e81d3e149cf6099163ee79944fec.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+6af0-6b1f,U+6b25-6b26,U+6b28-6b31,U+6b33-6b36,U+6b38,U+6b3b-6b3d,U+6b3f-6b42,U+6b44-6b45,U+6b48,U+6b4a-6b4b,U+6b4d-6b58,U+6b5a-6b61,U+6b68-6b69,U+6b6b-6b78,U+6b7a,U+6b7d-6b80,U+6b85,U+6b88,U+6b8c,U+6b8e-6b91,U+6b94-6b95,U+6b97-6b99,U+6b9c-6ba0,U+6ba2-6ba9,U+6bab-6bb2,U+6bb6,U+6bb8-6bba;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-8e9f97f01034820170065b2921b4fb5e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+430e-439a,U+29e8a,U+29ec4,U+29edb,U+29ee9,U+29f7e,U+29f83,U+29f8c,U+29fce,U+2a01a,U+2a02f,U+2a082,U+2a0f9,U+2a190,U+2a38c;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-13d2887ec8ee73c43acdabc52a05af7b.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+92ef-933d,U+933f-9369,U+936b-9388;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-72536a3d71b694a0d53dd90ddceae41e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4512-458d,U+2b300,U+2b363,U+2b36f,U+2b372,U+2b37d,U+2b404,U+2b410,U+2b413,U+2b461,U+2b4ef,U+2b4f6,U+2b4f9,U+2b50d-2b50e,U+2b536,U+2b5ae,U+2b5b3,U+2b5e7,U+2b5f4,U+2b61c-2b61d,U+2b626-2b628,U+2b62a,U+2b62c,U+2b695-2b696,U+2b6ad,U+2b6ed;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-603aefd23e350ba7eb124273e3c9bcf1.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+88bd-88c0,U+88c3-88c4,U+88c7-88c8,U+88ca-88cd,U+88cf-88d1,U+88d3,U+88d6-88d7,U+88da-88de,U+88e0-88e1,U+88e6-88e7,U+88e9-88ef,U+88f2,U+88f5-88f7,U+88fa-88fb,U+88fd,U+88ff-8901,U+8903-8909,U+890b-890f,U+8911,U+8914-8918,U+891c-8920,U+8922-8924,U+8926-8929,U+892c-892f,U+8931-8933,U+8935,U+8937-8940,U+8942-8943,U+8945-895d,U+8960-8965,U+8967-897a,U+897c-897e,U+8980,U+8982,U+8984-8985;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-095c169f3314805276f603a362766abd.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4b0b-4ba0;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-9544732d2e62d1a429674f8ee41b5d3a.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7179,U+717b-717c,U+717e-7183,U+7185-7189,U+718b-718e,U+7190-7193,U+7195-7197,U+719a-719e,U+71a1-71a7,U+71a9-71ab,U+71ad-71b2,U+71b4,U+71b6-71b8,U+71ba-71c2,U+71c4-71cd,U+71cf-71d3,U+71d6-71df,U+71e1-71e4,U+71e6,U+71e8-71ed,U+71ef-71f8,U+71fa-7205,U+7207-721c,U+721e-7227,U+7229,U+722b,U+722d;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-d3716376641d615e2995605b29bca7b6.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+982e-9874,U+988b,U+988e,U+9892,U+9895,U+9899,U+98a3,U+98a8-98cd,U+98cf-98d0,U+98d4,U+98d6-98d7,U+98db-98dd,U+98e0-98e6,U+98e9-98fa;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-5a1ce3117cfe90c48e8fb4a9a00f694d.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7c14-7c15,U+7c17-7c1e,U+7c20-7c25,U+7c28-7c29,U+7c2b-7c37,U+7c39-7c3e,U+7c42-7c4c,U+7c4e-7c72,U+7c75-7c7a,U+7c7e-7c88,U+7c8a-7c90,U+7c93-7c94,U+7c96,U+7c99-7c9b,U+7ca0-7ca1,U+7ca3,U+7ca6-7ca9,U+7cab-7cad,U+7caf-7cb0,U+7cb4-7cb8,U+7cba-7cbb,U+7cbf-7cc0,U+7cc2-7cc4,U+7cc6,U+7cc9,U+7ccb,U+7cce-7cd4;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-b7d203b051eff504ff59ddca7576b6a9.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7d95-7da5,U+7da7-7dad,U+7daf-7e2a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4a38cc3e9cf104e69ba246d37f8cf135.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4a78-4b0a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-982b630266d87db93d2539affb1275c6.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9b30-9b31,U+9b33-9b3a,U+9b3d-9b40,U+9b46,U+9b4a-9b4c,U+9b4e,U+9b50,U+9b52-9b53,U+9b55-9bcf;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-9592bfc861f07bcb8d75c196b370e548.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+6a4b-6a4f,U+6a51-6a57,U+6a5a,U+6a5c-6a60,U+6a62-6a64,U+6a66-6a70,U+6a72-6a78,U+6a7a-6a7b,U+6a7d-6a7f,U+6a81-6a83,U+6a85-6a8d,U+6a8f,U+6a92-6a96,U+6a98-6a9f,U+6aa1-6aa8,U+6aaa,U+6aad-6aef;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-a7accba310e821da5505f71c03b76bdb.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+99c9-9a53;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-dac48066b5883d8b4551fc584f0c2a3e.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8550-8555,U+8557-8558,U+855a-855d,U+855f-8563,U+8565-8567,U+8569-8571,U+8573,U+8575-8578,U+857c-857d,U+857f-8583,U+8586,U+8588-858e,U+8590-859a,U+859d-85a3,U+85a5-85a7,U+85a9,U+85ab-85ad,U+85b1-85b6,U+85b8,U+85ba-85c0,U+85c2-85c8,U+85ca-85ce,U+85d1-85d2,U+85d4,U+85d6-85db,U+85dd-85e3,U+85e5-85e8,U+85ea-85fa,U+85fc-85fe,U+8600-8603;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-a1f916d6039285c4ffb900cd654e418f.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+6fb2,U+6fb4-6fb5,U+6fb7-6fb8,U+6fba-6fbf,U+6fc1,U+6fc3-6fc8,U+6fca-6fd0,U+6fd3-6fdd,U+6fdf,U+6fe2-6fed,U+6ff0-7010,U+7012-7019,U+701c-7022,U+7024-7034,U+7036-7038,U+703a-704b,U+704d-704e,U+7050-7053;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-95bfd249da4902577b4b7d76ebdd0b44.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4ba1-4c2c;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-93fc8f28a33234bcadf1527cafabd502.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9a54-9a6b,U+9a72,U+9a83,U+9a89,U+9a8d-9a8e,U+9a94-9a95,U+9a99,U+9aa6,U+9aa9-9aaf,U+9ab2-9ab5,U+9ab9,U+9abb,U+9abd-9abf,U+9ac3-9ac4,U+9ac6-9aca,U+9acd-9ad0,U+9ad2,U+9ad4-9ad7,U+9ad9-9ade,U+9ae0,U+9ae2-9ae5,U+9ae7-9aea,U+9aec,U+9aee,U+9af0-9af8,U+9afa,U+9afc-9b02,U+9b04-9b07,U+9b09-9b0e,U+9b10-9b12,U+9b14-9b1e,U+9b20-9b22,U+9b24-9b2e;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-903bb6865f3452e2fda42e3a25547bc5.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9d1a-9da1;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-4aca6a43e59aceee2166b0c7e4e85ef1.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9e13-9e1e,U+9e24,U+9e27,U+9e2e,U+9e30,U+9e34,U+9e3b-9e3c,U+9e40,U+9e4d,U+9e50,U+9e52-9e54,U+9e56,U+9e59,U+9e5d,U+9e5f-9e62,U+9e65,U+9e6e-9e6f,U+9e72,U+9e74-9e7d,U+9e80-9e81,U+9e83-9e86,U+9e89-9e8a,U+9e8c-9e91,U+9e94-9e9c,U+9e9e,U+9ea0-9ea5,U+9ea7-9eb3,U+9eb5-9eb7,U+9eb9-9eba,U+9ebc,U+9ebf-9ec3,U+9ec5-9ec8,U+9eca-9ecc,U+9ed0,U+9ed2-9ed3,U+9ed5-9ed7,U+9ed9-9eda,U+9ede,U+9ee1,U+9ee3-9ee4,U+9ee6,U+9ee8,U+9eeb-9eee,U+9ef0-9ef8;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-24476a126f129212beb33f66853ea151.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+8b1c-8b25,U+8b27-8b65,U+8b67-8b6b,U+8b6d-8b9f,U+8bac,U+8bb1,U+8bbb,U+8bc7,U+8bd0;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-1b611157cd46bb184d4fa4dae2d6a2b8.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4cad-4d2f;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-56a32a7689abd0326e57c10c6c069bb4.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9c4b-9c7b,U+9c7d-9c7e,U+9c80,U+9c83-9c84,U+9c89-9c8a,U+9c8c,U+9c8f,U+9c93,U+9c96-9c99,U+9c9d,U+9caa,U+9cac,U+9caf,U+9cb9,U+9cbe-9cc2,U+9cc8-9cc9,U+9cd1-9cd2,U+9cda-9cdb,U+9ce0-9ce1,U+9ce3-9d19;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-3cc70dbb64df5b21f1326cc24dee2195.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9389-938e,U+9390-93c9,U+93cb-93d5,U+93d7-9410;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-f6032fc06eb20480f096199713f70885.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+20a0-20b5,U+20b9-20ba,U+20bc-20bd,U+4e2c,U+5107,U+5216,U+5293,U+54f3,U+5523,U+5819,U+5adc,U+5c88,U+5e3b,U+5fee,U+62f6,U+63be,U+6484,U+6499,U+67d9,U+67dd,U+6d5e,U+6f46,U+717a,U+71e0,U+72c1,U+73e7,U+75b0,U+7603,U+7722,U+7809,U+7811,U+7946,U+7967,U+799a,U+7b45,U+7ba2,U+8014,U+80d9,U+8159,U+817d,U+81a3,U+81aa,U+8201,U+833c,U+836e,U+83e5,U+8459,U+84f0,U+8729,U+8753,U+87d3,U+89dc,U+8bf6,U+8c2e,U+8e2c,U+8e9c,U+8e9e,U+8ece,U+8fee,U+9139,U+914f,U+9174,U+9191,U+960c,U+9622,U+9a98,U+9b48,U+9ca6,U+9cb0,U+9da2-9e12,U+9e88,U+9f44,U+9f86;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-e2ead7ea7da0437f085f42ffc05f8d13.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9bd0-9c4a;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-97f7f48ce90c9429bf32ae51469db74d.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4c2d-4cac;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-24a21c1e4449222e8d1898d69ff3a404.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+4d30-4dab;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-726303e0774b4e678bff8c2deb6ca603.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9411-943d,U+943f-946a,U+946c-9484;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-5a7fac4b8b23a6e4e5ba0c9bf1756c91.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+9efa,U+9efd,U+9eff-9f0a,U+9f0c,U+9f0f,U+9f11-9f12,U+9f14-9f16,U+9f18,U+9f1a-9f1f,U+9f21,U+9f23-9f2b,U+9f2d-9f2e,U+9f30-9f36,U+9f38,U+9f3a,U+9f3c,U+9f3f-9f43,U+9f45-9f4f,U+9f52-9f7e,U+9f81-9f82,U+9f8d-9f94;
-}
-
-@font-face {
-  font-family: "Xiaolai";
-  src: url("/fonts/Xiaolai/Xiaolai-Regular-2b7441d46298788ac94e610ffcc709b6.woff2") format("woff2");
-  font-display: swap;
-  font-style: normal;
-  font-weight: 400;
-  unicode-range: U+7e2b-7e3a,U+7e3c-7e40,U+7e42-7e46,U+7e48-7e81,U+7e83-7e9a,U+7e9c-7e9e,U+7eae,U+7eb4,U+7ebb-7ebc,U+7ed6,U+7ee4,U+7eec,U+7ef9,U+7f0a,U+7f10,U+7f1e,U+7f37,U+7f39,U+7f3b;
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/index.ts b/web/apps/web-ele/src/components/zq-draw/index.ts
deleted file mode 100644
index 66d5177..0000000
--- a/web/apps/web-ele/src/components/zq-draw/index.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export { default as ZqDraw } from './ZqDraw.vue';
-export { default as DrawPreview } from './DrawPreview.vue';
-export type {
-  DrawData,
-  DrawElement,
-  DrawProps,
-  DrawEmits,
-  AppState,
-  ToolType,
-  BinaryFiles,
-} from './types';
-export { useDrawStore } from './store/draw-store';
diff --git a/web/apps/web-ele/src/components/zq-draw/math/curve.ts b/web/apps/web-ele/src/components/zq-draw/math/curve.ts
deleted file mode 100644
index c283a15..0000000
--- a/web/apps/web-ele/src/components/zq-draw/math/curve.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { Point } from './types';
-
-/**
- * Evaluate a quadratic Bezier curve at parameter t.
- */
-export function quadraticBezier(
-  p0: Point,
-  p1: Point,
-  p2: Point,
-  t: number,
-): Point {
-  const mt = 1 - t;
-  return [
-    mt * mt * p0[0] + 2 * mt * t * p1[0] + t * t * p2[0],
-    mt * mt * p0[1] + 2 * mt * t * p1[1] + t * t * p2[1],
-  ];
-}
-
-/**
- * Evaluate a cubic Bezier curve at parameter t.
- */
-export function cubicBezier(
-  p0: Point,
-  p1: Point,
-  p2: Point,
-  p3: Point,
-  t: number,
-): Point {
-  const mt = 1 - t;
-  const mt2 = mt * mt;
-  const t2 = t * t;
-  return [
-    mt2 * mt * p0[0] +
-      3 * mt2 * t * p1[0] +
-      3 * mt * t2 * p2[0] +
-      t2 * t * p3[0],
-    mt2 * mt * p0[1] +
-      3 * mt2 * t * p1[1] +
-      3 * mt * t2 * p2[1] +
-      t2 * t * p3[1],
-  ];
-}
-
-/**
- * Approximate the length of a cubic Bezier curve by sampling.
- */
-export function cubicBezierLength(
-  p0: Point,
-  p1: Point,
-  p2: Point,
-  p3: Point,
-  steps = 50,
-): number {
-  let length = 0;
-  let prev = p0;
-  for (let i = 1; i <= steps; i++) {
-    const t = i / steps;
-    const curr = cubicBezier(p0, p1, p2, p3, t);
-    length += Math.hypot(curr[0] - prev[0], curr[1] - prev[1]);
-    prev = curr;
-  }
-  return length;
-}
-
-/**
- * Sample points along a cubic Bezier curve.
- */
-export function cubicBezierPoints(
-  p0: Point,
-  p1: Point,
-  p2: Point,
-  p3: Point,
-  count: number,
-): Point[] {
-  const points: Point[] = [];
-  for (let i = 0; i <= count; i++) {
-    points.push(cubicBezier(p0, p1, p2, p3, i / count));
-  }
-  return points;
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/math/line.ts b/web/apps/web-ele/src/components/zq-draw/math/line.ts
deleted file mode 100644
index d3efbb8..0000000
--- a/web/apps/web-ele/src/components/zq-draw/math/line.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import type { Line, Point } from './types';
-import { pointDistanceSq } from './point';
-
-export function lineLength(line: Line): number {
-  return Math.hypot(line[1][0] - line[0][0], line[1][1] - line[0][1]);
-}
-
-export function lineMidpoint(line: Line): Point {
-  return [(line[0][0] + line[1][0]) / 2, (line[0][1] + line[1][1]) / 2];
-}
-
-export function lineAngle(line: Line): number {
-  return Math.atan2(line[1][1] - line[0][1], line[1][0] - line[0][0]);
-}
-
-/**
- * Returns the closest point on a line segment to a given point,
- * and the distance squared.
- */
-export function lineClosestPoint(
-  line: Line,
-  p: Point,
-): { point: Point; distanceSq: number } {
-  const [a, b] = line;
-  const dx = b[0] - a[0];
-  const dy = b[1] - a[1];
-  const lenSq = dx * dx + dy * dy;
-
-  if (lenSq === 0) {
-    return { point: a, distanceSq: pointDistanceSq(a, p) };
-  }
-
-  let t = ((p[0] - a[0]) * dx + (p[1] - a[1]) * dy) / lenSq;
-  t = Math.max(0, Math.min(1, t));
-
-  const closest: Point = [a[0] + t * dx, a[1] + t * dy];
-  return { point: closest, distanceSq: pointDistanceSq(closest, p) };
-}
-
-export function lineIntersectsLine(
-  l1: Line,
-  l2: Line,
-): Point | null {
-  const [a, b] = l1;
-  const [c, d] = l2;
-
-  const denom =
-    (d[1] - c[1]) * (b[0] - a[0]) - (d[0] - c[0]) * (b[1] - a[1]);
-  if (Math.abs(denom) < 1e-10) return null;
-
-  const ua =
-    ((d[0] - c[0]) * (a[1] - c[1]) - (d[1] - c[1]) * (a[0] - c[0])) / denom;
-  const ub =
-    ((b[0] - a[0]) * (a[1] - c[1]) - (b[1] - a[1]) * (a[0] - c[0])) / denom;
-
-  if (ua < 0 || ua > 1 || ub < 0 || ub > 1) return null;
-
-  return [a[0] + ua * (b[0] - a[0]), a[1] + ua * (b[1] - a[1])];
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/math/point.ts b/web/apps/web-ele/src/components/zq-draw/math/point.ts
deleted file mode 100644
index 4fab8e8..0000000
--- a/web/apps/web-ele/src/components/zq-draw/math/point.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import type { Point, Vector } from './types';
-
-export function pointFrom(x: number, y: number): Point {
-  return [x, y];
-}
-
-export function pointDistance(a: Point, b: Point): number {
-  return Math.hypot(b[0] - a[0], b[1] - a[1]);
-}
-
-export function pointDistanceSq(a: Point, b: Point): number {
-  const dx = b[0] - a[0];
-  const dy = b[1] - a[1];
-  return dx * dx + dy * dy;
-}
-
-export function pointAdd(a: Point, b: Vector): Point {
-  return [a[0] + b[0], a[1] + b[1]];
-}
-
-export function pointSubtract(a: Point, b: Point): Vector {
-  return [a[0] - b[0], a[1] - b[1]];
-}
-
-export function pointScale(p: Point, s: number): Point {
-  return [p[0] * s, p[1] * s];
-}
-
-export function pointMidpoint(a: Point, b: Point): Point {
-  return [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2];
-}
-
-export function pointRotate(
-  p: Point,
-  angle: number,
-  center: Point = [0, 0],
-): Point {
-  const cos = Math.cos(angle);
-  const sin = Math.sin(angle);
-  const dx = p[0] - center[0];
-  const dy = p[1] - center[1];
-  return [center[0] + dx * cos - dy * sin, center[1] + dx * sin + dy * cos];
-}
-
-export function pointLerp(a: Point, b: Point, t: number): Point {
-  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
-}
-
-export function pointEquals(a: Point, b: Point, tolerance = 0): boolean {
-  return (
-    Math.abs(a[0] - b[0]) <= tolerance && Math.abs(a[1] - b[1]) <= tolerance
-  );
-}
-
-export function vectorLength(v: Vector): number {
-  return Math.hypot(v[0], v[1]);
-}
-
-export function vectorNormalize(v: Vector): Vector {
-  const len = vectorLength(v);
-  if (len === 0) return [0, 0];
-  return [v[0] / len, v[1] / len];
-}
-
-export function vectorDot(a: Vector, b: Vector): number {
-  return a[0] * b[0] + a[1] * b[1];
-}
-
-export function vectorCross(a: Vector, b: Vector): number {
-  return a[0] * b[1] - a[1] * b[0];
-}
-
-export function vectorPerpendicular(v: Vector): Vector {
-  return [-v[1], v[0]];
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/math/polygon.ts b/web/apps/web-ele/src/components/zq-draw/math/polygon.ts
deleted file mode 100644
index 0dab2bf..0000000
--- a/web/apps/web-ele/src/components/zq-draw/math/polygon.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { Bounds, Point, Polygon } from './types';
-
-export function polygonBounds(polygon: Polygon): Bounds {
-  let minX = Infinity;
-  let minY = Infinity;
-  let maxX = -Infinity;
-  let maxY = -Infinity;
-
-  for (const [x, y] of polygon) {
-    if (x < minX) minX = x;
-    if (y < minY) minY = y;
-    if (x > maxX) maxX = x;
-    if (y > maxY) maxY = y;
-  }
-
-  return [minX, minY, maxX, maxY];
-}
-
-export function polygonContainsPoint(polygon: Polygon, p: Point): boolean {
-  let inside = false;
-  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-    const xi = polygon[i]![0];
-    const yi = polygon[i]![1];
-    const xj = polygon[j]![0];
-    const yj = polygon[j]![1];
-
-    const intersect =
-      yi > p[1] !== yj > p[1] &&
-      p[0] < ((xj - xi) * (p[1] - yi)) / (yj - yi) + xi;
-
-    if (intersect) inside = !inside;
-  }
-  return inside;
-}
-
-export function polygonArea(polygon: Polygon): number {
-  let area = 0;
-  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-    area += polygon[j]![0] * polygon[i]![1];
-    area -= polygon[i]![0] * polygon[j]![1];
-  }
-  return Math.abs(area / 2);
-}
-
-export function polygonCenter(polygon: Polygon): Point {
-  let cx = 0;
-  let cy = 0;
-  for (const [x, y] of polygon) {
-    cx += x;
-    cy += y;
-  }
-  const n = polygon.length;
-  return [cx / n, cy / n];
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/math/types.ts b/web/apps/web-ele/src/components/zq-draw/math/types.ts
deleted file mode 100644
index bb03350..0000000
--- a/web/apps/web-ele/src/components/zq-draw/math/types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type Point = [number, number];
-export type Vector = [number, number];
-export type Line = [Point, Point];
-export type Polygon = Point[];
-export type Bounds = [minX: number, minY: number, maxX: number, maxY: number];
diff --git a/web/apps/web-ele/src/components/zq-draw/store/draw-store.ts b/web/apps/web-ele/src/components/zq-draw/store/draw-store.ts
deleted file mode 100644
index 3e7374d..0000000
--- a/web/apps/web-ele/src/components/zq-draw/store/draw-store.ts
+++ /dev/null
@@ -1,978 +0,0 @@
-import { defineStore } from 'pinia';
-import { markRaw, ref, computed, shallowRef } from 'vue';
-
-import type {
-  DrawElement,
-  NonDeletedDrawElement,
-  AppState,
-  ActiveTool,
-  ToolType,
-  BinaryFiles,
-  BinaryFileData,
-  DrawData,
-  GlobalPoint,
-  NormalizedZoomValue,
-  DataURL,
-  FileId,
-  Zoom,
-  DrawSelectionElement,
-  DrawTextElement,
-  DrawArrowElement,
-  DrawLinearElement,
-  DrawImageElement,
-  Arrowhead,
-  SnapLine,
-  TextAlign,
-  VerticalAlign,
-  LinearElementEditorState,
-  SuggestedBinding,
-} from '../types';
-import {
-  DEFAULT_ELEMENT_STROKE_COLOR,
-  DEFAULT_ELEMENT_BACKGROUND_COLOR,
-  DEFAULT_ELEMENT_FILL_STYLE,
-  DEFAULT_ELEMENT_STROKE_WIDTH,
-  DEFAULT_ELEMENT_STROKE_STYLE,
-  DEFAULT_ELEMENT_ROUGHNESS,
-  DEFAULT_ELEMENT_OPACITY,
-  DEFAULT_FONT_SIZE,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_END_ARROWHEAD,
-  DEFAULT_GRID_SIZE,
-  DEFAULT_GRID_STEP,
-  DEFAULT_ZOOM,
-  CANVAS_BACKGROUND_LIGHT,
-  MIN_ZOOM,
-  MAX_ZOOM,
-  ZOOM_STEP,
-} from '../constants';
-import { Scene } from '../core/scene';
-import { History, type HistoryEntry } from '../core/history';
-import { renderStaticScene } from '../core/renderer/static-scene';
-import { renderInteractiveScene } from '../core/renderer/interactive-scene';
-import { viewportCoordsToScene } from '../core/renderer/helpers';
-import { hitTest } from '../elements/collision';
-import { getCommonBounds } from '../elements/bounds';
-import { duplicateElements } from '../elements/duplicate';
-import {
-  copyElements,
-  cutElements,
-  pasteElements,
-} from '../core/clipboard';
-import { toDrawData, deserializeFromJSON } from '../data/json';
-import { newImageElement } from '../elements/new-element';
-import {
-  groupElements,
-  ungroupElements,
-  getElementsInGroup,
-  selectGroupsForSelectedElements,
-  getOutermostGroupId,
-} from '../elements/group';
-import {
-  moveOneRight,
-  moveOneLeft,
-  moveAllRight,
-  moveAllLeft,
-} from '../elements/zindex';
-import { alignElements, distributeElements } from '../elements/align';
-import type { Alignment, Distribution } from '../elements/align';
-import { flipElements } from '../elements/flip';
-import {
-  updateBoundElements,
-  unbindAllBoundElements,
-  isArrowElement,
-} from '../elements/binding';
-import { updateElbowArrowPoints } from '../elements/elbow-arrow';
-import { updateFrameMembershipOnDrag } from '../elements/frame';
-import {
-  handleBoundTextResize,
-} from '../elements/bound-text';
-
-export const useDrawStore = defineStore('zq-draw', () => {
-  // ---- Core engine instances (non-reactive) ----
-  const scene = markRaw(new Scene());
-  const history = markRaw(new History());
-
-  // ---- Canvas refs ----
-  const staticCanvas = shallowRef<HTMLCanvasElement | null>(null);
-  const interactiveCanvas = shallowRef<HTMLCanvasElement | null>(null);
-
-  // ---- Binary files & image cache ----
-  const files = ref<BinaryFiles>({});
-  const imageCache = markRaw(new Map<string, HTMLImageElement>());
-
-  // ---- App State (reactive) ----
-  const activeTool = ref<ActiveTool>({
-    type: 'selection',
-    customType: null,
-    locked: false,
-    lastActiveTool: null,
-  });
-
-  const viewBackgroundColor = ref(CANVAS_BACKGROUND_LIGHT);
-  const zoom = ref<Zoom>({ value: DEFAULT_ZOOM });
-  const scrollX = ref(0);
-  const scrollY = ref(0);
-  const canvasWidth = ref(800);
-  const canvasHeight = ref(600);
-  const offsetTop = ref(0);
-  const offsetLeft = ref(0);
-  const theme = ref<'light' | 'dark'>('light');
-
-  const selectedElementIds = ref<Record<string, true>>({});
-  const selectedGroupIds = ref<Record<string, boolean>>({});
-
-  const currentItemStrokeColor = ref(DEFAULT_ELEMENT_STROKE_COLOR);
-  const currentItemBackgroundColor = ref(DEFAULT_ELEMENT_BACKGROUND_COLOR);
-  const currentItemFillStyle = ref(DEFAULT_ELEMENT_FILL_STYLE);
-  const currentItemStrokeWidth = ref(DEFAULT_ELEMENT_STROKE_WIDTH);
-  const currentItemStrokeStyle = ref(DEFAULT_ELEMENT_STROKE_STYLE);
-  const currentItemRoughness = ref(DEFAULT_ELEMENT_ROUGHNESS);
-  const currentItemOpacity = ref(DEFAULT_ELEMENT_OPACITY);
-  const currentItemFontFamily = ref(DEFAULT_FONT_FAMILY);
-  const currentItemFontSize = ref(DEFAULT_FONT_SIZE);
-  const currentItemStartArrowhead = ref<Arrowhead | null>(null);
-  const currentItemEndArrowhead = ref(DEFAULT_END_ARROWHEAD);
-  const currentItemArrowType = ref<'sharp' | 'round' | 'elbow'>('round');
-
-  const editingGroupId = ref<string | null>(null);
-  const showHyperlinkPopup = ref<false | 'info' | 'editor'>(false);
-  const snapLines = ref<readonly SnapLine[]>([]);
-  const originSnapOffset = ref<{ x: number; y: number } | null>(null);
-
-  const viewModeEnabled = ref(false);
-  const zenModeEnabled = ref(false);
-  const gridModeEnabled = ref(false);
-  const gridSize = ref(DEFAULT_GRID_SIZE);
-  const gridStep = ref(DEFAULT_GRID_STEP);
-  const objectsSnapModeEnabled = ref(false);
-  const showStats = ref(false);
-  const mainMenuOpen = ref(false);
-
-  const editingTextElement = ref<DrawTextElement | null>(null);
-  const editingLinearElement = ref<LinearElementEditorState | null>(null);
-  const newElement = ref<DrawElement | null>(null);
-  const selectionElement = ref<DrawSelectionElement | null>(null);
-  const isResizing = ref(false);
-  const isRotating = ref(false);
-  const cursorButton = ref<'up' | 'down'>('up');
-  const selectedElementsAreBeingDragged = ref(false);
-  const suggestedBindings = ref<SuggestedBinding[]>([]);
-
-  // render trigger
-  const sceneVersion = ref(0);
-
-  // ---- Computed ----
-  const elements = computed(() => {
-    // eslint-disable-next-line no-unused-expressions
-    sceneVersion.value;
-    return scene.getNonDeletedElements();
-  });
-
-  const selectedElements = computed(() => {
-    return elements.value.filter((el) => selectedElementIds.value[el.id]);
-  });
-
-  const canUndo = computed(() => {
-    // depend on sceneVersion so this recomputes after undo/redo/record
-    void sceneVersion.value;
-    return history.canUndo;
-  });
-  const canRedo = computed(() => {
-    void sceneVersion.value;
-    return history.canRedo;
-  });
-
-  // ---- Build AppState snapshot ----
-  function getAppState(): AppState {
-    return {
-      activeTool: activeTool.value,
-      viewBackgroundColor: viewBackgroundColor.value,
-      zoom: zoom.value,
-      scrollX: scrollX.value,
-      scrollY: scrollY.value,
-      width: canvasWidth.value,
-      height: canvasHeight.value,
-      offsetTop: offsetTop.value,
-      offsetLeft: offsetLeft.value,
-      theme: theme.value,
-      selectedElementIds: selectedElementIds.value,
-      selectedGroupIds: selectedGroupIds.value,
-      currentItemStrokeColor: currentItemStrokeColor.value,
-      currentItemBackgroundColor: currentItemBackgroundColor.value,
-      currentItemFillStyle: currentItemFillStyle.value as any,
-      currentItemStrokeWidth: currentItemStrokeWidth.value,
-      currentItemStrokeStyle: currentItemStrokeStyle.value as any,
-      currentItemRoughness: currentItemRoughness.value,
-      currentItemOpacity: currentItemOpacity.value,
-      currentItemFontFamily: currentItemFontFamily.value,
-      currentItemFontSize: currentItemFontSize.value,
-      currentItemTextAlign: 'left',
-      currentItemStartArrowhead: currentItemStartArrowhead.value,
-      currentItemEndArrowhead: currentItemEndArrowhead.value,
-      currentItemRoundness: 'round',
-      currentItemArrowType: currentItemArrowType.value,
-      viewModeEnabled: viewModeEnabled.value,
-      zenModeEnabled: zenModeEnabled.value,
-      gridModeEnabled: gridModeEnabled.value,
-      gridSize: gridSize.value,
-      gridStep: gridStep.value,
-      objectsSnapModeEnabled: objectsSnapModeEnabled.value,
-      editingTextElement: editingTextElement.value,
-      editingLinearElement: editingLinearElement.value,
-      editingGroupId: editingGroupId.value,
-      newElement: newElement.value,
-      selectionElement: selectionElement.value,
-      resizingElement: null,
-      multiElement: null,
-      isResizing: isResizing.value,
-      isRotating: isRotating.value,
-      cursorButton: cursorButton.value,
-      lastPointerDownWith: 'mouse',
-      selectedElementsAreBeingDragged: selectedElementsAreBeingDragged.value,
-      openMenu: null,
-      openPopup: null,
-      showHyperlinkPopup: showHyperlinkPopup.value,
-      isLoading: false,
-      errorMessage: null,
-      name: null,
-      snapLines: snapLines.value,
-      originSnapOffset: originSnapOffset.value,
-      suggestedBindings: suggestedBindings.value,
-      exportBackground: true,
-      exportScale: 2,
-      exportWithDarkMode: false,
-      frameRendering: { enabled: true, name: true, outline: true, clip: true },
-    };
-  }
-
-  // ---- Scene change listener ----
-  function init(): void {
-    scene.onChange(() => {
-      sceneVersion.value++;
-    });
-  }
-
-  // ---- Render ----
-  let renderFrameId: number | null = null;
-
-  function requestRender(): void {
-    if (renderFrameId !== null) return;
-    renderFrameId = requestAnimationFrame(() => {
-      renderFrameId = null;
-      render();
-    });
-  }
-
-  function render(): void {
-    const appState = getAppState();
-    if (staticCanvas.value) {
-      renderStaticScene(
-        staticCanvas.value,
-        scene.getNonDeletedElements(),
-        appState,
-        files.value,
-        imageCache,
-      );
-    }
-    if (interactiveCanvas.value) {
-      renderInteractiveScene(
-        interactiveCanvas.value,
-        scene.getNonDeletedElements(),
-        appState,
-      );
-    }
-  }
-
-  // ---- Tool ----
-  function setActiveTool(type: ToolType): void {
-    if (type !== 'selection') {
-      activeTool.value = {
-        ...activeTool.value,
-        lastActiveTool: {
-          type: activeTool.value.type,
-          customType: activeTool.value.customType,
-        },
-      };
-    }
-    activeTool.value = { ...activeTool.value, type, customType: null };
-    if (type === 'selection') {
-      // keep selection
-    } else {
-      clearSelection();
-    }
-    requestRender();
-  }
-
-  // ---- Selection ----
-  function clearSelection(): void {
-    selectedElementIds.value = {};
-    selectedGroupIds.value = {};
-    editingLinearElement.value = null;
-  }
-
-  function selectElement(id: string, additive = false): void {
-    if (editingLinearElement.value && editingLinearElement.value.elementId !== id) {
-      editingLinearElement.value = null;
-    }
-    if (additive) {
-      selectedElementIds.value = { ...selectedElementIds.value, [id]: true };
-    } else {
-      selectedElementIds.value = { [id]: true };
-    }
-    requestRender();
-  }
-
-  function selectElements(ids: string[]): void {
-    const map: Record<string, true> = {};
-    for (const id of ids) map[id] = true;
-    selectedElementIds.value = map;
-    requestRender();
-  }
-
-  function selectAll(): void {
-    const map: Record<string, true> = {};
-    for (const el of scene.getNonDeletedElements()) {
-      map[el.id] = true;
-    }
-    selectedElementIds.value = map;
-    requestRender();
-  }
-
-  // ---- History ----
-  function recordHistory(): void {
-    history.record({
-      elements: scene.getElements().map((el) => ({ ...el })),
-      appState: {
-        selectedElementIds: { ...selectedElementIds.value },
-        selectedGroupIds: { ...selectedGroupIds.value },
-        viewBackgroundColor: viewBackgroundColor.value,
-        editingGroupId: editingGroupId.value,
-        editingTextElement: null,
-        name: null,
-      },
-    });
-    sceneVersion.value++;
-  }
-
-  function undo(): void {
-    const current: HistoryEntry = {
-      elements: scene.getElements().map((el) => ({ ...el })),
-      appState: {
-        selectedElementIds: { ...selectedElementIds.value },
-        selectedGroupIds: { ...selectedGroupIds.value },
-        viewBackgroundColor: viewBackgroundColor.value,
-        editingGroupId: editingGroupId.value,
-        editingTextElement: null,
-        name: null,
-      },
-    };
-    const entry = history.undo(current);
-    if (entry) {
-      scene.replaceAllElements(entry.elements);
-      selectedElementIds.value = entry.appState.selectedElementIds as Record<string, true>;
-      requestRender();
-    }
-  }
-
-  function redo(): void {
-    const current: HistoryEntry = {
-      elements: scene.getElements().map((el) => ({ ...el })),
-      appState: {
-        selectedElementIds: { ...selectedElementIds.value },
-        selectedGroupIds: { ...selectedGroupIds.value },
-        viewBackgroundColor: viewBackgroundColor.value,
-        editingGroupId: editingGroupId.value,
-        editingTextElement: null,
-        name: null,
-      },
-    };
-    const entry = history.redo(current);
-    if (entry) {
-      scene.replaceAllElements(entry.elements);
-      selectedElementIds.value = entry.appState.selectedElementIds as Record<string, true>;
-      requestRender();
-    }
-  }
-
-  // ---- Element CRUD ----
-  function addElement(element: DrawElement): void {
-    recordHistory();
-    scene.insertElement(element);
-    requestRender();
-  }
-
-  function updateElement(id: string, updates: Partial<DrawElement>): void {
-    scene.mutateElement(id, updates);
-    requestRender();
-  }
-
-  function deleteSelectedElements(): void {
-    const ids = Object.keys(selectedElementIds.value);
-    if (ids.length === 0) return;
-    recordHistory();
-    scene.deleteElements(ids);
-    clearSelection();
-    requestRender();
-  }
-
-  // ---- Clipboard ----
-  async function copySelectedElements(): Promise<void> {
-    const selected = selectedElements.value;
-    if (selected.length === 0) return;
-    await copyElements(selected, files.value);
-  }
-
-  async function cutSelectedElements(): Promise<void> {
-    const selected = selectedElements.value;
-    if (selected.length === 0) return;
-    await cutElements(selected, files.value);
-    deleteSelectedElementsWithBindings();
-  }
-
-  async function pasteFromClipboard(): Promise<void> {
-    const data = await pasteElements();
-    if (!data) return;
-    recordHistory();
-    scene.insertElements(data.elements);
-    const ids: Record<string, true> = {};
-    for (const el of data.elements) ids[el.id] = true;
-    selectedElementIds.value = ids;
-    requestRender();
-  }
-
-  function duplicateSelectedElements(): void {
-    const selected = selectedElements.value;
-    if (selected.length === 0) return;
-    recordHistory();
-    const duped = duplicateElements(selected);
-    scene.insertElements(duped);
-    const ids: Record<string, true> = {};
-    for (const el of duped) ids[el.id] = true;
-    selectedElementIds.value = ids;
-    requestRender();
-  }
-
-  // ---- Zoom / Pan ----
-  function setZoom(value: number): void {
-    const clamped = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, value));
-    zoom.value = { value: clamped as NormalizedZoomValue };
-    requestRender();
-  }
-
-  function zoomIn(): void {
-    setZoom(zoom.value.value + ZOOM_STEP);
-  }
-
-  function zoomOut(): void {
-    setZoom(zoom.value.value - ZOOM_STEP);
-  }
-
-  function zoomToFit(): void {
-    const nonDeleted = scene.getNonDeletedElements();
-    if (nonDeleted.length === 0) return;
-    const [x1, y1, x2, y2] = getCommonBounds(nonDeleted);
-    const padding = 50;
-    const contentW = x2 - x1 + padding * 2;
-    const contentH = y2 - y1 + padding * 2;
-    const zoomX = canvasWidth.value / contentW;
-    const zoomY = canvasHeight.value / contentH;
-    const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, Math.min(zoomX, zoomY)));
-    zoom.value = { value: newZoom as NormalizedZoomValue };
-    scrollX.value = -x1 + padding + (canvasWidth.value / newZoom - contentW) / 2;
-    scrollY.value = -y1 + padding + (canvasHeight.value / newZoom - contentH) / 2;
-    requestRender();
-  }
-
-  function resetZoom(): void {
-    setZoom(1);
-  }
-
-  function setScroll(x: number, y: number): void {
-    scrollX.value = x;
-    scrollY.value = y;
-    requestRender();
-  }
-
-  // ---- Viewport helpers ----
-  function viewportToScene(vx: number, vy: number): { x: number; y: number } {
-    return viewportCoordsToScene(vx, vy, {
-      scrollX: scrollX.value,
-      scrollY: scrollY.value,
-      zoom: zoom.value,
-    });
-  }
-
-  // ---- Hit testing ----
-  function getElementAtPosition(
-    sceneX: number,
-    sceneY: number,
-  ): NonDeletedDrawElement | null {
-    const els = scene.getNonDeletedElements();
-    for (let i = els.length - 1; i >= 0; i--) {
-      const el = els[i]!;
-      if (el.locked) continue;
-      if (hitTest(el, [sceneX, sceneY] as GlobalPoint, zoom.value.value)) {
-        return el;
-      }
-    }
-    return null;
-  }
-
-  // ---- Serialization ----
-  function getDrawData(): DrawData {
-    return toDrawData(scene.getElements(), getAppState(), files.value);
-  }
-
-  function loadDrawData(data: DrawData): void {
-    scene.replaceAllElements(data.elements as DrawElement[]);
-    if (data.appState.viewBackgroundColor) {
-      viewBackgroundColor.value = data.appState.viewBackgroundColor;
-    }
-    if (data.appState.gridModeEnabled !== undefined) {
-      gridModeEnabled.value = data.appState.gridModeEnabled;
-    }
-    if (data.appState.theme) {
-      theme.value = data.appState.theme;
-    }
-    if (data.files) {
-      files.value = { ...data.files };
-    }
-    history.clear();
-    requestRender();
-  }
-
-  function loadFromJSON(json: string): void {
-    const data = deserializeFromJSON(json);
-    if (data) loadDrawData(data);
-  }
-
-  // ---- Group / Ungroup ----
-  function groupSelected(): void {
-    const selected = selectedElements.value;
-    if (selected.length < 2) return;
-    recordHistory();
-    const groupId = groupElements(selected, scene, editingGroupId.value);
-    selectedGroupIds.value = { ...selectedGroupIds.value, [groupId]: true };
-    requestRender();
-  }
-
-  function ungroupSelected(): void {
-    const selected = selectedElements.value;
-    if (selected.length === 0) return;
-
-    const groupIdsToUngroup = new Set<string>();
-    for (const el of selected) {
-      if (el.groupIds.length > 0) {
-        const outerGid = el.groupIds[el.groupIds.length - 1]!;
-        groupIdsToUngroup.add(outerGid);
-      }
-    }
-    if (groupIdsToUngroup.size === 0) return;
-
-    recordHistory();
-    for (const gid of groupIdsToUngroup) {
-      ungroupElements(scene.getElements(), scene, gid);
-    }
-    const newGroupIds = { ...selectedGroupIds.value };
-    for (const gid of groupIdsToUngroup) {
-      delete newGroupIds[gid];
-    }
-    selectedGroupIds.value = newGroupIds;
-    requestRender();
-  }
-
-  // ---- Lock / Unlock ----
-  function lockSelected(): void {
-    const selected = selectedElements.value;
-    if (selected.length === 0) return;
-    recordHistory();
-    for (const el of selected) {
-      scene.mutateElement(el.id, { locked: true } as Partial<DrawElement>);
-    }
-    clearSelection();
-    requestRender();
-  }
-
-  function unlockSelected(): void {
-    const selected = selectedElements.value;
-    if (selected.length === 0) return;
-    recordHistory();
-    for (const el of selected) {
-      scene.mutateElement(el.id, { locked: false } as Partial<DrawElement>);
-    }
-    requestRender();
-  }
-
-  const isSelectedLocked = computed(() => {
-    return selectedElements.value.length > 0 && selectedElements.value.every((el) => el.locked);
-  });
-
-  // ---- Z-Index ----
-  function bringToFront(): void {
-    if (Object.keys(selectedElementIds.value).length === 0) return;
-    recordHistory();
-    moveAllRight(scene.getElements(), selectedElementIds.value, scene);
-    requestRender();
-  }
-
-  function sendToBack(): void {
-    if (Object.keys(selectedElementIds.value).length === 0) return;
-    recordHistory();
-    moveAllLeft(scene.getElements(), selectedElementIds.value, scene);
-    requestRender();
-  }
-
-  function bringForward(): void {
-    if (Object.keys(selectedElementIds.value).length === 0) return;
-    recordHistory();
-    moveOneRight(scene.getElements(), selectedElementIds.value, scene);
-    requestRender();
-  }
-
-  function sendBackward(): void {
-    if (Object.keys(selectedElementIds.value).length === 0) return;
-    recordHistory();
-    moveOneLeft(scene.getElements(), selectedElementIds.value, scene);
-    requestRender();
-  }
-
-  // ---- Align / Distribute ----
-  function alignSelected(alignment: Alignment): void {
-    const selected = selectedElements.value;
-    if (selected.length < 2) return;
-    recordHistory();
-    alignElements(selected, alignment, scene);
-    requestRender();
-  }
-
-  function distributeSelected(distribution: Distribution): void {
-    const selected = selectedElements.value;
-    if (selected.length < 3) return;
-    recordHistory();
-    distributeElements(selected, distribution, scene);
-    requestRender();
-  }
-
-  // ---- Flip ----
-  function flipSelectedHorizontal(): void {
-    const selected = selectedElements.value;
-    if (selected.length === 0) return;
-    recordHistory();
-    flipElements(selected, 'horizontal', scene);
-    requestRender();
-  }
-
-  function flipSelectedVertical(): void {
-    const selected = selectedElements.value;
-    if (selected.length === 0) return;
-    recordHistory();
-    flipElements(selected, 'vertical', scene);
-    requestRender();
-  }
-
-  // ---- Hyperlink ----
-  function setElementLink(id: string, link: string | null): void {
-    recordHistory();
-    scene.mutateElement(id, { link } as Partial<DrawElement>);
-    requestRender();
-  }
-
-  // ---- Binding helpers ----
-  function updateBindingsAfterMove(elementId: string): void {
-    const el = scene.getElement(elementId);
-    if (!el) return;
-    updateBoundElements(el, scene);
-
-    if (isArrowElement(el) && (el as DrawArrowElement).elbowed) {
-      updateElbowArrowPoints(el as DrawArrowElement, scene);
-    }
-
-    handleBoundTextResize(el, scene);
-  }
-
-  function updateBindingsAfterResize(elementId: string): void {
-    const el = scene.getElement(elementId);
-    if (!el) return;
-    updateBoundElements(el, scene);
-    handleBoundTextResize(el, scene);
-  }
-
-  // ---- Frame membership ----
-  function updateFrameMembership(draggedIds: string[]): void {
-    const dragged = draggedIds
-      .map((id) => scene.getElement(id))
-      .filter((el): el is DrawElement => el != null && !el.isDeleted);
-    if (dragged.length === 0) return;
-    updateFrameMembershipOnDrag(dragged, scene.getNonDeletedElements(), scene);
-  }
-
-  // ---- Enhanced delete (unbind before delete) ----
-  function deleteSelectedElementsWithBindings(): void {
-    const ids = Object.keys(selectedElementIds.value);
-    if (ids.length === 0) return;
-    recordHistory();
-
-    const allIdsToDelete = new Set(ids);
-    for (const id of ids) {
-      const el = scene.getElement(id);
-      if (!el) continue;
-      if (el.boundElements) {
-        for (const bound of el.boundElements) {
-          if (bound.type === 'text') {
-            allIdsToDelete.add(bound.id);
-          }
-        }
-      }
-      unbindAllBoundElements(el, scene);
-    }
-
-    scene.deleteElements([...allIdsToDelete]);
-    clearSelection();
-    requestRender();
-  }
-
-  // ---- Image insertion ----
-  async function addImageFromFile(file: File, x: number, y: number): Promise<void> {
-    const reader = new FileReader();
-    const dataURL = await new Promise<string>((resolve, reject) => {
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = reject;
-      reader.readAsDataURL(file);
-    });
-
-    const fileId = `img_${Date.now()}_${Math.random().toString(36).slice(2, 8)}` as FileId;
-    const fileData: BinaryFileData = {
-      mimeType: file.type,
-      id: fileId,
-      dataURL: dataURL as DataURL,
-      created: Date.now(),
-    };
-    files.value = { ...files.value, [fileId]: fileData };
-
-    const img = new window.Image();
-    img.src = dataURL;
-    await new Promise<void>((resolve) => {
-      img.onload = () => resolve();
-      img.onerror = () => resolve();
-    });
-    imageCache.set(fileId, img);
-
-    const maxDim = 400;
-    let w = img.naturalWidth || 200;
-    let h = img.naturalHeight || 200;
-    if (w > maxDim || h > maxDim) {
-      const ratio = Math.min(maxDim / w, maxDim / h);
-      w = Math.round(w * ratio);
-      h = Math.round(h * ratio);
-    }
-
-    const el = newImageElement({
-      x: x - w / 2,
-      y: y - h / 2,
-      width: w,
-      height: h,
-      fileId,
-    }) as DrawImageElement;
-    (el as any).status = 'saved';
-
-    recordHistory();
-    addElement(el);
-    selectElement(el.id);
-  }
-
-  // ---- Copy / Paste style ----
-  const copiedStyle = ref<Partial<DrawElement> | null>(null);
-
-  function copyStyle(): void {
-    const el = selectedElements.value[0];
-    if (!el) return;
-    copiedStyle.value = {
-      strokeColor: el.strokeColor,
-      backgroundColor: el.backgroundColor,
-      fillStyle: el.fillStyle,
-      strokeWidth: el.strokeWidth,
-      strokeStyle: el.strokeStyle,
-      roughness: el.roughness,
-      opacity: el.opacity,
-      roundness: el.roundness,
-    } as Partial<DrawElement>;
-  }
-
-  function pasteStyle(): void {
-    if (!copiedStyle.value || selectedElements.value.length === 0) return;
-    recordHistory();
-    for (const el of selectedElements.value) {
-      updateElement(el.id, { ...copiedStyle.value } as Partial<DrawElement>);
-    }
-    requestRender();
-  }
-
-  // ---- Zoom to fit selection ----
-  function zoomToFitSelection(): void {
-    const selected = selectedElements.value;
-    if (selected.length === 0) return;
-    const [x1, y1, x2, y2] = getCommonBounds(selected);
-    const padding = 50;
-    const contentW = x2 - x1 + padding * 2;
-    const contentH = y2 - y1 + padding * 2;
-    const zoomX = canvasWidth.value / contentW;
-    const zoomY = canvasHeight.value / contentH;
-    const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, Math.min(zoomX, zoomY)));
-    zoom.value = { value: newZoom as NormalizedZoomValue };
-    scrollX.value = -x1 + padding + (canvasWidth.value / newZoom - contentW) / 2;
-    scrollY.value = -y1 + padding + (canvasHeight.value / newZoom - contentH) / 2;
-    requestRender();
-  }
-
-  // ---- Snap lines ----
-  function setSnapLines(lines: readonly SnapLine[]): void {
-    snapLines.value = lines;
-    requestRender();
-  }
-
-  function clearSnapLines(): void {
-    snapLines.value = [];
-  }
-
-  // ---- Grid snap helper ----
-  function snapToGrid(value: number): number {
-    if (!gridModeEnabled.value) return value;
-    const step = gridSize.value;
-    return Math.round(value / step) * step;
-  }
-
-  // ---- Cleanup ----
-  function destroy(): void {
-    if (renderFrameId !== null) {
-      cancelAnimationFrame(renderFrameId);
-      renderFrameId = null;
-    }
-    scene.destroy();
-    history.clear();
-    imageCache.clear();
-  }
-
-  return {
-    // engine
-    scene,
-    history,
-    // canvas refs
-    staticCanvas,
-    interactiveCanvas,
-    // files
-    files,
-    imageCache,
-    // state
-    activeTool,
-    viewBackgroundColor,
-    zoom,
-    scrollX,
-    scrollY,
-    canvasWidth,
-    canvasHeight,
-    offsetTop,
-    offsetLeft,
-    theme,
-    selectedElementIds,
-    selectedGroupIds,
-    currentItemStrokeColor,
-    currentItemBackgroundColor,
-    currentItemFillStyle,
-    currentItemStrokeWidth,
-    currentItemStrokeStyle,
-    currentItemRoughness,
-    currentItemOpacity,
-    currentItemFontFamily,
-    currentItemFontSize,
-    currentItemStartArrowhead,
-    currentItemEndArrowhead,
-    currentItemArrowType,
-    editingGroupId,
-    showHyperlinkPopup,
-    snapLines,
-    originSnapOffset,
-    viewModeEnabled,
-    zenModeEnabled,
-    gridModeEnabled,
-    gridSize,
-    gridStep,
-    objectsSnapModeEnabled,
-    showStats,
-    mainMenuOpen,
-    editingTextElement,
-    editingLinearElement,
-    newElement,
-    selectionElement,
-    isResizing,
-    isRotating,
-    cursorButton,
-    selectedElementsAreBeingDragged,
-    suggestedBindings,
-    sceneVersion,
-    // computed
-    elements,
-    selectedElements,
-    canUndo,
-    canRedo,
-    isSelectedLocked,
-    // methods
-    getAppState,
-    init,
-    requestRender,
-    render,
-    setActiveTool,
-    clearSelection,
-    selectElement,
-    selectElements,
-    selectAll,
-    recordHistory,
-    undo,
-    redo,
-    addElement,
-    updateElement,
-    deleteSelectedElements,
-    copySelectedElements,
-    cutSelectedElements,
-    pasteFromClipboard,
-    duplicateSelectedElements,
-    setZoom,
-    zoomIn,
-    zoomOut,
-    zoomToFit,
-    resetZoom,
-    setScroll,
-    viewportToScene,
-    getElementAtPosition,
-    getDrawData,
-    loadDrawData,
-    loadFromJSON,
-    // P1 methods
-    groupSelected,
-    ungroupSelected,
-    lockSelected,
-    unlockSelected,
-    bringToFront,
-    sendToBack,
-    bringForward,
-    sendBackward,
-    alignSelected,
-    distributeSelected,
-    flipSelectedHorizontal,
-    flipSelectedVertical,
-    setElementLink,
-    updateBindingsAfterMove,
-    updateBindingsAfterResize,
-    updateFrameMembership,
-    deleteSelectedElementsWithBindings,
-    addImageFromFile,
-    copiedStyle,
-    copyStyle,
-    pasteStyle,
-    zoomToFitSelection,
-    setSnapLines,
-    clearSnapLines,
-    snapToGrid,
-    destroy,
-  };
-});
diff --git a/web/apps/web-ele/src/components/zq-draw/styles/draw.scss b/web/apps/web-ele/src/components/zq-draw/styles/draw.scss
deleted file mode 100644
index 38e4da8..0000000
--- a/web/apps/web-ele/src/components/zq-draw/styles/draw.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.zq-draw {
-  --zq-draw-selection-color: #6965db;
-  --zq-draw-selection-bg: rgba(105, 101, 219, 0.1);
-  --zq-draw-snap-color: #6366f1;
-  --zq-draw-handle-fill: #fff;
-  --zq-draw-handle-stroke: #6965db;
-  --zq-draw-toolbar-bg: var(--el-bg-color, #fff);
-  --zq-draw-toolbar-border: var(--el-border-color-light, #e4e7ed);
-  --zq-draw-toolbar-shadow: 0 2px 8px rgb(0 0 0 / 8%);
-
-  * {
-    box-sizing: border-box;
-  }
-
-  user-select: none;
-  -webkit-user-select: none;
-}
diff --git a/web/apps/web-ele/src/components/zq-draw/types.ts b/web/apps/web-ele/src/components/zq-draw/types.ts
deleted file mode 100644
index f703c60..0000000
--- a/web/apps/web-ele/src/components/zq-draw/types.ts
+++ /dev/null
@@ -1,412 +0,0 @@
-/**
- * zq-draw core type definitions
- * Modeled after Excalidraw's element/app state system, adapted for Vue 3.
- */
-
-// ---------------------------------------------------------------------------
-// Branded primitives
-// ---------------------------------------------------------------------------
-export type Radians = number & { _brand: 'radians' };
-export type NormalizedZoomValue = number & { _brand: 'normalizedZoom' };
-export type DataURL = string & { _brand: 'DataURL' };
-export type FileId = string & { _brand: 'FileId' };
-export type FractionalIndex = string & { _brand: 'fractionalIndex' };
-export type FontString = string & { _brand: 'fontString' };
-
-// ---------------------------------------------------------------------------
-// Enums / Literal unions
-// ---------------------------------------------------------------------------
-export type DrawElementType =
-  | 'selection'
-  | 'rectangle'
-  | 'ellipse'
-  | 'diamond'
-  | 'line'
-  | 'arrow'
-  | 'freedraw'
-  | 'text'
-  | 'image'
-  | 'frame'
-  | 'embeddable';
-
-export type FillStyle =
-  | 'hachure'
-  | 'cross-hatch'
-  | 'solid'
-  | 'zigzag'
-  | 'dots'
-  | 'dashed'
-  | 'zigzag-line';
-export type StrokeStyle = 'solid' | 'dashed' | 'dotted';
-export type StrokeRoundness = 'round' | 'sharp';
-export type TextAlign = 'left' | 'center' | 'right';
-export type VerticalAlign = 'top' | 'middle' | 'bottom';
-export type Theme = 'light' | 'dark';
-export type PointerType = 'mouse' | 'pen' | 'touch';
-
-export type Arrowhead =
-  | 'arrow'
-  | 'bar'
-  | 'circle'
-  | 'circle_outline'
-  | 'triangle'
-  | 'triangle_outline'
-  | 'diamond'
-  | 'diamond_outline';
-
-export type ArrowType = 'sharp' | 'round' | 'elbow';
-
-export type ToolType =
-  | 'selection'
-  | 'rectangle'
-  | 'ellipse'
-  | 'diamond'
-  | 'line'
-  | 'arrow'
-  | 'freedraw'
-  | 'text'
-  | 'image'
-  | 'eraser'
-  | 'hand'
-  | 'frame'
-  | 'laser';
-
-export interface ActiveTool {
-  type: ToolType;
-  customType: string | null;
-  locked: boolean;
-  lastActiveTool: { type: ToolType; customType: string | null } | null;
-}
-
-// ---------------------------------------------------------------------------
-// Point types
-// ---------------------------------------------------------------------------
-export type GlobalPoint = [number, number] & { _brand: 'globalPoint' };
-export type LocalPoint = [number, number] & { _brand: 'localPoint' };
-
-// ---------------------------------------------------------------------------
-// Element types
-// ---------------------------------------------------------------------------
-export interface BoundElement {
-  id: string;
-  type: 'arrow' | 'text';
-}
-
-export interface RoundnessConfig {
-  type: number;
-  value?: number;
-}
-
-interface DrawElementBase {
-  id: string;
-  type: DrawElementType;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  angle: Radians;
-  strokeColor: string;
-  backgroundColor: string;
-  fillStyle: FillStyle;
-  strokeWidth: number;
-  strokeStyle: StrokeStyle;
-  roughness: number;
-  opacity: number;
-  roundness: RoundnessConfig | null;
-  seed: number;
-  version: number;
-  versionNonce: number;
-  index: FractionalIndex | null;
-  isDeleted: boolean;
-  groupIds: readonly string[];
-  frameId: string | null;
-  boundElements: readonly BoundElement[] | null;
-  link: string | null;
-  locked: boolean;
-  updated: number;
-  customData?: Record<string, any>;
-}
-
-export interface DrawSelectionElement extends DrawElementBase {
-  type: 'selection';
-}
-
-export interface DrawRectangleElement extends DrawElementBase {
-  type: 'rectangle';
-}
-
-export interface DrawEllipseElement extends DrawElementBase {
-  type: 'ellipse';
-}
-
-export interface DrawDiamondElement extends DrawElementBase {
-  type: 'diamond';
-}
-
-export interface DrawTextElement extends DrawElementBase {
-  type: 'text';
-  text: string;
-  originalText: string;
-  fontSize: number;
-  fontFamily: number;
-  textAlign: TextAlign;
-  verticalAlign: VerticalAlign;
-  containerId: string | null;
-  autoResize: boolean;
-  lineHeight: number;
-}
-
-export interface FixedPointBinding {
-  elementId: string;
-  fixedPoint: [number, number];
-}
-
-export interface DrawLinearElement extends DrawElementBase {
-  type: 'line' | 'arrow';
-  points: readonly LocalPoint[];
-  startBinding: FixedPointBinding | null;
-  endBinding: FixedPointBinding | null;
-  startArrowhead: Arrowhead | null;
-  endArrowhead: Arrowhead | null;
-}
-
-export interface DrawArrowElement extends DrawLinearElement {
-  type: 'arrow';
-  elbowed: boolean;
-}
-
-export interface DrawFreeDrawElement extends DrawElementBase {
-  type: 'freedraw';
-  points: readonly LocalPoint[];
-  pressures: readonly number[];
-  simulatePressure: boolean;
-}
-
-export interface DrawImageElement extends DrawElementBase {
-  type: 'image';
-  fileId: FileId | null;
-  status: 'pending' | 'saved' | 'error';
-  scale: [number, number];
-}
-
-export interface DrawFrameElement extends DrawElementBase {
-  type: 'frame';
-  name: string | null;
-}
-
-export interface DrawEmbeddableElement extends DrawElementBase {
-  type: 'embeddable';
-}
-
-export type DrawElement =
-  | DrawSelectionElement
-  | DrawRectangleElement
-  | DrawEllipseElement
-  | DrawDiamondElement
-  | DrawTextElement
-  | DrawLinearElement
-  | DrawArrowElement
-  | DrawFreeDrawElement
-  | DrawImageElement
-  | DrawFrameElement
-  | DrawEmbeddableElement;
-
-export type NonDeletedDrawElement = DrawElement & { isDeleted: false };
-
-export type OrderedDrawElement = DrawElement & {
-  index: FractionalIndex;
-};
-
-// ---------------------------------------------------------------------------
-// Binary files
-// ---------------------------------------------------------------------------
-export interface BinaryFileData {
-  mimeType: string;
-  id: FileId;
-  dataURL: DataURL;
-  created: number;
-  lastRetrieved?: number;
-}
-
-export type BinaryFiles = Record<string, BinaryFileData>;
-
-// ---------------------------------------------------------------------------
-// Zoom
-// ---------------------------------------------------------------------------
-export interface Zoom {
-  value: NormalizedZoomValue;
-}
-
-// ---------------------------------------------------------------------------
-// App State
-// ---------------------------------------------------------------------------
-export interface AppState {
-  activeTool: ActiveTool;
-  viewBackgroundColor: string;
-  zoom: Zoom;
-  scrollX: number;
-  scrollY: number;
-  width: number;
-  height: number;
-  offsetTop: number;
-  offsetLeft: number;
-  theme: Theme;
-
-  // selection
-  selectedElementIds: Record<string, true>;
-  selectedGroupIds: Record<string, boolean>;
-
-  // current drawing style
-  currentItemStrokeColor: string;
-  currentItemBackgroundColor: string;
-  currentItemFillStyle: FillStyle;
-  currentItemStrokeWidth: number;
-  currentItemStrokeStyle: StrokeStyle;
-  currentItemRoughness: number;
-  currentItemOpacity: number;
-  currentItemFontFamily: number;
-  currentItemFontSize: number;
-  currentItemTextAlign: TextAlign;
-  currentItemStartArrowhead: Arrowhead | null;
-  currentItemEndArrowhead: Arrowhead | null;
-  currentItemRoundness: StrokeRoundness;
-  currentItemArrowType: ArrowType;
-
-  // modes
-  viewModeEnabled: boolean;
-  zenModeEnabled: boolean;
-  gridModeEnabled: boolean;
-  gridSize: number;
-  gridStep: number;
-  objectsSnapModeEnabled: boolean;
-
-  // editing
-  editingTextElement: DrawTextElement | null;
-  editingLinearElement: LinearElementEditorState | null;
-  editingGroupId: string | null;
-  newElement: DrawElement | null;
-  selectionElement: DrawSelectionElement | null;
-  resizingElement: DrawElement | null;
-  multiElement: DrawLinearElement | null;
-
-  // interaction
-  isResizing: boolean;
-  isRotating: boolean;
-  cursorButton: 'up' | 'down';
-  lastPointerDownWith: PointerType;
-  selectedElementsAreBeingDragged: boolean;
-
-  // ui
-  openMenu: 'canvas' | null;
-  openPopup: string | null;
-  showHyperlinkPopup: false | 'info' | 'editor';
-  isLoading: boolean;
-  errorMessage: string | null;
-  name: string | null;
-
-  // snap
-  snapLines: readonly SnapLine[];
-  originSnapOffset: { x: number; y: number } | null;
-
-  // binding
-  suggestedBindings: SuggestedBinding[];
-
-  // export
-  exportBackground: boolean;
-  exportScale: number;
-  exportWithDarkMode: boolean;
-
-  // frame
-  frameRendering: {
-    enabled: boolean;
-    name: boolean;
-    outline: boolean;
-    clip: boolean;
-  };
-}
-
-// ---------------------------------------------------------------------------
-// Snap lines
-// ---------------------------------------------------------------------------
-export interface SnapLine {
-  type: 'points' | 'gap';
-  points: GlobalPoint[];
-}
-
-// ---------------------------------------------------------------------------
-// Binding suggestion (arrow tool hover feedback)
-// ---------------------------------------------------------------------------
-export interface SuggestedBinding {
-  element: DrawElement;
-  midPoint: GlobalPoint | null;
-}
-
-// ---------------------------------------------------------------------------
-// Scene data (serialization)
-// ---------------------------------------------------------------------------
-export interface DrawData {
-  type: 'zq-draw';
-  version: number;
-  source: string;
-  elements: readonly DrawElement[];
-  appState: Partial<AppState>;
-  files: BinaryFiles;
-}
-
-// ---------------------------------------------------------------------------
-// Component props / emits
-// ---------------------------------------------------------------------------
-export interface DrawProps {
-  modelValue?: DrawData;
-  readonly?: boolean;
-  width?: number | string;
-  height?: number | string;
-  theme?: Theme;
-  gridMode?: boolean;
-  zenMode?: boolean;
-  initialData?: DrawData | (() => Promise<DrawData>);
-}
-
-export interface DrawEmits {
-  (e: 'update:modelValue', data: DrawData): void;
-  (e: 'change', elements: DrawElement[], appState: Partial<AppState>): void;
-  (e: 'save', data: DrawData): void;
-}
-
-// ---------------------------------------------------------------------------
-// Action system
-// ---------------------------------------------------------------------------
-export type CaptureUpdateAction = 'immediately' | 'eventually' | 'none';
-
-export interface ActionResult {
-  elements?: readonly DrawElement[];
-  appState?: Partial<AppState>;
-  captureUpdate: CaptureUpdateAction;
-}
-
-// ---------------------------------------------------------------------------
-// Linear element editor
-// ---------------------------------------------------------------------------
-export interface LinearElementEditorState {
-  elementId: string;
-  selectedPointIndices: number[];
-  isDragging: boolean;
-  dragStartPoint: GlobalPoint | null;
-  lastDragPoint: GlobalPoint | null;
-}
-
-// ---------------------------------------------------------------------------
-// Transform handles
-// ---------------------------------------------------------------------------
-export type TransformHandleDirection =
-  | 'n'
-  | 's'
-  | 'w'
-  | 'e'
-  | 'nw'
-  | 'ne'
-  | 'sw'
-  | 'se';
-
-export type TransformHandleType = TransformHandleDirection | 'rotation';
-export type MaybeTransformHandleType = TransformHandleType | false;
diff --git a/web/apps/web-ele/src/components/zq-smart-table/document/SaveAsTemplateDialog.vue b/web/apps/web-ele/src/components/zq-smart-table/document/SaveAsTemplateDialog.vue
deleted file mode 100644
index 8df8c0c..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/document/SaveAsTemplateDialog.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { useI18n } from '@vben/locales'
-import { ElDialog, ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus'
-import { createTemplateFromDocumentApi } from '#/api/smart-table'
-
-const props = defineProps<{
-  modelValue: boolean
-  documentId: string
-  documentName: string
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  saved: []
-}>()
-
-const { t } = useI18n()
-
-const dialogVisible = computed({
-  get: () => props.modelValue,
-  set: (v) => emit('update:modelValue', v),
-})
-
-const saving = ref(false)
-const form = ref({
-  name: '',
-  description: '',
-  category: 'custom',
-})
-
-watch(() => props.modelValue, (v) => {
-  if (v) {
-    form.value = {
-      name: props.documentName ? `${props.documentName} - ${t('template.templateSuffix')}` : '',
-      description: '',
-      category: 'custom',
-    }
-  }
-})
-
-async function handleSave() {
-  if (!form.value.name.trim()) {
-    ElMessage.warning(t('template.nameRequired'))
-    return
-  }
-  saving.value = true
-  try {
-    await createTemplateFromDocumentApi(props.documentId, {
-      name: form.value.name.trim(),
-      description: form.value.description.trim() || undefined,
-      category: form.value.category,
-      content: {},
-    })
-    ElMessage.success(t('template.saveSuccess'))
-    dialogVisible.value = false
-    emit('saved')
-  } catch (e) {
-    ElMessage.error(t('template.saveFailed'))
-  } finally {
-    saving.value = false
-  }
-}
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="t('template.saveAsTemplate')"
-    width="480px"
-    :close-on-click-modal="false"
-    destroy-on-close
-  >
-    <ElForm label-position="top">
-      <ElFormItem :label="t('template.name')" required>
-        <ElInput
-          v-model="form.name"
-          :placeholder="t('template.namePlaceholder')"
-          maxlength="200"
-          show-word-limit
-        />
-      </ElFormItem>
-      <ElFormItem :label="t('template.description')">
-        <ElInput
-          v-model="form.description"
-          type="textarea"
-          :rows="3"
-          :placeholder="t('template.descriptionPlaceholder')"
-        />
-      </ElFormItem>
-      <ElFormItem :label="t('template.categoryLabel')">
-        <ElInput
-          v-model="form.category"
-          :placeholder="t('template.categoryPlaceholder')"
-        />
-      </ElFormItem>
-    </ElForm>
-    <template #footer>
-      <ElButton @click="dialogVisible = false">{{ t('common.cancel') }}</ElButton>
-      <ElButton type="primary" :loading="saving" @click="handleSave">
-        {{ t('template.save') }}
-      </ElButton>
-    </template>
-  </ElDialog>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/document/TemplateSelectDialog.vue b/web/apps/web-ele/src/components/zq-smart-table/document/TemplateSelectDialog.vue
deleted file mode 100644
index 1d55672..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/document/TemplateSelectDialog.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, type Component } from 'vue'
-import { useI18n } from '@vben/locales'
-import { ZqDialog } from '#/components/zq-dialog'
-import {
-  DOC_TEMPLATE_CATEGORIES,
-  DOCUMENT_TEMPLATES,
-  type DocumentTemplate,
-} from '../templates/document-templates'
-import {
-  FileText,
-  Briefcase,
-  CalendarCheck,
-  Lightbulb,
-  BookOpen,
-  Target,
-  FilePlus,
-  ScrollText,
-  CalendarDays,
-  Flag,
-  Rocket,
-  Monitor,
-  Bug,
-  NotebookPen,
-} from '@vben/icons'
-
-const ICON_MAP: Record<string, Component> = {
-  FileText,
-  Briefcase,
-  CalendarCheck,
-  Lightbulb,
-  BookOpen,
-  Target,
-  FilePlus,
-  ScrollText,
-  CalendarDays,
-  Flag,
-  Rocket,
-  Monitor,
-  Bug,
-  NotebookPen,
-}
-
-const props = defineProps<{
-  modelValue: boolean
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  select: [template: DocumentTemplate]
-  blank: []
-}>()
-
-const { t } = useI18n()
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: (v) => emit('update:modelValue', v),
-})
-
-const activeCategory = ref('all')
-const hoveredTemplate = ref<string | null>(null)
-
-const filteredTemplates = computed(() => {
-  if (activeCategory.value === 'all') return DOCUMENT_TEMPLATES
-  return DOCUMENT_TEMPLATES.filter((t) => t.category === activeCategory.value)
-})
-
-function handleSelect(template: DocumentTemplate) {
-  if (template.id === 'blank') {
-    emit('blank')
-  } else {
-    emit('select', template)
-  }
-  visible.value = false
-}
-</script>
-
-<template>
-  <ZqDialog
-    v-model="visible"
-    :title="t('sidebar.newDocumentTitle')"
-    width="720px"
-    :show-footer="false"
-    :show-fullscreen-button="false"
-    :close-on-click-modal="true"
-    destroy-on-close
-  >
-    <div class="template-picker">
-      <!-- Left categories -->
-      <div class="template-categories">
-        <div
-          v-for="cat in DOC_TEMPLATE_CATEGORIES"
-          :key="cat.id"
-          class="category-item"
-          :class="{ active: activeCategory === cat.id }"
-          @click="activeCategory = cat.id"
-        >
-          <component :is="ICON_MAP[cat.icon]" class="category-icon" />
-          <span class="category-label">{{ cat.label }}</span>
-        </div>
-      </div>
-
-      <!-- Right template grid -->
-      <div class="template-grid-wrapper">
-        <div class="template-grid">
-          <div
-            v-for="tpl in filteredTemplates"
-            :key="tpl.id"
-            class="template-card"
-            :class="{ hovered: hoveredTemplate === tpl.id }"
-            @mouseenter="hoveredTemplate = tpl.id"
-            @mouseleave="hoveredTemplate = null"
-            @click="handleSelect(tpl)"
-          >
-            <div class="card-icon">
-              <component :is="ICON_MAP[tpl.icon]" class="card-icon-svg" />
-            </div>
-            <div class="card-info">
-              <div class="card-name">{{ tpl.name }}</div>
-              <div class="card-desc">{{ tpl.description }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </ZqDialog>
-</template>
-
-<style scoped>
-.template-picker {
-  display: flex;
-  height: 420px;
-  margin: -8px -4px;
-  overflow: hidden;
-}
-
-.template-categories {
-  width: 160px;
-  flex-shrink: 0;
-  padding: 8px;
-  border-right: 1px solid var(--el-border-color-lighter);
-  overflow-y: auto;
-}
-
-.category-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--el-text-color-regular);
-  transition: all 0.2s;
-  margin-bottom: 2px;
-}
-
-.category-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.category-item.active {
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-  font-weight: 500;
-}
-
-.category-icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.category-label {
-  line-height: 1.2;
-}
-
-.template-grid-wrapper {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 12px;
-}
-
-.template-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
-}
-
-.template-card {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px;
-  border-radius: 8px;
-  border: 1px solid var(--el-border-color-lighter);
-  cursor: pointer;
-  transition: all 0.2s;
-  background: var(--el-bg-color);
-}
-
-.template-card:hover,
-.template-card.hovered {
-  border-color: var(--el-color-primary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
-}
-
-.card-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--el-color-primary-light-9);
-  flex-shrink: 0;
-}
-
-.card-icon-svg {
-  width: 20px;
-  height: 20px;
-  color: var(--el-color-primary);
-}
-
-.card-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.card-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  line-height: 1.4;
-  margin-bottom: 4px;
-}
-
-.card-desc {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/document/VersionHistoryPanel.vue b/web/apps/web-ele/src/components/zq-smart-table/document/VersionHistoryPanel.vue
deleted file mode 100644
index 969bcea..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/document/VersionHistoryPanel.vue
+++ /dev/null
@@ -1,428 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import { useI18n } from '@vben/locales'
-import { History, RotateCcw, Trash2, Eye, Save, X } from '@vben/icons'
-import { ElMessage, ElMessageBox, ElScrollbar, ElSkeleton, ElEmpty, ElButton } from 'element-plus'
-import {
-  getDocumentVersionsApi,
-  createDocumentVersionApi,
-  restoreDocumentVersionApi,
-  deleteDocumentVersionApi,
-} from '#/api/smart-table'
-import type { DocumentVersionItem } from '#/api/smart-table'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import 'dayjs/locale/zh-cn'
-
-dayjs.extend(relativeTime)
-
-const props = defineProps<{
-  tableId: string
-  visible: boolean
-}>()
-
-const emit = defineEmits<{
-  close: []
-  preview: [versionId: string]
-  restored: []
-}>()
-
-const { t, locale } = useI18n()
-const loading = ref(false)
-const versions = ref<DocumentVersionItem[]>([])
-const total = ref(0)
-const page = ref(1)
-const pageSize = 20
-const savingVersion = ref(false)
-
-const dayjsLocale = computed(() =>
-  locale.value === 'zh' || locale.value === 'zh-CN' ? 'zh-cn' : 'en',
-)
-
-async function loadVersions(reset = false) {
-  if (!props.tableId) return
-  if (reset) page.value = 1
-  loading.value = true
-  try {
-    const res = await getDocumentVersionsApi(props.tableId, page.value, pageSize)
-    const data = (res as any)?.data ?? res
-    versions.value = reset ? (data.items || []) : [...versions.value, ...(data.items || [])]
-    total.value = data.total || 0
-  } catch (e) {
-    console.error('[VersionHistory] load failed', e)
-  } finally {
-    loading.value = false
-  }
-}
-
-watch(() => props.visible, (v) => {
-  if (v && props.tableId) loadVersions(true)
-})
-
-watch(() => props.tableId, () => {
-  if (props.visible) loadVersions(true)
-})
-
-function loadMore() {
-  if (versions.value.length < total.value) {
-    page.value++
-    loadVersions()
-  }
-}
-
-async function handleCreateVersion() {
-  savingVersion.value = true
-  try {
-    await createDocumentVersionApi(props.tableId, t('version.manualSnapshot'))
-    ElMessage.success(t('version.createSuccess'))
-    await loadVersions(true)
-  } catch (e) {
-    ElMessage.error(t('version.createFailed'))
-  } finally {
-    savingVersion.value = false
-  }
-}
-
-async function handleRestore(version: DocumentVersionItem) {
-  try {
-    await ElMessageBox.confirm(
-      t('version.restoreConfirmMsg', { version: version.version }),
-      t('version.restoreConfirm'),
-      { confirmButtonText: t('common.confirm'), cancelButtonText: t('common.cancel'), type: 'warning' },
-    )
-    await restoreDocumentVersionApi(props.tableId, version.id)
-    ElMessage.success(t('version.restoreSuccess'))
-    emit('restored')
-    await loadVersions(true)
-  } catch (e: any) {
-    if (e !== 'cancel' && e?.message !== 'cancel') {
-      ElMessage.error(t('version.restoreFailed'))
-    }
-  }
-}
-
-async function handleDelete(version: DocumentVersionItem) {
-  try {
-    await ElMessageBox.confirm(
-      t('version.deleteConfirmMsg'),
-      t('version.deleteConfirm'),
-      { confirmButtonText: t('common.confirm'), cancelButtonText: t('common.cancel'), type: 'warning' },
-    )
-    await deleteDocumentVersionApi(version.id)
-    ElMessage.success(t('common.deleteSuccess'))
-    await loadVersions(true)
-  } catch (e: any) {
-    if (e !== 'cancel' && e?.message !== 'cancel') {
-      ElMessage.error(t('common.deleteFailed'))
-    }
-  }
-}
-
-function handlePreview(version: DocumentVersionItem) {
-  emit('preview', version.id)
-}
-
-function formatTime(dt?: string) {
-  if (!dt) return ''
-  return dayjs(dt).locale(dayjsLocale.value).fromNow()
-}
-
-function formatSize(bytes: number) {
-  if (bytes < 1024) return `${bytes} B`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
-}
-</script>
-
-<template>
-  <transition name="version-panel-slide">
-    <div v-if="visible" class="version-panel">
-      <div class="version-panel__header">
-        <div class="version-panel__header-left">
-          <History class="w-4 h-4" />
-          <span class="version-panel__title">{{ t('version.title') }}</span>
-          <span v-if="total > 0" class="version-panel__count">{{ total }}</span>
-        </div>
-        <div class="version-panel__header-right">
-          <button
-            class="version-panel__save-btn"
-            :disabled="savingVersion"
-            @click="handleCreateVersion"
-          >
-            <Save class="w-3.5 h-3.5" />
-            {{ t('version.createSnapshot') }}
-          </button>
-          <button class="version-panel__close" @click="emit('close')">
-            <X class="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      <ElScrollbar class="version-panel__body">
-        <template v-if="loading && versions.length === 0">
-          <div v-for="i in 5" :key="i" class="version-item version-item--skeleton">
-            <ElSkeleton :rows="2" animated />
-          </div>
-        </template>
-
-        <template v-else-if="versions.length === 0">
-          <ElEmpty :description="t('version.empty')" :image-size="80" />
-        </template>
-
-        <template v-else>
-          <div
-            v-for="version in versions"
-            :key="version.id"
-            class="version-item"
-          >
-            <div class="version-item__header">
-              <span class="version-item__version">v{{ version.version }}</span>
-              <span class="version-item__time">{{ formatTime(version.sys_create_datetime) }}</span>
-            </div>
-            <div v-if="version.change_summary" class="version-item__summary">
-              {{ version.change_summary }}
-            </div>
-            <div class="version-item__footer">
-              <div class="version-item__creator">
-                <span v-if="version.creator_name" class="version-item__creator-name">
-                  {{ version.creator_name }}
-                </span>
-                <span class="version-item__size">{{ formatSize(version.content_size) }}</span>
-              </div>
-              <div class="version-item__actions">
-                <button class="version-item__action" :title="t('version.preview')" @click="handlePreview(version)">
-                  <Eye class="w-3.5 h-3.5" />
-                </button>
-                <button class="version-item__action" :title="t('version.restore')" @click="handleRestore(version)">
-                  <RotateCcw class="w-3.5 h-3.5" />
-                </button>
-                <button class="version-item__action version-item__action--danger" :title="t('common.delete')" @click="handleDelete(version)">
-                  <Trash2 class="w-3.5 h-3.5" />
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <div v-if="versions.length < total" class="version-panel__load-more">
-            <ElButton text :loading="loading" @click="loadMore">
-              {{ t('version.loadMore') }}
-            </ElButton>
-          </div>
-        </template>
-      </ElScrollbar>
-    </div>
-  </transition>
-</template>
-
-<style scoped>
-.version-panel {
-  width: 320px;
-  min-width: 320px;
-  display: flex;
-  flex-direction: column;
-  border-left: 1px solid var(--el-border-color-lighter);
-  background: var(--zq-bg-primary);
-  overflow: hidden;
-}
-
-.version-panel__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-  flex-shrink: 0;
-}
-
-.version-panel__header-left {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--zq-text-primary);
-}
-
-.version-panel__title {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.version-panel__count {
-  font-size: 11px;
-  color: var(--zq-text-tertiary);
-  background: var(--el-fill-color);
-  padding: 1px 6px;
-  border-radius: 10px;
-}
-
-.version-panel__header-right {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.version-panel__save-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  font-size: 12px;
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  border: 1px solid var(--el-color-primary-light-5);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.version-panel__save-btn:hover:not(:disabled) {
-  background: var(--el-color-primary-light-7);
-}
-
-.version-panel__save-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.version-panel__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-tertiary);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.version-panel__close:hover {
-  background: var(--el-fill-color-light);
-  color: var(--zq-text-secondary);
-}
-
-.version-panel__body {
-  flex: 1;
-  overflow: hidden;
-}
-
-.version-item {
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--el-border-color-extra-light);
-  transition: background 0.15s;
-}
-
-.version-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.version-item--skeleton {
-  padding: 16px 14px;
-}
-
-.version-item__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 4px;
-}
-
-.version-item__version {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--zq-text-primary);
-}
-
-.version-item__time {
-  font-size: 12px;
-  color: var(--zq-text-tertiary);
-}
-
-.version-item__summary {
-  font-size: 12px;
-  color: var(--zq-text-secondary);
-  margin-bottom: 6px;
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.version-item__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.version-item__creator {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  color: var(--zq-text-tertiary);
-}
-
-.version-item__creator-name {
-  color: var(--zq-text-secondary);
-}
-
-.version-item__size {
-  color: var(--zq-text-placeholder);
-}
-
-.version-item__actions {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.version-item:hover .version-item__actions {
-  opacity: 1;
-}
-
-.version-item__action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  border-radius: 4px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-secondary);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.version-item__action:hover {
-  background: var(--el-fill-color);
-  color: var(--el-color-primary);
-}
-
-.version-item__action--danger:hover {
-  color: var(--el-color-danger);
-}
-
-.version-panel__load-more {
-  display: flex;
-  justify-content: center;
-  padding: 12px;
-}
-
-/* Slide transition */
-.version-panel-slide-enter-active,
-.version-panel-slide-leave-active {
-  transition: all 0.25s ease;
-  overflow: hidden;
-}
-
-.version-panel-slide-enter-from,
-.version-panel-slide-leave-to {
-  width: 0;
-  min-width: 0;
-  opacity: 0;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/document/VersionPreviewDialog.vue b/web/apps/web-ele/src/components/zq-smart-table/document/VersionPreviewDialog.vue
deleted file mode 100644
index 8ea65bf..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/document/VersionPreviewDialog.vue
+++ /dev/null
@@ -1,145 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import { useI18n } from '@vben/locales'
-import { ElDialog, ElButton, ElMessage, ElMessageBox } from 'element-plus'
-import { RotateCcw } from '@vben/icons'
-import { ZqEditor } from '#/components/zq-editor'
-import { getDocumentVersionDetailApi, restoreDocumentVersionApi } from '#/api/smart-table'
-import type { DocumentVersionDetail } from '#/api/smart-table'
-import type { JSONContent } from '@tiptap/vue-3'
-import dayjs from 'dayjs'
-
-const props = defineProps<{
-  modelValue: boolean
-  versionId: string
-  tableId: string
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  restored: []
-}>()
-
-const { t } = useI18n()
-const loading = ref(false)
-const versionDetail = ref<DocumentVersionDetail | null>(null)
-
-const dialogVisible = computed({
-  get: () => props.modelValue,
-  set: (v) => emit('update:modelValue', v),
-})
-
-watch(() => props.modelValue, async (v) => {
-  if (v && props.versionId) {
-    loading.value = true
-    try {
-      const res = await getDocumentVersionDetailApi(props.versionId)
-      versionDetail.value = (res as any)?.data ?? res
-    } catch (e) {
-      console.error('[VersionPreview] load failed', e)
-    } finally {
-      loading.value = false
-    }
-  } else {
-    versionDetail.value = null
-  }
-})
-
-async function handleRestore() {
-  if (!versionDetail.value) return
-  try {
-    await ElMessageBox.confirm(
-      t('version.restoreConfirmMsg', { version: versionDetail.value.version }),
-      t('version.restoreConfirm'),
-      { confirmButtonText: t('common.confirm'), cancelButtonText: t('common.cancel'), type: 'warning' },
-    )
-    await restoreDocumentVersionApi(props.tableId, versionDetail.value.id)
-    ElMessage.success(t('version.restoreSuccess'))
-    dialogVisible.value = false
-    emit('restored')
-  } catch (e: any) {
-    if (e !== 'cancel' && e?.message !== 'cancel') {
-      ElMessage.error(t('version.restoreFailed'))
-    }
-  }
-}
-</script>
-
-<template>
-  <ElDialog
-    v-model="dialogVisible"
-    :title="`${t('version.preview')} - v${versionDetail?.version ?? ''}`"
-    width="900px"
-    :close-on-click-modal="false"
-    destroy-on-close
-    class="version-preview-dialog"
-  >
-    <div v-loading="loading" class="version-preview__content">
-      <template v-if="versionDetail && !loading">
-        <div class="version-preview__meta">
-          <span v-if="versionDetail.creator_name" class="version-preview__creator">
-            {{ versionDetail.creator_name }}
-          </span>
-          <span class="version-preview__time">
-            {{ versionDetail.sys_create_datetime ? dayjs(versionDetail.sys_create_datetime).format('YYYY-MM-DD HH:mm:ss') : '' }}
-          </span>
-          <span v-if="versionDetail.change_summary" class="version-preview__summary">
-            {{ versionDetail.change_summary }}
-          </span>
-        </div>
-        <div class="version-preview__editor">
-          <ZqEditor
-            :model-value="versionDetail.content as JSONContent"
-            mode="full"
-            :readonly="true"
-          />
-        </div>
-      </template>
-    </div>
-    <template #footer>
-      <ElButton @click="dialogVisible = false">{{ t('common.cancel') }}</ElButton>
-      <ElButton type="primary" :icon="RotateCcw" @click="handleRestore">
-        {{ t('version.restore') }}
-      </ElButton>
-    </template>
-  </ElDialog>
-</template>
-
-<style scoped>
-.version-preview__content {
-  min-height: 400px;
-  max-height: 65vh;
-  overflow-y: auto;
-}
-
-.version-preview__meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  margin-bottom: 12px;
-  background: var(--el-fill-color-light);
-  border-radius: 6px;
-  font-size: 13px;
-}
-
-.version-preview__creator {
-  font-weight: 500;
-  color: var(--zq-text-secondary);
-}
-
-.version-preview__time {
-  color: var(--zq-text-tertiary);
-}
-
-.version-preview__summary {
-  color: var(--zq-text-secondary);
-  font-style: italic;
-}
-
-.version-preview__editor {
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  overflow: hidden;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/icons/FieldIcon.vue b/web/apps/web-ele/src/components/zq-smart-table/icons/FieldIcon.vue
deleted file mode 100644
index 2cfffe3..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/icons/FieldIcon.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { FieldType } from '#/types/zq-smart-table/field'
-import {
-  EditPen,
-  Histogram,
-  Select,
-  CollectionTag,
-  Calendar,
-  Check,
-  User,
-  Star,
-  TrendCharts,
-  Link,
-  Message,
-  Phone,
-  Paperclip,
-  Clock,
-  Money,
-  Odometer,
-  Location,
-  Avatar,
-  MagicStick,
-  Document,
-  OfficeBuilding,
-  MapLocation,
-  Picture,
-  Connection,
-  Search,
-  DataAnalysis,
-} from '@element-plus/icons-vue'
-
-defineProps<{
-  type: FieldType
-  size?: number
-}>()
-</script>
-
-<template>
-  <el-icon :size="size ?? 14" class="field-type-icon">
-    <EditPen v-if="type === FieldType.Text" />
-    <Histogram v-else-if="type === FieldType.Number" />
-    <Select v-else-if="type === FieldType.SingleSelect" />
-    <CollectionTag v-else-if="type === FieldType.MultiSelect" />
-    <Calendar v-else-if="type === FieldType.Date" />
-    <Check v-else-if="type === FieldType.Checkbox" />
-    <User v-else-if="type === FieldType.Person || type === FieldType.User" />
-    <Star v-else-if="type === FieldType.Rating" />
-    <TrendCharts v-else-if="type === FieldType.Progress" />
-    <Link v-else-if="type === FieldType.URL" />
-    <Message v-else-if="type === FieldType.Email" />
-    <Phone v-else-if="type === FieldType.Phone" />
-    <Paperclip v-else-if="type === FieldType.Attachment" />
-    <Money v-else-if="type === FieldType.Currency" />
-    <Odometer v-else-if="type === FieldType.AutoNumber" />
-    <Location v-else-if="type === FieldType.Location" />
-    <Clock v-else-if="type === FieldType.CreatedTime || type === FieldType.ModifiedTime" />
-    <Avatar v-else-if="type === FieldType.CreatedBy || type === FieldType.ModifiedBy" />
-    <MagicStick v-else-if="type === FieldType.Formula" />
-    <Document v-else-if="type === FieldType.RichText" />
-    <OfficeBuilding v-else-if="type === FieldType.Department" />
-    <MapLocation v-else-if="type === FieldType.Region" />
-    <Picture v-else-if="type === FieldType.Image" />
-    <Connection v-else-if="type === FieldType.Link" />
-    <Search v-else-if="type === FieldType.Lookup" />
-    <DataAnalysis v-else-if="type === FieldType.Rollup" />
-    <EditPen v-else />
-  </el-icon>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/layout/SmartTableContent.vue b/web/apps/web-ele/src/components/zq-smart-table/layout/SmartTableContent.vue
deleted file mode 100644
index fdbf599..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/layout/SmartTableContent.vue
+++ /dev/null
@@ -1,991 +0,0 @@
-<script setup lang="ts">
-import '#/styles/zq-smart-table/index.css'
-import { computed, ref, watch, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { ViewType, SmartItemType } from '#/types/zq-smart-table/table'
-import { ThemeToggle, LanguageToggle, UserDropdown } from '@vben/layouts'
-import { useUserStore } from '@vben/stores'
-import { useAuthStore } from '#/store'
-import { getFileUrl } from '#/composables/useFileUrl'
-import ViewTabs from '#/components/zq-smart-table/toolbar/ViewTabs.vue'
-import TableToolbar from '#/components/zq-smart-table/toolbar/TableToolbar.vue'
-import TableGrid from '#/components/zq-smart-table/table/TableGrid.vue'
-import KanbanView from '#/components/zq-smart-table/table/KanbanView.vue'
-import GalleryView from '#/components/zq-smart-table/table/GalleryView.vue'
-import FormView from '#/components/zq-smart-table/table/FormView.vue'
-import CalendarView from '#/components/zq-smart-table/table/CalendarView.vue'
-import GanttView from '#/components/zq-smart-table/table/GanttView.vue'
-import PermissionDialog from '#/components/zq-smart-table/permission/PermissionDialog.vue'
-import VersionHistoryPanel from '#/components/zq-smart-table/document/VersionHistoryPanel.vue'
-import VersionPreviewDialog from '#/components/zq-smart-table/document/VersionPreviewDialog.vue'
-import SaveAsTemplateDialog from '#/components/zq-smart-table/document/SaveAsTemplateDialog.vue'
-import { ZqEditor } from '#/components/zq-editor'
-import { useDocExport } from '#/components/zq-editor/composables/use-doc-export'
-import { Share2, Grid, FileText, Clock, ListTree, PanelLeft, Download, FilePlus2, History, LayoutTemplate, MoreVertical } from '@vben/icons'
-import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessage } from 'element-plus'
-import type { JSONContent } from '@tiptap/vue-3'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import 'dayjs/locale/zh-cn'
-
-dayjs.extend(relativeTime)
-
-const props = withDefaults(defineProps<{
-  showHeader?: boolean
-  subPageRoute?: string
-}>(), {
-  showHeader: true,
-  subPageRoute: '/zq-smart-table',
-})
-
-const { t, locale } = useI18n()
-const tableStore = useTableStore()
-const userStore = useUserStore()
-const authStore = useAuthStore()
-const router = useRouter()
-
-const showPermission = ref(false)
-
-const currentViewType = computed(() => tableStore.activeView?.type)
-const activeItemType = computed(() => tableStore.activeTable?.type ?? SmartItemType.Table)
-const isDocument = computed(() => activeItemType.value === SmartItemType.Document)
-
-const documentContent = ref<JSONContent | undefined>(undefined)
-const docTitleEditing = ref(false)
-const docTitleInput = ref<HTMLInputElement>()
-const docBodyRef = ref<HTMLElement>()
-const docEditorRef = ref<InstanceType<typeof ZqEditor>>()
-
-const { exportMarkdown, exportPdf, exportWord } = useDocExport()
-const exporting = ref(false)
-
-// ==================== Version History ====================
-const versionPanelOpen = ref(false)
-const versionPreviewVisible = ref(false)
-const previewVersionId = ref('')
-
-function toggleVersionPanel() {
-  versionPanelOpen.value = !versionPanelOpen.value
-}
-
-function handleVersionPreview(versionId: string) {
-  previewVersionId.value = versionId
-  versionPreviewVisible.value = true
-}
-
-async function handleVersionRestored() {
-  const tableId = tableStore.activeTable?.id
-  if (tableId) {
-    await tableStore.loadTableFull(tableId)
-    syncDocumentContent()
-  }
-}
-
-// ==================== Save As Template ====================
-const saveAsTemplateVisible = ref(false)
-
-function handleSaveAsTemplate() {
-  saveAsTemplateVisible.value = true
-}
-
-async function handleAddSubPage() {
-  const parentId = tableStore.activeTable?.id
-  if (!parentId) return
-  const name = t('document.untitled')
-  const newId = await tableStore.addSubPage(parentId, name)
-  if (newId) {
-    await tableStore.loadTableFull(newId)
-    router.push(`${props.subPageRoute}/${newId}`)
-  }
-}
-
-async function handleExport(format: string) {
-  const editor = docEditorRef.value?.getEditor()
-  const title = tableStore.activeTable?.name || t('document.untitled')
-  const tableId = tableStore.activeTable?.id
-  if (!editor || !tableId || exporting.value) return
-
-  exporting.value = true
-  const loadingMsg = ElMessage({
-    message: t('document.exporting'),
-    type: 'info',
-    duration: 0,
-    icon: undefined,
-  })
-
-  try {
-    if (format === 'markdown') {
-      exportMarkdown(editor, title)
-    } else if (format === 'pdf') {
-      await exportPdf(editor, title, tableId)
-    } else if (format === 'word') {
-      await exportWord(editor, title)
-    }
-    loadingMsg.close()
-    ElMessage.success(t('document.exportSuccess'))
-  } catch (e) {
-    loadingMsg.close()
-    ElMessage.error(t('document.exportFailed'))
-    console.error('Export failed:', e)
-  } finally {
-    exporting.value = false
-  }
-}
-
-function handleDocMenuCommand(cmd: string) {
-  switch (cmd) {
-    case 'newSubPage':
-      void handleAddSubPage()
-      break
-    case 'versionHistory':
-      toggleVersionPanel()
-      break
-    case 'saveTemplate':
-      handleSaveAsTemplate()
-      break
-    case 'exportMarkdown':
-      void handleExport('markdown')
-      break
-    case 'exportPdf':
-      void handleExport('pdf')
-      break
-    case 'exportWord':
-      void handleExport('word')
-      break
-    default:
-      break
-  }
-}
-
-const avatar = ref('')
-
-async function loadAvatarUrl() {
-  const avatarPath = userStore.userInfo?.avatar
-  avatar.value = avatarPath ? await getFileUrl(avatarPath) : ''
-}
-
-watch(() => userStore.userInfo?.avatar, () => loadAvatarUrl(), { immediate: true })
-
-const creatorAvatarUrl = ref('')
-watch(() => tableStore.activeTable?.creatorAvatar, async (v) => {
-  creatorAvatarUrl.value = v ? await getFileUrl(v) : ''
-}, { immediate: true })
-
-const formattedUpdateTime = computed(() => {
-  const active = tableStore.activeTable
-  if (!active?.updatedAt) return ''
-  const dayjsLocale = locale.value === 'zh' || locale.value === 'zh-CN' ? 'zh-cn' : 'en'
-  const updateTime = dayjs(active.updatedAt)
-  const now = dayjs()
-  if (now.diff(updateTime, 'day') < 1) {
-    return t('document.modifiedToday')
-  }
-  if (now.diff(updateTime, 'day') < 2) {
-    return t('document.modifiedYesterday')
-  }
-  return updateTime.locale(dayjsLocale).fromNow() + t('document.modified')
-})
-
-// ==================== TOC (Table of Contents) ====================
-
-interface TocItem {
-  id: string
-  text: string
-  level: number
-  index: number
-}
-
-const tocOpen = ref(true)
-const tocItems = ref<TocItem[]>([])
-const activeTocId = ref('')
-
-function extractHeadings(content?: JSONContent) {
-  const items: TocItem[] = []
-  if (!content?.content) return items
-  let idx = 0
-  for (const node of content.content) {
-    if (node.type === 'heading' && node.attrs?.level && node.attrs.level <= 6) {
-      const text = extractTextFromNode(node)
-      if (text.trim()) {
-        items.push({
-          id: `toc-heading-${idx}`,
-          text: text.trim(),
-          level: node.attrs.level as number,
-          index: idx,
-        })
-      }
-      idx++
-    }
-  }
-  return items
-}
-
-function extractTextFromNode(node: JSONContent): string {
-  if (node.text) return node.text
-  if (!node.content) return ''
-  return node.content.map(extractTextFromNode).join('')
-}
-
-watch(documentContent, (content) => {
-  tocItems.value = extractHeadings(content)
-}, { deep: true })
-
-const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6'
-
-function scrollToHeading(item: TocItem) {
-  const editorEl = docBodyRef.value?.querySelector('.ProseMirror')
-  if (!editorEl) return
-  const headings = editorEl.querySelectorAll(HEADING_SELECTOR)
-  const target = headings[item.index]
-  if (!target) return
-  activeTocId.value = item.id
-  target.scrollIntoView({ behavior: 'smooth', block: 'start' })
-}
-
-function handleDocBodyScroll() {
-  if (!tocItems.value.length) return
-  const editorEl = docBodyRef.value?.querySelector('.ProseMirror')
-  if (!editorEl) return
-  const headings = editorEl.querySelectorAll(HEADING_SELECTOR)
-  const bodyRect = docBodyRef.value?.getBoundingClientRect()
-  if (!bodyRect) return
-  const offset = 80
-
-  let activeIdx = 0
-  headings.forEach((el, i) => {
-    const rect = el.getBoundingClientRect()
-    if (rect.top <= bodyRect.top + offset) {
-      activeIdx = i
-    }
-  })
-
-  if (tocItems.value[activeIdx]) {
-    activeTocId.value = tocItems.value[activeIdx]!.id
-  }
-}
-
-const hasToc = computed(() => tocItems.value.length > 0)
-
-// ==================== Common ====================
-
-async function handleLogout() {
-  await authStore.logout(false)
-}
-
-// ==================== Document content sync ====================
-
-function syncDocumentContent() {
-  const active = tableStore.activeTable
-  if (active?.type === SmartItemType.Document) {
-    documentContent.value = active.content ?? undefined
-  }
-}
-
-watch(() => tableStore.activeTable?.id, () => {
-  syncDocumentContent()
-}, { immediate: true })
-
-function handleDocumentChange(content: JSONContent) {
-  documentContent.value = content
-  tableStore.updateDocumentContent(content)
-}
-
-function startTitleEdit() {
-  docTitleEditing.value = true
-  nextTick(() => {
-    docTitleInput.value?.focus()
-    docTitleInput.value?.select()
-  })
-}
-
-async function finishTitleEdit() {
-  docTitleEditing.value = false
-  const active = tableStore.activeTable
-  if (!active) return
-  const newName = docTitleInput.value?.value?.trim()
-  if (newName && newName !== active.name) {
-    await tableStore.renameTable(active.id, newName)
-  }
-}
-
-function handleTitleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    finishTitleEdit()
-  } else if (e.key === 'Escape') {
-    docTitleEditing.value = false
-  }
-}
-
-function getCreatorInitial() {
-  const name = tableStore.activeTable?.creatorName
-  if (!name) return '?'
-  return name.charAt(0).toUpperCase()
-}
-
-defineExpose({ syncDocumentContent })
-</script>
-
-<template>
-  <div class="flex-1 flex flex-col h-full overflow-hidden" style="background: var(--zq-bg-primary);">
-
-    <!-- ===================== CREATING FROM TEMPLATE ===================== -->
-    <div
-      v-if="tableStore.creatingFromTemplate"
-      v-loading="true"
-      :element-loading-text="t('template.creating')"
-      class="flex-1 flex items-center justify-center"
-    />
-
-    <!-- ===================== TABLE MODE ===================== -->
-    <template v-else-if="!isDocument && tableStore.activeTable">
-      <!-- Table Header -->
-      <div class="flex items-center gap-2 px-4 pt-3 pb-1">
-        <Grid class="w-5 h-5 flex-shrink-0" style="color: var(--zq-text-secondary);" />
-        <h2 class="text-base font-semibold" style="color: var(--zq-text-primary);">{{ tableStore.activeTable.name }}</h2>
-        <div class="flex-1" />
-        <div class="flex items-center">
-          <button
-            v-if="tableStore.isOwnerOrManager"
-            class="share-btn"
-            @click="showPermission = true"
-          >
-            <Share2 class="share-icon" />
-            {{ t('permission.title') }}
-          </button>
-          <template v-if="showHeader">
-            <ThemeToggle class="mr-1 mt-[2px]" />
-            <LanguageToggle class="mr-1" />
-            <UserDropdown
-              :avatar="avatar"
-              :menus="[]"
-              :text="userStore.userInfo?.realName"
-              :description="userStore.userInfo?.email || userStore.userInfo?.username || ''"
-              tag-text="Pro"
-              @logout="handleLogout"
-            />
-          </template>
-        </div>
-      </div>
-
-      <ViewTabs />
-      <TableToolbar v-if="currentViewType !== ViewType.Form && currentViewType !== ViewType.Calendar && currentViewType !== ViewType.Gantt" />
-
-      <div v-loading="tableStore.loading && !currentViewType" class="flex-1 overflow-hidden">
-        <TableGrid v-if="currentViewType === ViewType.Grid" />
-        <KanbanView v-else-if="currentViewType === ViewType.Kanban" />
-        <GalleryView v-else-if="currentViewType === ViewType.Gallery" />
-        <FormView v-else-if="currentViewType === ViewType.Form" />
-        <CalendarView v-else-if="currentViewType === ViewType.Calendar" />
-        <GanttView v-else-if="currentViewType === ViewType.Gantt" />
-        <div v-else-if="!tableStore.loading" class="flex items-center justify-center h-full" style="color: var(--zq-text-secondary);">
-          {{ t('common.noData') }}
-        </div>
-      </div>
-    </template>
-
-    <!-- ===================== DOCUMENT MODE ===================== -->
-    <template v-else-if="isDocument && tableStore.activeTable">
-      <!-- Document Top Bar -->
-      <div class="doc-topbar">
-        <div class="doc-topbar__left">
-          <button
-            v-if="hasToc"
-            class="doc-topbar__toc-btn"
-            :class="{ 'is-active': tocOpen }"
-            :title="t('document.toc')"
-            @click="tocOpen = !tocOpen"
-          >
-            <ListTree class="w-4 h-4" />
-          </button>
-          <FileText class="w-4 h-4" style="color: var(--zq-text-tertiary);" />
-          <span class="doc-topbar__title">{{ tableStore.activeTable.name }}</span>
-          <span
-            v-if="tableStore.documentEdited"
-            class="doc-topbar__status"
-          >
-            {{ tableStore.documentSaving ? t('document.saving') : t('document.autoSaved') }}
-          </span>
-        </div>
-        <div class="doc-topbar__right">
-          <ElDropdown
-            trigger="click"
-            placement="bottom-start"
-            popper-class="doc-topbar-more-dropdown"
-            @command="handleDocMenuCommand"
-          >
-            <button
-              type="button"
-              class="doc-topbar__menu-trigger"
-              :title="t('document.moreActions')"
-            >
-              <MoreVertical class="doc-topbar__menu-trigger-icon" />
-            </button>
-            <template #dropdown>
-              <ElDropdownMenu>
-                <ElDropdownItem command="newSubPage">
-                  <span class="doc-menu-item">
-                    <FilePlus2 class="doc-menu-item__icon" />
-                    {{ t('sidebar.newSubPage') }}
-                  </span>
-                </ElDropdownItem>
-                <ElDropdownItem command="versionHistory">
-                  <span class="doc-menu-item" :class="{ 'doc-menu-item--active': versionPanelOpen }">
-                    <History class="doc-menu-item__icon" />
-                    {{ t('version.title') }}
-                  </span>
-                </ElDropdownItem>
-                <ElDropdownItem command="saveTemplate">
-                  <span class="doc-menu-item">
-                    <LayoutTemplate class="doc-menu-item__icon" />
-                    {{ t('template.saveAsTemplate') }}
-                  </span>
-                </ElDropdownItem>
-                <ElDropdownItem divided command="exportMarkdown" :disabled="exporting">
-                  <span class="doc-menu-item">
-                    <Download class="doc-menu-item__icon" />
-                    {{ t('document.exportMarkdown') }}
-                  </span>
-                </ElDropdownItem>
-                <ElDropdownItem command="exportPdf" :disabled="exporting">
-                  <span class="doc-menu-item">
-                    <Download class="doc-menu-item__icon" />
-                    {{ t('document.exportPdf') }}
-                  </span>
-                </ElDropdownItem>
-                <ElDropdownItem command="exportWord" :disabled="exporting">
-                  <span class="doc-menu-item">
-                    <Download class="doc-menu-item__icon" />
-                    {{ t('document.exportWord') }}
-                  </span>
-                </ElDropdownItem>
-              </ElDropdownMenu>
-            </template>
-          </ElDropdown>
-          <button
-            v-if="tableStore.isOwnerOrManager"
-            type="button"
-            class="share-btn"
-            @click="showPermission = true"
-          >
-            <Share2 class="share-icon" />
-            {{ t('permission.title') }}
-          </button>
-          <template v-if="showHeader">
-            <ThemeToggle class="mr-1 mt-[2px]" />
-            <LanguageToggle class="mr-1" />
-            <UserDropdown
-              :avatar="avatar"
-              :menus="[]"
-              :text="userStore.userInfo?.realName"
-              :description="userStore.userInfo?.email || userStore.userInfo?.username || ''"
-              tag-text="Pro"
-              @logout="handleLogout"
-            />
-          </template>
-        </div>
-      </div>
-
-      <!-- Document layout: TOC + Content + Version Panel -->
-      <div class="doc-layout">
-        <!-- TOC Panel -->
-        <transition name="toc-slide">
-          <aside v-if="tocOpen && hasToc" class="doc-toc">
-            <div class="doc-toc__header">
-              <span class="doc-toc__label">{{ t('document.toc') }}</span>
-              <button class="doc-toc__close" @click="tocOpen = false">
-                <PanelLeft class="w-3.5 h-3.5" />
-              </button>
-            </div>
-            <nav class="doc-toc__nav">
-              <button
-                v-for="item in tocItems"
-                :key="item.id"
-                class="doc-toc__item"
-                :class="{
-                  'is-active': activeTocId === item.id,
-                  [`doc-toc__item--h${item.level}`]: true,
-                }"
-                @click="scrollToHeading(item)"
-              >
-                {{ item.text }}
-              </button>
-            </nav>
-          </aside>
-        </transition>
-
-        <!-- Document Content Area -->
-        <div ref="docBodyRef" class="doc-body" @scroll="handleDocBodyScroll">
-          <div class="doc-container">
-            <!-- Document Title -->
-            <div class="doc-title-area">
-              <input
-                v-if="docTitleEditing"
-                ref="docTitleInput"
-                class="doc-title-input"
-                :value="tableStore.activeTable.name"
-                :placeholder="t('document.titlePlaceholder')"
-                @blur="finishTitleEdit"
-                @keydown="handleTitleKeydown"
-              />
-              <h1
-                v-else
-                class="doc-title"
-                @click="startTitleEdit"
-              >
-                {{ tableStore.activeTable.name || t('document.titlePlaceholder') }}
-              </h1>
-            </div>
-
-            <!-- Document Metadata -->
-            <div class="doc-meta">
-              <div class="doc-meta__avatar">
-                <img
-                  v-if="creatorAvatarUrl"
-                  :src="creatorAvatarUrl"
-                  :alt="tableStore.activeTable.creatorName"
-                  class="doc-meta__avatar-img"
-                />
-                <span v-else class="doc-meta__avatar-fallback">
-                  {{ getCreatorInitial() }}
-                </span>
-              </div>
-              <span class="doc-meta__name">{{ tableStore.activeTable.creatorName || t('document.unknownUser') }}</span>
-              <span v-if="formattedUpdateTime" class="doc-meta__separator">|</span>
-              <span v-if="formattedUpdateTime" class="doc-meta__time">
-                <Clock class="w-3.5 h-3.5 mr-0.5" />
-                {{ formattedUpdateTime }}
-              </span>
-            </div>
-
-            <!-- Divider -->
-            <div class="doc-divider" />
-
-            <!-- Editor -->
-            <ZqEditor
-              ref="docEditorRef"
-              :key="tableStore.activeTable.id"
-              :model-value="documentContent"
-              mode="full"
-              :placeholder="t('document.placeholder')"
-              @change="handleDocumentChange"
-            />
-          </div>
-        </div>
-
-        <!-- Version History Panel -->
-        <VersionHistoryPanel
-          :table-id="tableStore.activeTable?.id ?? ''"
-          :visible="versionPanelOpen"
-          @close="versionPanelOpen = false"
-          @preview="handleVersionPreview"
-          @restored="handleVersionRestored"
-        />
-      </div>
-    </template>
-
-    <!-- Loading / Empty -->
-    <div
-      v-else-if="!tableStore.activeTable && !tableStore.loading"
-      class="flex-1 flex items-center justify-center"
-      style="color: var(--zq-text-secondary);"
-    >
-      {{ t('common.noData') }}
-    </div>
-
-    <PermissionDialog v-model="showPermission" />
-
-    <!-- Version Preview Dialog -->
-    <VersionPreviewDialog
-      v-model="versionPreviewVisible"
-      :version-id="previewVersionId"
-      :table-id="tableStore.activeTable?.id ?? ''"
-      @restored="handleVersionRestored"
-    />
-
-    <!-- Save As Template Dialog -->
-    <SaveAsTemplateDialog
-      v-model="saveAsTemplateVisible"
-      :document-id="tableStore.activeTable?.id ?? ''"
-      :document-name="tableStore.activeTable?.name ?? ''"
-    />
-  </div>
-</template>
-
-<style scoped>
-/* ==================== Shared ==================== */
-.share-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-right: 8px;
-  padding: 6px 14px;
-  font-size: 13px;
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  border: 1px solid var(--el-color-primary-light-5);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-
-.share-btn:hover {
-  background: var(--el-color-primary-light-7);
-}
-
-.share-icon {
-  width: 14px;
-  height: 14px;
-}
-
-/* ==================== Document Top Bar ==================== */
-.doc-topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-  flex-shrink: 0;
-}
-
-.doc-topbar__left {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.doc-topbar__toc-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-tertiary);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.doc-topbar__toc-btn:hover {
-  background: var(--el-fill-color-light);
-  color: var(--zq-text-secondary);
-}
-
-.doc-topbar__toc-btn.is-active {
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-}
-
-.doc-topbar__title {
-  font-size: 13px;
-  color: var(--zq-text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 300px;
-}
-
-.doc-topbar__status {
-  font-size: 12px;
-  color: var(--zq-text-placeholder);
-  white-space: nowrap;
-}
-
-.doc-topbar__right {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.doc-topbar__menu-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  margin-right: 8px;
-  padding: 0;
-  border: 1px solid var(--el-border-color);
-  border-radius: 6px;
-  background: var(--zq-bg-primary);
-  color: var(--zq-text-secondary);
-  cursor: pointer;
-  transition:
-    color 0.15s,
-    border-color 0.15s,
-    background-color 0.15s;
-}
-
-.doc-topbar__menu-trigger:hover {
-  color: var(--el-color-primary);
-  border-color: var(--el-color-primary-light-5);
-  background: var(--el-color-primary-light-9);
-}
-
-.doc-topbar__menu-trigger-icon {
-  width: 18px;
-  height: 18px;
-}
-
-/* ==================== Document Layout ==================== */
-.doc-layout {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-
-/* ==================== TOC Panel ==================== */
-.doc-toc {
-  width: 220px;
-  min-width: 220px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--zq-bg-primary);
-}
-
-.doc-toc__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 14px 8px;
-  flex-shrink: 0;
-}
-
-.doc-toc__label {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--zq-text-tertiary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.doc-toc__close {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-tertiary);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.doc-toc__close:hover {
-  background: var(--el-fill-color-light);
-  color: var(--zq-text-secondary);
-}
-
-.doc-toc__nav {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 8px 12px;
-}
-
-.doc-toc__item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: 5px 8px;
-  margin: 1px 0;
-  font-size: 13px;
-  line-height: 1.4;
-  color: var(--zq-text-secondary);
-  border: none;
-  background: transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.doc-toc__item:hover {
-  background: var(--el-fill-color-light);
-  color: var(--zq-text-primary);
-}
-
-.doc-toc__item.is-active {
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-  font-weight: 500;
-}
-
-.doc-toc__item--h1 { padding-left: 8px; font-weight: 500; }
-.doc-toc__item--h2 { padding-left: 20px; }
-.doc-toc__item--h3 { padding-left: 32px; font-size: 12px; }
-.doc-toc__item--h4 { padding-left: 44px; font-size: 12px; }
-.doc-toc__item--h5 { padding-left: 56px; font-size: 11px; }
-.doc-toc__item--h6 { padding-left: 68px; font-size: 11px; }
-
-/* TOC transition */
-.toc-slide-enter-active,
-.toc-slide-leave-active {
-  transition: all 0.25s ease;
-  overflow: hidden;
-}
-
-.toc-slide-enter-from,
-.toc-slide-leave-to {
-  width: 0;
-  min-width: 0;
-  opacity: 0;
-}
-
-/* ==================== Document Body ==================== */
-.doc-body {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.doc-container {
-  max-width: 900px;
-  width: 100%;
-  margin: 0 auto;
-  padding: 22px 22px 0;
-}
-
-/* ==================== Document Title ==================== */
-.doc-title-area { margin-bottom: 16px; }
-
-.doc-title {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1.3;
-  color: var(--zq-text-primary);
-  cursor: text;
-  margin: 0;
-  padding: 0 28px;
-  word-break: break-word;
-}
-
-.doc-title-input {
-  display: block;
-  width: 100%;
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1.3;
-  color: var(--zq-text-primary);
-  background: transparent;
-  border: none;
-  outline: none;
-  padding: 0 28px;
-  margin: 0;
-  font-family: inherit;
-}
-
-/* ==================== Document Metadata ==================== */
-.doc-meta {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 16px;
-  padding: 0 28px;
-}
-
-.doc-meta__avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.doc-meta__avatar-img { width: 100%; height: 100%; object-fit: cover; }
-
-.doc-meta__avatar-fallback {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  font-size: 12px;
-  font-weight: 600;
-  color: #fff;
-  background: var(--el-color-primary);
-  border-radius: 50%;
-}
-
-.doc-meta__name { font-size: 13px; font-weight: 500; color: var(--zq-text-secondary); }
-.doc-meta__separator { color: var(--el-border-color); font-size: 13px; }
-.doc-meta__time { display: flex; align-items: center; font-size: 13px; color: var(--zq-text-tertiary); }
-
-/* ==================== Document Divider ==================== */
-.doc-divider { margin-bottom: 16px; }
-</style>
-
-<style>
-.doc-topbar-more-dropdown.el-popper {
-  border: 1px solid var(--el-border-color-light);
-  border-radius: 8px;
-  background-color: var(--el-bg-color-overlay);
-  box-shadow: var(--el-box-shadow-light);
-  padding: 0;
-}
-
-.doc-topbar-more-dropdown .el-dropdown-menu {
-  margin: 0;
-  padding: 4px;
-  min-width: 208px;
-  border: none;
-  background-color: transparent;
-  box-shadow: none;
-}
-
-.doc-topbar-more-dropdown .el-dropdown-menu__item {
-  margin: 0;
-  padding: 0;
-  height: auto;
-  min-height: 0;
-  line-height: 1.4;
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-}
-
-.doc-topbar-more-dropdown .el-dropdown-menu__item:not(.is-disabled):hover,
-.doc-topbar-more-dropdown .el-dropdown-menu__item:not(.is-disabled):focus {
-  background-color: var(--el-fill-color-light);
-  color: var(--el-text-color-primary);
-}
-
-.doc-topbar-more-dropdown .el-dropdown-menu__item.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.doc-topbar-more-dropdown .doc-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  box-sizing: border-box;
-  padding: 8px 12px;
-  white-space: nowrap;
-}
-
-.doc-topbar-more-dropdown .doc-menu-item__icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-  color: var(--el-text-color-secondary);
-}
-
-.doc-topbar-more-dropdown .el-dropdown-menu__item:not(.is-disabled):hover .doc-menu-item__icon {
-  color: var(--el-color-primary);
-}
-
-.doc-topbar-more-dropdown .doc-menu-item--active,
-.doc-topbar-more-dropdown .doc-menu-item--active .doc-menu-item__icon {
-  color: var(--el-color-primary);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/layout/TemplateDialog.vue b/web/apps/web-ele/src/components/zq-smart-table/layout/TemplateDialog.vue
deleted file mode 100644
index 77b6347..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/layout/TemplateDialog.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, type Component } from 'vue'
-import { $t } from '@vben/locales';
-import ZqDialog from '#/components/zq-dialog/zq-dialog.vue'
-import {
-  TEMPLATE_CATEGORIES,
-  TABLE_TEMPLATES,
-  type TableTemplate,
-} from '../templates/table-templates'
-import {
-  ClipboardList,
-  BarChart2,
-  Coins,
-  Users,
-  Rocket,
-  NotebookPen,
-  FilePlus,
-  CalendarDays,
-  Pin,
-  Flag,
-  HeartHandshake,
-  TrendingUp,
-  Briefcase,
-  IdCard,
-  Lightbulb,
-  Bug,
-  CalendarCheck,
-  Target,
-  ScrollText,
-  Monitor,
-} from '@vben/icons'
-
-const ICON_MAP: Record<string, Component> = {
-  ClipboardList,
-  BarChart2,
-  Coins,
-  Users,
-  Rocket,
-  NotebookPen,
-  FilePlus,
-  CalendarDays,
-  Pin,
-  Flag,
-  HeartHandshake,
-  TrendingUp,
-  Briefcase,
-  IdCard,
-  Lightbulb,
-  Bug,
-  CalendarCheck,
-  Target,
-  ScrollText,
-  Monitor,
-}
-
-const props = defineProps<{
-  modelValue: boolean
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-  (e: 'select', template: TableTemplate): void
-}>()
-
-const visible = computed({
-  get: () => props.modelValue,
-  set: (v) => emit('update:modelValue', v),
-})
-
-const activeCategory = ref('all')
-const hoveredTemplate = ref<string | null>(null)
-
-const filteredTemplates = computed(() => {
-  if (activeCategory.value === 'all') return TABLE_TEMPLATES
-  return TABLE_TEMPLATES.filter((t) => t.category === activeCategory.value)
-})
-
-function handleSelect(template: TableTemplate) {
-  emit('select', template)
-  visible.value = false
-}
-</script>
-
-<template>
-  <ZqDialog
-    v-model="visible"
-    :title="$t('sidebar.newTableTitle')"
-    width="720px"
-    :show-footer="false"
-    :show-fullscreen-button="false"
-    :close-on-click-modal="true"
-    destroy-on-close
-  >
-    <div class="template-picker">
-      <!-- 左侧分类 -->
-      <div class="template-categories">
-        <div
-          v-for="cat in TEMPLATE_CATEGORIES"
-          :key="cat.id"
-          class="category-item"
-          :class="{ active: activeCategory === cat.id }"
-          @click="activeCategory = cat.id"
-        >
-          <component :is="ICON_MAP[cat.icon]" class="category-icon" />
-          <span class="category-label">{{ cat.label }}</span>
-        </div>
-      </div>
-
-      <!-- 右侧模板列表 -->
-      <div class="template-grid-wrapper">
-        <div class="template-grid">
-          <div
-            v-for="tpl in filteredTemplates"
-            :key="tpl.id"
-            class="template-card"
-            :class="{ hovered: hoveredTemplate === tpl.id }"
-            @mouseenter="hoveredTemplate = tpl.id"
-            @mouseleave="hoveredTemplate = null"
-            @click="handleSelect(tpl)"
-          >
-            <div class="card-icon">
-              <component :is="ICON_MAP[tpl.icon]" class="card-icon-svg" />
-            </div>
-            <div class="card-info">
-              <div class="card-name">{{ tpl.name }}</div>
-              <div class="card-desc">{{ tpl.description }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </ZqDialog>
-</template>
-
-<style scoped>
-.template-picker {
-  display: flex;
-  height: 420px;
-  margin: -8px -4px;
-  overflow: hidden;
-}
-
-.template-categories {
-  width: 160px;
-  flex-shrink: 0;
-  padding: 8px;
-  border-right: 1px solid var(--el-border-color-lighter);
-  overflow-y: auto;
-}
-
-.category-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--el-text-color-regular);
-  transition: all 0.2s;
-  margin-bottom: 2px;
-}
-
-.category-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.category-item.active {
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-  font-weight: 500;
-}
-
-.category-icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.category-label {
-  line-height: 1.2;
-}
-
-.template-grid-wrapper {
-  flex: 1;
-  overflow-y: auto;
-  padding: 8px 12px;
-}
-
-.template-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
-}
-
-.template-card {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px;
-  border-radius: 8px;
-  border: 1px solid var(--el-border-color-lighter);
-  cursor: pointer;
-  transition: all 0.2s;
-  background: var(--el-bg-color);
-}
-
-.template-card:hover,
-.template-card.hovered {
-  border-color: var(--el-color-primary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
-}
-
-.card-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--el-color-primary-light-9);
-  flex-shrink: 0;
-}
-
-.card-icon-svg {
-  width: 20px;
-  height: 20px;
-  color: var(--el-color-primary);
-}
-
-.card-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.card-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  line-height: 1.4;
-  margin-bottom: 4px;
-}
-
-.card-desc {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  line-height: 1.4;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/layout/ZqTableSidebar.vue b/web/apps/web-ele/src/components/zq-smart-table/layout/ZqTableSidebar.vue
deleted file mode 100644
index e97fb10..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/layout/ZqTableSidebar.vue
+++ /dev/null
@@ -1,975 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, nextTick, watch, onBeforeUnmount } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useWikiStore } from '#/store/wiki'
-import { SmartItemType, type Table } from '#/types/zq-smart-table/table'
-import { useI18n } from '@vben/locales'
-import { useRouter, useRoute } from 'vue-router'
-import { getFileUrl } from '#/composables/useFileUrl'
-import {
-  Grid,
-  FileText,
-  Search,
-  ChevronDown,
-  ChevronRight,
-  Plus,
-  Ellipsis,
-  Pencil,
-  Trash2,
-  ChevronsLeft,
-  FilePlus2,
-  BookOpen,
-} from '@vben/icons'
-import { ElMessageBox } from 'element-plus'
-import TemplateDialog from './TemplateDialog.vue'
-import TemplateSelectDialog from '../document/TemplateSelectDialog.vue'
-import type { TableTemplate } from '../templates/table-templates'
-import type { DocumentTemplate } from '../templates/document-templates'
-
-type TreeNode = Table & { children: TreeNode[] }
-interface FlatNode {
-  id: string
-  name: string
-  type: SmartItemType
-  depth: number
-  hasChildren: boolean
-  parentId: string | null | undefined
-}
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-const wikiStore = useWikiStore()
-const router = useRouter()
-const route = useRoute()
-
-const isWikiMode = computed(() => route.path.startsWith('/wiki/'))
-
-const wikiSpaceAvatarUrl = ref('')
-const currentWikiSpace = computed(() => {
-  if (!isWikiMode.value) return null
-  const spaceId = route.params.spaceId as string
-  return wikiStore.spaces.find((s) => s.id === spaceId) ?? null
-})
-
-watch(isWikiMode, async (val) => {
-  if (val && wikiStore.spaces.length === 0) {
-    await wikiStore.loadSpaces()
-  }
-}, { immediate: true })
-
-watch(() => currentWikiSpace.value?.avatar, async (avatarId) => {
-  wikiSpaceAvatarUrl.value = avatarId ? await getFileUrl(avatarId) : ''
-}, { immediate: true })
-
-const SIDEBAR_DEFAULT = 256
-const SIDEBAR_MIN = 200
-const SIDEBAR_MAX = 480
-
-const sidebarWidth = ref(SIDEBAR_DEFAULT)
-const isResizing = ref(false)
-const searchText = ref('')
-
-function onResizeStart(e: MouseEvent) {
-  e.preventDefault()
-  isResizing.value = true
-  const startX = e.clientX
-  const startW = sidebarWidth.value
-
-  function onMouseMove(ev: MouseEvent) {
-    const delta = ev.clientX - startX
-    sidebarWidth.value = Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, startW + delta))
-  }
-
-  function onMouseUp() {
-    isResizing.value = false
-    document.removeEventListener('mousemove', onMouseMove)
-    document.removeEventListener('mouseup', onMouseUp)
-    document.body.style.cursor = ''
-    document.body.style.userSelect = ''
-  }
-
-  document.body.style.cursor = 'col-resize'
-  document.body.style.userSelect = 'none'
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
-}
-
-function onResizeDblClick() {
-  sidebarWidth.value = SIDEBAR_DEFAULT
-}
-
-onBeforeUnmount(() => {
-  document.body.style.cursor = ''
-  document.body.style.userSelect = ''
-})
-
-const renamingId = ref<string | null>(null)
-const renameValue = ref('')
-const renameInputEl = ref<HTMLInputElement | null>(null)
-function setRenameRef(el: any) {
-  renameInputEl.value = el as HTMLInputElement
-}
-
-const showTemplateDialog = ref(false)
-
-const expandedIds = ref<Set<string>>(new Set())
-function toggleExpand(id: string) {
-  const s = new Set(expandedIds.value)
-  if (s.has(id)) {
-    s.delete(id)
-  } else {
-    s.add(id)
-  }
-  expandedIds.value = s
-}
-
-const routePrefix = computed(() => {
-  if (isWikiMode.value) {
-    const spaceId = route.params.spaceId as string
-    return `/wiki/${spaceId}`
-  }
-  return '/zq-smart-table'
-})
-const isTablePage = computed(() => route.path.startsWith('/zq-smart-table/') || isWikiMode.value)
-const activeRouteTableId = computed(() => route.params.tableId as string | undefined)
-
-function filterTree(nodes: TreeNode[], q: string): TreeNode[] {
-  if (!q) return nodes
-  const result: TreeNode[] = []
-  for (const node of nodes) {
-    const childMatch = filterTree(node.children, q)
-    if (node.name.toLowerCase().includes(q) || childMatch.length > 0) {
-      result.push({ ...node, children: childMatch })
-    }
-  }
-  return result
-}
-
-function flattenTree(nodes: TreeNode[], depth: number, expanded: Set<string>): FlatNode[] {
-  const result: FlatNode[] = []
-  for (const node of nodes) {
-    const hasChildren = node.children && node.children.length > 0
-    result.push({
-      id: node.id,
-      name: node.name,
-      type: node.type,
-      depth,
-      hasChildren,
-      parentId: node.parentId,
-    })
-    if (hasChildren && expanded.has(node.id)) {
-      result.push(...flattenTree(node.children, depth + 1, expanded))
-    }
-  }
-  return result
-}
-
-const flatList = computed(() => {
-  const q = searchText.value.trim().toLowerCase()
-  const tree = filterTree(tableStore.tableTree as TreeNode[], q)
-  if (q) {
-    // When searching, show all matching nodes expanded
-    return flattenTree(tree, 0, new Set(collectAllIds(tree)))
-  }
-  return flattenTree(tree, 0, expandedIds.value)
-})
-
-function collectAllIds(nodes: TreeNode[]): string[] {
-  const ids: string[] = []
-  for (const n of nodes) {
-    ids.push(n.id)
-    if (n.children) ids.push(...collectAllIds(n.children))
-  }
-  return ids
-}
-
-const hasSearchResults = computed(() => flatList.value.length > 0)
-
-watch(() => tableStore.tableTree, (tree) => {
-  if (expandedIds.value.size === 0 && tree.length > 0) {
-    const ids = new Set<string>()
-    function walk(nodes: TreeNode[]) {
-      for (const n of nodes) {
-        if (n.children && n.children.length > 0) {
-          ids.add(n.id)
-          walk(n.children as TreeNode[])
-        }
-      }
-    }
-    walk(tree as TreeNode[])
-    expandedIds.value = ids
-  }
-}, { immediate: true })
-
-// Drag state
-const dragId = ref<string | null>(null)
-const dropTargetId = ref<string | null>(null)
-const dropPosition = ref<'inside' | 'before' | 'after' | null>(null)
-
-function onDragStart(e: DragEvent, id: string) {
-  dragId.value = id
-  if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', id)
-  }
-}
-
-function onDragOver(e: DragEvent, id: string) {
-  e.preventDefault()
-  if (dragId.value === id) return
-
-  dropTargetId.value = id
-  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-  const y = e.clientY - rect.top
-  const h = rect.height
-
-  if (y < h * 0.25) {
-    dropPosition.value = 'before'
-  } else if (y > h * 0.75) {
-    dropPosition.value = 'after'
-  } else {
-    dropPosition.value = 'inside'
-  }
-}
-
-function onDragLeave() {
-  dropTargetId.value = null
-  dropPosition.value = null
-}
-
-function onDrop(e: DragEvent) {
-  e.preventDefault()
-  if (!dragId.value || !dropTargetId.value || dragId.value === dropTargetId.value) {
-    resetDrag()
-    return
-  }
-
-  const targetItem = tableStore.tables.find(t => t.id === dropTargetId.value)
-  if (!targetItem) { resetDrag(); return }
-
-  const draggedId = dragId.value
-
-  if (dropPosition.value === 'inside') {
-    const children = tableStore.tables.filter(
-      (t) => (t.parentId ?? null) === dropTargetId.value && t.id !== draggedId,
-    )
-    const lastChild = children.length > 0 ? children[children.length - 1] : null
-    tableStore.moveTable(draggedId, dropTargetId.value, lastChild?.id ?? null)
-    expandedIds.value = new Set([...expandedIds.value, dropTargetId.value])
-  } else {
-    const newParentId = targetItem.parentId ?? null
-    const siblings = tableStore.tables.filter(
-      (t) => (t.parentId ?? null) === newParentId && t.id !== draggedId,
-    )
-    const targetIdx = siblings.findIndex((s) => s.id === dropTargetId.value)
-
-    let afterId: string | null = null
-    if (dropPosition.value === 'before') {
-      afterId = targetIdx > 0 ? (siblings[targetIdx - 1]?.id ?? null) : null
-    } else {
-      afterId = dropTargetId.value
-    }
-    tableStore.moveTable(draggedId, newParentId, afterId)
-  }
-  resetDrag()
-}
-
-function resetDrag() {
-  dragId.value = null
-  dropTargetId.value = null
-  dropPosition.value = null
-}
-
-function getItemDropClass(nodeId: string) {
-  if (dropTargetId.value !== nodeId) return ''
-  if (dropPosition.value === 'inside') return 'drop-inside'
-  if (dropPosition.value === 'before') return 'drop-before'
-  if (dropPosition.value === 'after') return 'drop-after'
-  return ''
-}
-
-// Actions
-const showDocTemplateDialog = ref(false)
-
-async function handleAddDocument() {
-  const name = t('document.untitled')
-  const newId = await tableStore.addDocument(name)
-  if (newId) {
-    await tableStore.loadTableFull(newId)
-    router.push(`${routePrefix.value}/${newId}`)
-  }
-}
-
-async function handleSelectDocTemplate(template: DocumentTemplate) {
-  const name = template.name || t('document.untitled')
-  const newId = await tableStore.addDocumentFromTemplate(name, template.content)
-  if (newId) {
-    await tableStore.loadTableFull(newId)
-    router.push(`${routePrefix.value}/${newId}`)
-  }
-}
-
-async function handleBlankDocFromDialog() {
-  await handleAddDocument()
-}
-
-async function handleAddSubPage(parentId: string) {
-  const name = t('document.untitled')
-  const newId = await tableStore.addSubPage(parentId, name)
-  if (newId) {
-    expandedIds.value = new Set([...expandedIds.value, parentId])
-    await tableStore.loadTableFull(newId)
-    router.push(`${routePrefix.value}/${newId}`)
-  }
-}
-
-async function handleSelectTemplate(template: TableTemplate) {
-  const newId = await tableStore.addTableFromTemplate(template)
-  if (newId) {
-    tableStore.creatingFromTemplate = true
-    try {
-      await tableStore.loadTableFull(newId)
-    } finally {
-      tableStore.creatingFromTemplate = false
-    }
-    router.push(`${routePrefix.value}/${newId}`)
-  }
-}
-
-function handleSelectTable(tableId: string) {
-  if (renamingId.value === tableId) return
-  tableStore.activeTableId = tableId
-  router.push(`${routePrefix.value}/${tableId}`)
-}
-
-function startRename(tableId: string, currentName: string) {
-  renamingId.value = tableId
-  renameValue.value = currentName
-  nextTick(() => {
-    renameInputEl.value?.focus()
-    renameInputEl.value?.select()
-  })
-}
-
-async function confirmRename(tableId: string) {
-  if (renameValue.value.trim()) {
-    const table = tableStore.tables.find((item) => item.id === tableId)
-    if (table) {
-      table.name = renameValue.value.trim()
-      const { updateTableApi } = await import('#/api/smart-table')
-      updateTableApi(tableId, { name: table.name }).catch(() => {})
-    }
-  }
-  renamingId.value = null
-}
-
-function handleDeleteTable(tableId: string, tableName: string) {
-  ElMessageBox.confirm(
-    t('sidebar.deleteTableConfirm', { name: tableName }),
-    t('sidebar.deleteTable'),
-    {
-      confirmButtonText: t('common.confirm'),
-      cancelButtonText: t('common.cancel'),
-      type: 'warning',
-    },
-  )
-    .then(async () => {
-      await tableStore.deleteTable(tableId)
-      if (tableStore.tables.length > 0) {
-        const firstId = tableStore.tables[0]!.id
-        router.push(`${routePrefix.value}/${firstId}`)
-      }
-    })
-    .catch(() => {})
-}
-
-function handleContextCommand(command: string, tableId: string, tableName: string) {
-  if (command === 'rename') {
-    startRename(tableId, tableName)
-  } else if (command === 'delete') {
-    handleDeleteTable(tableId, tableName)
-  } else if (command === 'addSubPage') {
-    handleAddSubPage(tableId)
-  }
-}
-
-function getNodeIcon(type: SmartItemType) {
-  return type === SmartItemType.Document ? FileText : Grid
-}
-</script>
-
-<template>
-  <div
-    class="zq-sidebar"
-    :class="{ 'is-resizing': isResizing }"
-    :style="{ width: `${sidebarWidth}px` }"
-  >
-    <div class="zq-sidebar__inner" :style="{ width: `${sidebarWidth}px` }">
-      <!-- Wiki back button -->
-      <div v-if="isWikiMode" class="zq-sidebar__wiki-back">
-        <button class="zq-sidebar__back-btn" @click="router.push('/wiki')">
-          <ChevronsLeft class="w-4 h-4" />
-          <span>{{ t('wiki.backToList') }}</span>
-        </button>
-      </div>
-
-      <!-- Header -->
-      <div class="zq-sidebar__header">
-        <div class="zq-sidebar__brand">
-          <template v-if="isWikiMode && currentWikiSpace">
-            <img
-              v-if="wikiSpaceAvatarUrl"
-              :src="wikiSpaceAvatarUrl"
-              :alt="currentWikiSpace.name"
-              class="zq-sidebar__wiki-avatar"
-            />
-            <div v-else class="zq-sidebar__wiki-avatar-fallback">
-              <BookOpen class="w-4 h-4" />
-            </div>
-            <span class="zq-sidebar__brand-title">{{ currentWikiSpace.name }}</span>
-          </template>
-          <template v-else>
-            <div class="zq-sidebar__logo">ZQ</div>
-            <span class="zq-sidebar__brand-title">{{ t('app.title') }}</span>
-          </template>
-        </div>
-      </div>
-
-      <!-- Search -->
-      <div class="zq-sidebar__search">
-        <Search class="zq-sidebar__search-icon" />
-        <input
-          v-model="searchText"
-          class="zq-sidebar__search-input"
-          :placeholder="t('sidebar.searchPlaceholder')"
-        />
-      </div>
-
-      <!-- Tree content (flat rendering) -->
-      <div class="zq-sidebar__content">
-        <template v-if="flatList.length > 0">
-          <div
-            v-for="node in flatList"
-            :key="node.id"
-            class="zq-sidebar__item"
-            :style="{ '--depth': node.depth }"
-            :class="[
-              {
-                'is-active': activeRouteTableId === node.id && isTablePage,
-                'is-dragging': dragId === node.id,
-              },
-              getItemDropClass(node.id),
-            ]"
-            draggable="true"
-            @dragstart="onDragStart($event, node.id)"
-            @dragover="onDragOver($event, node.id)"
-            @dragleave="onDragLeave"
-            @drop="onDrop($event)"
-            @dragend="resetDrag"
-            @click="handleSelectTable(node.id)"
-          >
-            <!-- <div class="zq-sidebar__drag-handle">
-              <GripVertical class="w-3 h-3" />
-            </div> -->
-
-            <button
-              v-if="node.hasChildren"
-              class="zq-sidebar__expand-toggle"
-              @click.stop="toggleExpand(node.id)"
-            >
-              <component
-                :is="expandedIds.has(node.id) ? ChevronDown : ChevronRight"
-                class="w-3.5 h-3.5"
-              />
-            </button>
-            <span v-else class="zq-sidebar__expand-spacer" />
-
-            <component :is="getNodeIcon(node.type)" class="zq-sidebar__item-icon" />
-
-            <input
-              v-if="renamingId === node.id"
-              :ref="setRenameRef"
-              v-model="renameValue"
-              class="zq-sidebar__rename-input"
-              @blur="confirmRename(node.id)"
-              @keyup.enter="confirmRename(node.id)"
-              @keyup.escape="renamingId = null"
-              @click.stop
-            />
-            <span v-else class="zq-sidebar__item-name">{{ node.name }}</span>
-
-            <el-dropdown
-              v-if="renamingId !== node.id"
-              trigger="click"
-              class="zq-sidebar__item-actions"
-              @command="(cmd: string) => handleContextCommand(cmd, node.id, node.name)"
-            >
-              <button class="zq-sidebar__more-btn" @click.stop>
-                <Ellipsis class="w-3.5 h-3.5" />
-              </button>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item command="addSubPage">
-                    <div class="flex items-center gap-2">
-                      <FilePlus2 class="w-3.5 h-3.5" />
-                      <span>{{ t('sidebar.newSubPage') }}</span>
-                    </div>
-                  </el-dropdown-item>
-                  <el-dropdown-item command="rename">
-                    <div class="flex items-center gap-2">
-                      <Pencil class="w-3.5 h-3.5" />
-                      <span>{{ t('common.rename') }}</span>
-                    </div>
-                  </el-dropdown-item>
-                  <el-dropdown-item command="delete" divided>
-                    <div class="flex items-center gap-2" style="color: var(--zq-danger-color)">
-                      <Trash2 class="w-3.5 h-3.5" />
-                      <span>{{ t('common.delete') }}</span>
-                    </div>
-                  </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </div>
-        </template>
-
-        <!-- No results -->
-        <div v-if="searchText && !hasSearchResults" class="zq-sidebar__no-results">
-          <Search class="w-8 h-8" style="color: var(--zq-text-placeholder)" />
-          <span>{{ t('sidebar.noResults') }}</span>
-        </div>
-
-        <!-- Empty state -->
-        <div v-if="!searchText && flatList.length === 0" class="zq-sidebar__empty">
-          {{ t('sidebar.emptyTables') }}
-        </div>
-      </div>
-
-      <!-- Bottom actions -->
-      <div class="zq-sidebar__footer">
-        <button class="zq-sidebar__footer-btn" @click="showTemplateDialog = true">
-          <Plus class="w-4 h-4" />
-          <span>{{ t('sidebar.newTable') }}</span>
-        </button>
-        <button class="zq-sidebar__footer-btn" @click="showDocTemplateDialog = true">
-          <Plus class="w-4 h-4" />
-          <span>{{ t('sidebar.newDocument') }}</span>
-        </button>
-        <button v-if="!isWikiMode" class="zq-sidebar__footer-btn" @click="router.push('/wiki')">
-          <BookOpen class="w-4 h-4" />
-          <span>{{ t('wiki.title') }}</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- Resize handle -->
-    <div
-      class="zq-sidebar__resize-handle"
-      @mousedown="onResizeStart"
-      @dblclick="onResizeDblClick"
-    />
-
-    <TemplateDialog v-model="showTemplateDialog" @select="handleSelectTemplate" />
-    <TemplateSelectDialog
-      v-model="showDocTemplateDialog"
-      @select="handleSelectDocTemplate"
-      @blank="handleBlankDocFromDialog"
-    />
-  </div>
-</template>
-
-<style scoped>
-.zq-sidebar {
-  position: relative;
-  flex-shrink: 0;
-  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  overflow: visible;
-  z-index: 20;
-}
-
-.zq-sidebar.is-resizing {
-  transition: none;
-}
-
-.zq-sidebar__inner {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background: var(--zq-bg-sidebar);
-  border-right: 1px solid var(--zq-border-color-light);
-}
-
-/* Resize handle */
-.zq-sidebar__resize-handle {
-  position: absolute;
-  top: 0;
-  right: -3px;
-  width: 3px;
-  height: 100%;
-  cursor: col-resize;
-  z-index: 30;
-  transition: background-color 0.15s;
-}
-
-.zq-sidebar__resize-handle:hover,
-.zq-sidebar.is-resizing .zq-sidebar__resize-handle {
-  background-color: var(--zq-brand-color);
-}
-
-/* Wiki back */
-.zq-sidebar__wiki-back {
-  flex-shrink: 0;
-  padding: 8px 8px 0;
-}
-
-.zq-sidebar__back-btn {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  padding: 6px 10px;
-  border-radius: 6px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-secondary);
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.zq-sidebar__back-btn:hover {
-  background: var(--zq-bg-cell-hover);
-  color: var(--zq-brand-color);
-}
-
-/* Wiki avatar */
-.zq-sidebar__wiki-avatar {
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.zq-sidebar__wiki-avatar-fallback {
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--zq-brand-color-light);
-  color: var(--zq-brand-color);
-  flex-shrink: 0;
-}
-
-/* Header */
-.zq-sidebar__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 12px 8px;
-  flex-shrink: 0;
-}
-
-.zq-sidebar__brand {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.zq-sidebar__logo {
-  width: 30px;
-  height: 30px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-weight: 700;
-  font-size: 12px;
-  background: var(--zq-brand-color);
-  flex-shrink: 0;
-}
-
-.zq-sidebar__brand-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--zq-text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* Search */
-.zq-sidebar__search {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 4px 12px 8px;
-  padding: 7px 10px;
-  border-radius: 8px;
-  background: var(--zq-bg-primary);
-  border: 1px solid transparent;
-  transition: all 0.15s;
-}
-
-.zq-sidebar__search:focus-within {
-  border-color: var(--zq-brand-color);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--zq-brand-color) 15%, transparent);
-}
-
-.zq-sidebar__search-icon {
-  width: 14px;
-  height: 14px;
-  color: var(--zq-text-placeholder);
-  flex-shrink: 0;
-}
-
-.zq-sidebar__search-input {
-  flex: 1;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: 13px;
-  color: var(--zq-text-primary);
-  line-height: 1;
-}
-
-.zq-sidebar__search-input::placeholder {
-  color: var(--zq-text-placeholder);
-}
-
-/* Scrollable content */
-.zq-sidebar__content {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 4px 0 16px;
-}
-
-.zq-sidebar__content::-webkit-scrollbar {
-  width: 4px;
-}
-
-.zq-sidebar__content::-webkit-scrollbar-thumb {
-  background: var(--zq-border-color);
-  border-radius: 4px;
-}
-
-.zq-sidebar__content::-webkit-scrollbar-thumb:hover {
-  background: var(--zq-text-placeholder);
-}
-
-/* Tree items */
-.zq-sidebar__item {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 5px 8px 5px calc(8px + var(--depth, 0) * 16px);
-  margin: 1px 8px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--zq-text-primary);
-  transition: background-color 0.15s, color 0.15s;
-  position: relative;
-  user-select: none;
-}
-
-.zq-sidebar__item:hover {
-  background: var(--zq-bg-cell-hover);
-}
-
-.zq-sidebar__item.is-active {
-  background: var(--zq-brand-color-light);
-  color: var(--zq-brand-color);
-}
-
-.zq-sidebar__item.is-active::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 6px;
-  bottom: 6px;
-  width: 3px;
-  border-radius: 0 2px 2px 0;
-  background: var(--zq-brand-color);
-}
-
-.zq-sidebar__item.is-dragging {
-  opacity: 0.4;
-}
-
-.zq-sidebar__item.drop-inside {
-  background: color-mix(in srgb, var(--zq-brand-color) 12%, transparent);
-  outline: 2px solid var(--zq-brand-color);
-  outline-offset: -2px;
-  border-radius: 6px;
-}
-
-.zq-sidebar__item.drop-before {
-  box-shadow: inset 0 2px 0 0 var(--zq-brand-color);
-}
-
-.zq-sidebar__item.drop-after {
-  box-shadow: inset 0 -2px 0 0 var(--zq-brand-color);
-}
-
-.zq-sidebar__drag-handle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
-  color: var(--zq-text-placeholder);
-  opacity: 0;
-  cursor: grab;
-  transition: opacity 0.1s;
-}
-
-.zq-sidebar__item:hover .zq-sidebar__drag-handle {
-  opacity: 1;
-}
-
-.zq-sidebar__expand-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 4px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-placeholder);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: all 0.15s;
-}
-
-.zq-sidebar__expand-toggle:hover {
-  background: var(--zq-bg-cell-hover);
-  color: var(--zq-text-secondary);
-}
-
-.zq-sidebar__expand-spacer {
-  width: 18px;
-  flex-shrink: 0;
-}
-
-.zq-sidebar__item-icon {
-  width: 15px;
-  height: 15px;
-  flex-shrink: 0;
-  opacity: 0.7;
-}
-
-.zq-sidebar__item.is-active .zq-sidebar__item-icon {
-  opacity: 1;
-}
-
-.zq-sidebar__item-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.4;
-}
-
-.zq-sidebar__rename-input {
-  flex: 1;
-  min-width: 0;
-  font-size: 13px;
-  line-height: 1.4;
-  padding: 1px 6px;
-  border-radius: 4px;
-  border: 1px solid var(--zq-brand-color);
-  outline: none;
-  background: var(--zq-bg-primary);
-  color: var(--zq-text-primary);
-}
-
-.zq-sidebar__item-actions {
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.zq-sidebar__more-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-placeholder);
-  cursor: pointer;
-  opacity: 0;
-  transition: all 0.15s;
-  flex-shrink: 0;
-}
-
-.zq-sidebar__item:hover .zq-sidebar__more-btn {
-  opacity: 1;
-}
-
-.zq-sidebar__more-btn:hover {
-  background: var(--zq-bg-secondary);
-  color: var(--zq-text-secondary);
-}
-
-/* Empty & No Results */
-.zq-sidebar__empty {
-  padding: 24px 16px;
-  font-size: 13px;
-  color: var(--zq-text-placeholder);
-  text-align: center;
-}
-
-.zq-sidebar__no-results {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 32px 16px;
-  font-size: 13px;
-  color: var(--zq-text-placeholder);
-}
-
-/* Footer */
-.zq-sidebar__footer {
-  flex-shrink: 0;
-  border-top: 1px solid var(--zq-border-color-light);
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.zq-sidebar__footer-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 7px 12px;
-  border-radius: 6px;
-  border: none;
-  background: transparent;
-  color: var(--zq-text-secondary);
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.zq-sidebar__footer-btn:hover {
-  background: var(--zq-bg-cell-hover);
-  color: var(--zq-text-primary);
-}
-
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/permission/PermissionDialog.vue b/web/apps/web-ele/src/components/zq-smart-table/permission/PermissionDialog.vue
deleted file mode 100644
index c075719..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/permission/PermissionDialog.vue
+++ /dev/null
@@ -1,680 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import {
-  getRolesApi, getCollaboratorsApi, addCollaboratorApi,
-  updateCollaboratorApi, removeCollaboratorApi,
-  getFieldPermissionsApi, updateFieldPermissionsApi,
-  getRowRulesApi, updateRowRuleApi,
-  type TableRole, type Collaborator, type FieldPermMatrix,
-  type RowRule,
-} from '#/api/smart-table'
-import ZqDialog from '#/components/zq-dialog/zq-dialog.vue'
-import { ElMessage, ElMessageBox, ElSelect, ElOption, ElTag, ElEmpty } from 'element-plus'
-import { Plus, Trash2, Shield, Columns3, Rows3, Users } from '@vben/icons'
-import UserSelector from '#/components/zq-form/user-selector/user-selector.vue'
-import { $t } from '@vben/locales';
-import { SmartItemType } from '#/types/zq-smart-table/table'
-const props = defineProps<{ modelValue: boolean }>()
-const emit = defineEmits<{
-  'update:modelValue': [val: boolean]
-}>()
-
-const tableStore = useTableStore()
-const activeTab = ref<'collaborators' | 'field-perm' | 'row-rule'>('collaborators')
-
-const roles = ref<TableRole[]>([])
-const collaborators = ref<Collaborator[]>([])
-const fieldPermMatrix = ref<FieldPermMatrix[]>([])
-const rowRules = ref<RowRule[]>([])
-const loadingData = ref(false)
-
-const tableId = computed(() => tableStore.activeTableId)
-
-const isDocument = computed(() => tableStore.activeTable?.type === SmartItemType.Document)
-
-const permTabs = computed(() => {
-  const all = [
-    { key: 'collaborators' as const, label: $t('permission.tabCollaborators'), icon: Users },
-    { key: 'field-perm' as const, label: $t('permission.tabFieldPerm'), icon: Columns3 },
-    { key: 'row-rule' as const, label: $t('permission.tabRowPerm'), icon: Rows3 },
-  ]
-  return isDocument.value ? [all[0]] : all
-})
-
-const editableRoles = computed(() =>
-  roles.value.filter(r => r.role_type !== 'owner')
-)
-
-const addUserIds = ref<string[]>([])
-const addRoleId = ref('')
-
-async function loadData() {
-  if (!tableId.value) return
-  loadingData.value = true
-  try {
-    const [rolesRaw, collabsRaw] = await Promise.all([
-      getRolesApi(tableId.value),
-      getCollaboratorsApi(tableId.value),
-    ])
-    roles.value = ((rolesRaw as any)?.data ?? rolesRaw) || []
-    collaborators.value = ((collabsRaw as any)?.data ?? collabsRaw) || []
-
-    if (!addRoleId.value && editableRoles.value.length > 0) {
-      const editorRole = roles.value.find(r => r.role_type === 'editor')
-      addRoleId.value = editorRole?.id || editableRoles.value[0]!.id
-    }
-  } catch (e) {
-    console.error('[Permission] Failed to load data', e)
-  } finally {
-    loadingData.value = false
-  }
-}
-
-async function loadFieldPerms() {
-  if (!tableId.value) return
-  try {
-    const raw = await getFieldPermissionsApi(tableId.value)
-    const matrix: FieldPermMatrix[] = ((raw as any)?.data ?? raw) || []
-
-    const allFields = tableStore.activeTable?.fields || []
-    for (const m of matrix) {
-      if (m.fields.length === 0 && allFields.length > 0) {
-        m.fields = allFields.map(f => ({
-          field_id: f.id,
-          access: m.role_type === 'viewer' ? 'read' : 'write',
-        }))
-      }
-    }
-
-    fieldPermMatrix.value = matrix
-  } catch (e) {
-    console.error('[Permission] Failed to load field permissions', e)
-  }
-}
-
-async function loadRowRules() {
-  if (!tableId.value) return
-  try {
-    const raw = await getRowRulesApi(tableId.value)
-    rowRules.value = ((raw as any)?.data ?? raw) || []
-  } catch (e) {
-    console.error('[Permission] Failed to load row rules', e)
-  }
-}
-
-watch(() => props.modelValue, (val) => {
-  if (val) {
-    if (isDocument.value) {
-      activeTab.value = 'collaborators'
-    }
-    loadData()
-  }
-})
-
-watch(
-  () => tableStore.activeTableId,
-  () => {
-    if (props.modelValue && isDocument.value) {
-      activeTab.value = 'collaborators'
-    }
-  },
-)
-
-watch(activeTab, (tab) => {
-  if (tab === 'field-perm') loadFieldPerms()
-  else if (tab === 'row-rule') loadRowRules()
-})
-
-async function handleAddCollaborator() {
-  if (!tableId.value || addUserIds.value.length === 0 || !addRoleId.value) return
-  try {
-    for (const uid of addUserIds.value) {
-      await addCollaboratorApi(tableId.value, {
-        subject_type: 'user',
-        subject_id: uid,
-        role_id: addRoleId.value,
-      })
-    }
-    addUserIds.value = []
-    ElMessage.success($t('permission.addSuccess'))
-    await loadData()
-  } catch (e: any) {
-    ElMessage.error(e?.message || $t('permission.addFailed'))
-  }
-}
-
-async function handleChangeRole(collab: Collaborator, newRoleId: string) {
-  if (!tableId.value) return
-  try {
-    await updateCollaboratorApi(tableId.value, collab.id, { role_id: newRoleId })
-    collab.role_id = newRoleId
-    const role = roles.value.find(r => r.id === newRoleId)
-    if (role) {
-      collab.role_name = role.name
-      collab.role_type = role.role_type
-    }
-  } catch (e: any) {
-    ElMessage.error(e?.message || $t('permission.updateFailed'))
-  }
-}
-
-async function handleRemoveCollaborator(collab: Collaborator) {
-  if (!tableId.value) return
-  try {
-    await ElMessageBox.confirm($t('permission.removeConfirm', { name: collab.subject_name || collab.subject_id }), $t('permission.removeCollaborator'))
-    await removeCollaboratorApi(tableId.value, collab.id)
-    ElMessage.success($t('permission.removed'))
-    await loadData()
-  } catch {}
-}
-
-function getRoleColor(roleType?: string) {
-  switch (roleType) {
-    case 'owner': return '#e6a23c'
-    case 'manager': return '#409eff'
-    case 'editor': return '#67c23a'
-    case 'viewer': return '#909399'
-    default: return '#606266'
-  }
-}
-
-function getRoleLabel(roleType?: string) {
-  switch (roleType) {
-    case 'owner': return $t('permission.roleOwner')
-    case 'manager': return $t('permission.roleManager')
-    case 'editor': return $t('permission.roleEditor')
-    case 'viewer': return $t('permission.roleViewer')
-    default: return $t('permission.roleCustom')
-  }
-}
-
-function getFieldName(fieldId: string) {
-  const field = tableStore.activeTable?.fields.find(f => f.id === fieldId)
-  return field?.name || fieldId
-}
-
-function getAccessLabel(access: string) {
-  switch (access) {
-    case 'write': return $t('permission.accessWrite')
-    case 'read': return $t('permission.accessRead')
-    case 'hidden': return $t('permission.accessHidden')
-    default: return access
-  }
-}
-
-function getAccessColor(access: string) {
-  switch (access) {
-    case 'write': return '#67c23a'
-    case 'read': return '#409eff'
-    case 'hidden': return '#f56c6c'
-    default: return '#909399'
-  }
-}
-
-function cycleAccess(matrix: FieldPermMatrix, fieldIndex: number) {
-  const field = matrix.fields[fieldIndex]
-  if (!field) return
-  const cycle = ['write', 'read', 'hidden']
-  const idx = cycle.indexOf(field.access)
-  field.access = cycle[(idx + 1) % cycle.length]!
-}
-
-async function saveFieldPerms(matrix: FieldPermMatrix) {
-  if (!tableId.value) return
-  try {
-    await updateFieldPermissionsApi(tableId.value, {
-      role_id: matrix.role_id,
-      permissions: matrix.fields,
-    })
-    ElMessage.success($t('permission.fieldPermSaved'))
-  } catch (e: any) {
-    ElMessage.error(e?.message || $t('permission.saveFailed'))
-  }
-}
-
-function getRowRuleForRole(roleId: string, ruleType: string) {
-  return rowRules.value.find(r => r.role_id === roleId && r.rule_type === ruleType)
-}
-
-async function handleRowRuleModeChange(roleId: string, ruleType: string, mode: string) {
-  if (!tableId.value) return
-  try {
-    await updateRowRuleApi(tableId.value, {
-      role_id: roleId,
-      rule_type: ruleType,
-      mode,
-      conditions: [],
-    })
-    ElMessage.success($t('permission.rowPermUpdated'))
-    await loadRowRules()
-  } catch (e: any) {
-    ElMessage.error(e?.message || $t('permission.updateFailed'))
-  }
-}
-</script>
-
-<template>
-  <ZqDialog
-    :model-value="props.modelValue"
-    @update:model-value="emit('update:modelValue', $event)"
-    :title="$t('permission.title')"
-    width="720px"
-    :show-footer="false"
-    content-height="520px"
-  >
-    <!-- Tabs -->
-    <div class="perm-tabs">
-      <div
-        v-for="tab in permTabs"
-        :key="tab.key"
-        class="perm-tab"
-        :class="{ active: activeTab === tab.key }"
-        @click="activeTab = tab.key"
-      >
-        <component :is="tab.icon" class="tab-icon" />
-        <span>{{ tab.label }}</span>
-      </div>
-    </div>
-
-    <!-- Collaborators Panel -->
-    <div v-if="activeTab === 'collaborators'" class="perm-panel">
-      <div v-if="isDocument" class="perm-hint" style="margin-bottom: 12px;">
-        <Shield class="hint-icon" />
-        <span>{{ $t('permission.documentScopeHint') }}</span>
-      </div>
-      <!-- Add collaborator -->
-      <div class="add-collab-row">
-        <UserSelector
-          v-model="addUserIds"
-          :multiple="true"
-          :placeholder="$t('permission.searchUser')"
-          style="flex: 1;"
-        />
-        <ElSelect v-model="addRoleId" style="width: 120px; margin-left: 8px;" size="default">
-          <ElOption
-            v-for="role in editableRoles"
-            :key="role.id"
-            :label="role.name"
-            :value="role.id"
-          />
-        </ElSelect>
-        <button class="add-btn" @click="handleAddCollaborator" :disabled="addUserIds.length === 0">
-          <Plus class="add-btn-icon" />
-          {{ $t('permission.invite') }}
-        </button>
-      </div>
-
-      <!-- Collaborator list -->
-      <div class="collab-list">
-        <div v-for="collab in collaborators" :key="collab.id" class="collab-item">
-          <div class="collab-avatar">
-            {{ (collab.subject_name || '?').charAt(0) }}
-          </div>
-          <div class="collab-info">
-            <div class="collab-name">{{ collab.subject_name || collab.subject_id }}</div>
-            <div class="collab-type">{{ collab.subject_type === 'user' ? $t('permission.subjectUser') : collab.subject_type === 'dept' ? $t('permission.subjectDept') : $t('permission.subjectRole') }}</div>
-          </div>
-          <div class="collab-actions">
-            <ElSelect
-              :model-value="collab.role_id"
-              @update:model-value="(val: string) => handleChangeRole(collab, val)"
-              size="small"
-              style="width: 100px;"
-              :disabled="collab.role_type === 'owner'"
-            >
-              <ElOption
-                v-for="role in roles"
-                :key="role.id"
-                :label="role.name"
-                :value="role.id"
-              />
-            </ElSelect>
-            <button
-              v-if="collab.role_type !== 'owner'"
-              class="remove-btn"
-              @click="handleRemoveCollaborator(collab)"
-            >
-              <Trash2 class="remove-icon" />
-            </button>
-          </div>
-        </div>
-        <ElEmpty v-if="collaborators.length === 0" :description="$t('permission.noCollaborators')" :image-size="60" />
-      </div>
-    </div>
-
-    <!-- Field Permission Panel -->
-    <div v-if="activeTab === 'field-perm'" class="perm-panel">
-      <div class="perm-hint" style="margin-bottom: 12px;">
-        <Shield class="hint-icon" />
-        <span>{{ $t('permission.fieldPermTip') }}</span>
-      </div>
-
-      <div v-for="matrix in fieldPermMatrix.filter(m => m.role_type !== 'owner')" :key="matrix.role_id" class="field-perm-section">
-        <div class="field-perm-header">
-          <ElTag :color="getRoleColor(matrix.role_type)" effect="dark" size="small" style="border: none;">
-            {{ matrix.role_name }}
-          </ElTag>
-          <button class="save-btn" @click="saveFieldPerms(matrix)">{{ $t('common.save') }}</button>
-        </div>
-        <div class="field-perm-grid">
-          <div
-            v-for="(fp, idx) in matrix.fields"
-            :key="fp.field_id"
-            class="field-perm-cell"
-            @click="cycleAccess(matrix, idx)"
-          >
-            <span class="fp-field-name">{{ getFieldName(fp.field_id) }}</span>
-            <span class="fp-access" :style="{ color: getAccessColor(fp.access) }">
-              {{ getAccessLabel(fp.access) }}
-            </span>
-          </div>
-        </div>
-        <div v-if="matrix.fields.length === 0" class="field-perm-empty">
-          {{ $t('permission.noFieldPerm') }}
-        </div>
-      </div>
-
-    </div>
-
-    <!-- Row Rule Panel -->
-    <div v-if="activeTab === 'row-rule'" class="perm-panel">
-      <div class="perm-hint" style="margin-bottom: 12px;">
-        <Shield class="hint-icon" />
-        <span>{{ $t('permission.rowPermTip') }}</span>
-      </div>
-
-      <div
-        v-for="role in roles.filter(r => r.role_type !== 'owner' && r.role_type !== 'manager')"
-        :key="role.id"
-        class="row-rule-section"
-      >
-        <div class="row-rule-header">
-          <ElTag :color="getRoleColor(role.role_type)" effect="dark" size="small" style="border: none;">
-            {{ role.name }}
-          </ElTag>
-        </div>
-
-        <div class="row-rule-row">
-          <span class="rule-label">{{ $t('permission.viewRecords') }}</span>
-          <ElSelect
-            :model-value="getRowRuleForRole(role.id, 'view')?.mode || 'all'"
-            @update:model-value="(val: string) => handleRowRuleModeChange(role.id, 'view', val)"
-            size="small"
-            style="width: 160px;"
-          >
-            <ElOption :label="$t('permission.allRecords')" value="all" />
-            <ElOption :label="$t('permission.creatorOnly')" value="creator_only" />
-          </ElSelect>
-        </div>
-
-        <div class="row-rule-row">
-          <span class="rule-label">{{ $t('permission.editRecords') }}</span>
-          <ElSelect
-            :model-value="getRowRuleForRole(role.id, 'edit')?.mode || 'all'"
-            @update:model-value="(val: string) => handleRowRuleModeChange(role.id, 'edit', val)"
-            size="small"
-            style="width: 160px;"
-          >
-            <ElOption :label="$t('permission.allRecords')" value="all" />
-            <ElOption :label="$t('permission.creatorOnly')" value="creator_only" />
-          </ElSelect>
-        </div>
-      </div>
-    </div>
-  </ZqDialog>
-</template>
-
-<style scoped>
-.perm-tabs {
-  display: flex;
-  gap: 4px;
-  padding: 0 0 12px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-  margin-bottom: 16px;
-}
-
-.perm-tab {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 16px;
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.perm-tab:hover {
-  background: var(--el-fill-color-light);
-  color: var(--el-text-color-primary);
-}
-
-.perm-tab.active {
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-  font-weight: 500;
-}
-
-.tab-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.perm-panel {
-  min-height: 300px;
-}
-
-.add-collab-row {
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.add-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  margin-left: 8px;
-  padding: 8px 16px;
-  font-size: 13px;
-  color: #fff;
-  background: var(--el-color-primary);
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: opacity 0.15s;
-  white-space: nowrap;
-}
-
-.add-btn:hover { opacity: 0.85; }
-.add-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-
-.add-btn-icon { width: 14px; height: 14px; }
-
-.collab-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.collab-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 12px;
-  border-radius: 8px;
-  transition: background 0.15s;
-}
-
-.collab-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.collab-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #8b9dff 0%, #a78bfa 100%);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 600;
-  flex-shrink: 0;
-}
-
-.collab-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.collab-name {
-  font-size: 14px;
-  color: var(--el-text-color-primary);
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.collab-type {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  margin-top: 2px;
-}
-
-.collab-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
-.remove-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--el-text-color-secondary);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.remove-btn:hover {
-  background: var(--el-color-danger-light-9);
-  color: var(--el-color-danger);
-}
-
-.remove-icon { width: 14px; height: 14px; }
-
-.perm-hint {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 14px;
-  background: var(--el-color-info-light-9);
-  border-radius: 8px;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.hint-icon { width: 16px; height: 16px; flex-shrink: 0; }
-
-.field-perm-section {
-  margin-bottom: 16px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  padding: 12px;
-}
-
-.field-perm-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.save-btn {
-  padding: 4px 12px;
-  font-size: 12px;
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: opacity 0.15s;
-}
-
-.save-btn:hover { opacity: 0.8; }
-
-.field-perm-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.field-perm-cell {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 10px;
-  background: var(--el-fill-color-lighter);
-  border-radius: 6px;
-  font-size: 12px;
-  cursor: pointer;
-  transition: background 0.15s;
-  user-select: none;
-}
-
-.field-perm-cell:hover {
-  background: var(--el-fill-color);
-}
-
-.fp-field-name {
-  color: var(--el-text-color-primary);
-}
-
-.fp-access {
-  font-weight: 500;
-  font-size: 11px;
-}
-
-.field-perm-empty {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  text-align: center;
-  padding: 12px;
-}
-
-.row-rule-section {
-  margin-bottom: 16px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  padding: 12px;
-}
-
-.row-rule-header {
-  margin-bottom: 10px;
-}
-
-.row-rule-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 8px;
-}
-
-.rule-label {
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-  width: 100px;
-  flex-shrink: 0;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/AddFieldDialog.vue b/web/apps/web-ele/src/components/zq-smart-table/table/AddFieldDialog.vue
deleted file mode 100644
index 45293b9..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/AddFieldDialog.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script setup lang="ts">
-import { reactive, computed, ref, watch } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FieldType, FIELD_TYPE_LABELS, SELECT_COLORS, type FieldConfig, type SelectOption, type RollupAggregation } from '#/types/zq-smart-table/field'
-import { Plus, Delete } from '@element-plus/icons-vue'
-import { getFieldListApi } from '#/api/smart-table'
-
-const props = defineProps<{ visible: boolean }>()
-const emit = defineEmits<{ 'update:visible': [val: boolean]; added: [] }>()
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-function uid(): string {
-  return Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
-}
-
-const form = reactive({
-  name: '',
-  type: FieldType.Text as FieldType,
-  options: [] as SelectOption[],
-  linkedTableId: '' as string,
-  linkFieldId: '' as string,
-  lookupFieldId: '' as string,
-  rollupFieldId: '' as string,
-  aggregation: 'COUNT' as RollupAggregation,
-})
-
-const allTables = computed(() =>
-  tableStore.tables.map((t) => ({ id: t.id, name: t.name })),
-)
-
-const currentTableLinkFields = computed(() => {
-  const table = tableStore.activeTable
-  if (!table) return []
-  return table.fields.filter((f) => f.type === FieldType.Link)
-})
-
-const selectedLinkField = computed(() =>
-  currentTableLinkFields.value.find((f) => f.id === form.linkFieldId),
-)
-
-const linkedTableFields = ref<{ id: string; name: string; type: string }[]>([])
-
-watch(
-  () => selectedLinkField.value?.linkedTableId,
-  async (ltId) => {
-    if (!ltId) {
-      linkedTableFields.value = []
-      return
-    }
-    try {
-      const fields = await getFieldListApi(ltId)
-      linkedTableFields.value = fields
-        .filter((f: any) => f.type !== 'link' && f.type !== 'lookup' && f.type !== 'rollup')
-        .map((f: any) => ({ id: f.id, name: f.name, type: f.type }))
-    } catch {
-      linkedTableFields.value = []
-    }
-  },
-  { immediate: true },
-)
-
-const AGGREGATION_OPTIONS: { value: RollupAggregation; labelKey: string }[] = [
-  { value: 'COUNT', labelKey: 'link.aggCount' },
-  { value: 'COUNTA', labelKey: 'link.aggCounta' },
-  { value: 'SUM', labelKey: 'link.aggSum' },
-  { value: 'AVG', labelKey: 'link.aggAvg' },
-  { value: 'MIN', labelKey: 'link.aggMin' },
-  { value: 'MAX', labelKey: 'link.aggMax' },
-]
-
-const fieldTypeOptions = Object.values(FieldType).map((type) => ({
-  value: type,
-  label: FIELD_TYPE_LABELS[type],
-}))
-
-function addOption() {
-  form.options.push({
-    id: uid(),
-    label: '',
-    color: SELECT_COLORS[form.options.length % SELECT_COLORS.length],
-  })
-}
-
-function removeOption(index: number) {
-  form.options.splice(index, 1)
-}
-
-function handleConfirm() {
-  if (!form.name.trim()) return
-  const field: FieldConfig = {
-    id: uid(),
-    name: form.name,
-    type: form.type,
-    width: 150,
-    visible: true,
-    required: false,
-  }
-  if (form.type === FieldType.SingleSelect || form.type === FieldType.MultiSelect) {
-    field.options = [...form.options]
-  }
-  if (form.type === FieldType.Rating) {
-    field.maxRating = 5
-  }
-  if (form.type === FieldType.Link) {
-    field.linkedTableId = form.linkedTableId
-  }
-  if (form.type === FieldType.Lookup) {
-    field.linkFieldId = form.linkFieldId
-    field.lookupFieldId = form.lookupFieldId
-  }
-  if (form.type === FieldType.Rollup) {
-    field.linkFieldId = form.linkFieldId
-    field.rollupFieldId = form.rollupFieldId
-    field.aggregation = form.aggregation
-  }
-  tableStore.addField(field)
-  form.name = ''
-  form.type = FieldType.Text
-  form.options = []
-  form.linkedTableId = ''
-  form.linkFieldId = ''
-  form.lookupFieldId = ''
-  form.rollupFieldId = ''
-  form.aggregation = 'COUNT'
-  emit('update:visible', false)
-  emit('added')
-}
-
-function handleClose() {
-  emit('update:visible', false)
-}
-</script>
-
-<template>
-  <el-dialog
-    :model-value="visible"
-    :title="t('table.addField')"
-    width="480px"
-    @update:model-value="handleClose"
-  >
-    <el-form label-position="top">
-      <el-form-item :label="t('table.fieldName')">
-        <el-input v-model="form.name" :placeholder="t('table.fieldName')" />
-      </el-form-item>
-
-      <el-form-item :label="t('table.fieldType')">
-        <el-select v-model="form.type" style="width: 100%;">
-          <el-option
-            v-for="ft in fieldTypeOptions"
-            :key="ft.value"
-            :label="t(ft.label)"
-            :value="ft.value"
-          />
-        </el-select>
-      </el-form-item>
-
-      <el-form-item
-        v-if="form.type === FieldType.SingleSelect || form.type === FieldType.MultiSelect"
-        :label="t('table.fieldOptions')"
-      >
-        <div class="w-full">
-          <div v-for="(opt, idx) in form.options" :key="opt.id" class="flex items-center gap-2 mb-2">
-            <el-color-picker v-model="opt.color" size="small" />
-            <el-input v-model="opt.label" size="small" style="flex: 1;" />
-            <el-button size="small" text type="danger" @click="removeOption(idx)">
-              <el-icon><Delete /></el-icon>
-            </el-button>
-          </div>
-          <el-button size="small" text type="primary" @click="addOption">
-            <el-icon class="mr-1"><Plus /></el-icon>
-            {{ t('common.add') }}
-          </el-button>
-        </div>
-      </el-form-item>
-      <!-- Link: target table -->
-      <el-form-item v-if="form.type === FieldType.Link" :label="t('link.targetTable')">
-        <el-select v-model="form.linkedTableId" style="width: 100%;" :placeholder="t('link.selectTable')" filterable>
-          <el-option v-for="tb in allTables" :key="tb.id" :label="tb.name" :value="tb.id" />
-        </el-select>
-      </el-form-item>
-
-      <!-- Lookup: link field + lookup field -->
-      <template v-if="form.type === FieldType.Lookup">
-        <el-form-item :label="t('link.linkField')">
-          <el-select v-model="form.linkFieldId" style="width: 100%;" :placeholder="t('link.selectLinkField')">
-            <el-option v-for="lf in currentTableLinkFields" :key="lf.id" :label="lf.name" :value="lf.id" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="form.linkFieldId" :label="t('link.lookupField')">
-          <el-select v-model="form.lookupFieldId" style="width: 100%;" :placeholder="t('link.selectField')">
-            <el-option v-for="f in linkedTableFields" :key="f.id" :label="f.name" :value="f.id" />
-          </el-select>
-        </el-form-item>
-      </template>
-
-      <!-- Rollup: link field + rollup field + aggregation -->
-      <template v-if="form.type === FieldType.Rollup">
-        <el-form-item :label="t('link.linkField')">
-          <el-select v-model="form.linkFieldId" style="width: 100%;" :placeholder="t('link.selectLinkField')">
-            <el-option v-for="lf in currentTableLinkFields" :key="lf.id" :label="lf.name" :value="lf.id" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="form.linkFieldId" :label="t('link.rollupField')">
-          <el-select v-model="form.rollupFieldId" style="width: 100%;" :placeholder="t('link.selectField')">
-            <el-option v-for="f in linkedTableFields" :key="f.id" :label="f.name" :value="f.id" />
-          </el-select>
-        </el-form-item>
-        <el-form-item v-if="form.linkFieldId" :label="t('link.aggregation')">
-          <el-select v-model="form.aggregation" style="width: 100%;">
-            <el-option v-for="agg in AGGREGATION_OPTIONS" :key="agg.value" :label="t(agg.labelKey)" :value="agg.value" />
-          </el-select>
-        </el-form-item>
-      </template>
-    </el-form>
-
-    <template #footer>
-      <el-button @click="handleClose">{{ t('common.cancel') }}</el-button>
-      <el-button type="primary" @click="handleConfirm" :disabled="!form.name.trim()">{{ t('common.confirm') }}</el-button>
-    </template>
-  </el-dialog>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/CalendarView.vue b/web/apps/web-ele/src/components/zq-smart-table/table/CalendarView.vue
deleted file mode 100644
index fd86a6a..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/CalendarView.vue
+++ /dev/null
@@ -1,827 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FieldType } from '#/types/zq-smart-table/field'
-import type { Record as TableRecord } from '#/types/zq-smart-table/table'
-import { ArrowLeft, ArrowRight, Plus } from '@element-plus/icons-vue'
-import RecordDetailDrawer from './RecordDetailDrawer.vue'
-import dayjs from 'dayjs'
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
-
-dayjs.extend(isSameOrBefore)
-dayjs.extend(isSameOrAfter)
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-const detailRecordId = ref<string | null>(null)
-const showDetail = ref(false)
-
-// ==================== View mode ====================
-type CalendarMode = 'month' | 'week' | 'day'
-const calendarMode = ref<CalendarMode>('month')
-const currentDate = ref(dayjs())
-
-watch(() => tableStore.activeView, (v) => {
-  if (v?.calendarMode) calendarMode.value = v.calendarMode
-}, { immediate: true })
-
-function setCalendarMode(mode: CalendarMode) {
-  calendarMode.value = mode
-  const view = tableStore.activeView
-  if (view) view.calendarMode = mode
-}
-
-// ==================== Date fields ====================
-const dateFields = computed(() => {
-  const table = tableStore.activeTable
-  if (!table) return []
-  return table.fields.filter((f) => f.type === FieldType.Date)
-})
-
-const selectedDateFieldId = ref<string>('')
-const selectedEndDateFieldId = ref<string>('')
-
-const activeDateFieldId = computed(() => {
-  if (selectedDateFieldId.value) return selectedDateFieldId.value
-  return tableStore.activeView?.calendarDateFieldId || dateFields.value[0]?.id || ''
-})
-
-const activeEndDateFieldId = computed(() => {
-  if (selectedEndDateFieldId.value) return selectedEndDateFieldId.value
-  return tableStore.activeView?.calendarEndDateFieldId || ''
-})
-
-watch(selectedDateFieldId, (v) => {
-  const view = tableStore.activeView
-  if (view && v) view.calendarDateFieldId = v
-})
-
-watch(selectedEndDateFieldId, (v) => {
-  const view = tableStore.activeView
-  if (view) view.calendarEndDateFieldId = v
-})
-
-const titleField = computed(() => {
-  const table = tableStore.activeTable
-  if (!table) return null
-  return table.fields.find((f) => f.type === FieldType.Text) || table.fields[0]
-})
-
-function getRecordTitle(record: TableRecord): string {
-  if (!titleField.value) return record.id
-  return String(record.values[titleField.value.id] ?? '') || t('table.noTitle')
-}
-
-// ==================== Color ====================
-const statusField = computed(() => {
-  const table = tableStore.activeTable
-  if (!table) return null
-  return table.fields.find((f) => f.type === FieldType.SingleSelect)
-})
-
-function getRecordColor(record: TableRecord): string {
-  if (!statusField.value?.options) return 'var(--zq-brand-color)'
-  const val = record.values[statusField.value.id]
-  const opt = statusField.value.options.find((o) => o.id === val)
-  return opt?.color ?? 'var(--zq-brand-color)'
-}
-
-// ==================== Navigation ====================
-function prevPeriod() {
-  currentDate.value = currentDate.value.subtract(1, calendarMode.value === 'day' ? 'day' : calendarMode.value === 'week' ? 'week' : 'month')
-}
-function nextPeriod() {
-  currentDate.value = currentDate.value.add(1, calendarMode.value === 'day' ? 'day' : calendarMode.value === 'week' ? 'week' : 'month')
-}
-function goToday() { currentDate.value = dayjs() }
-
-function isToday(day: dayjs.Dayjs) {
-  return day.isSame(dayjs(), 'day')
-}
-function isCurrentMonth(day: dayjs.Dayjs) {
-  return day.month() === currentDate.value.month()
-}
-
-const headerTitle = computed(() => {
-  if (calendarMode.value === 'day') return currentDate.value.format('YYYY/MM/DD')
-  if (calendarMode.value === 'week') {
-    const start = currentDate.value.startOf('week')
-    const end = currentDate.value.endOf('week')
-    return `${start.format('MM/DD')} - ${end.format('MM/DD')} (${start.format('YYYY')})`
-  }
-  return currentDate.value.format('YYYY/MM')
-})
-
-const weekDayLabels = computed(() => [
-  t('calendar.weekSun'), t('calendar.weekMon'), t('calendar.weekTue'),
-  t('calendar.weekWed'), t('calendar.weekThu'), t('calendar.weekFri'), t('calendar.weekSat'),
-])
-
-// ==================== Calendar grid ====================
-
-// Month view days
-const monthDays = computed(() => {
-  const start = currentDate.value.startOf('month').startOf('week')
-  const end = currentDate.value.endOf('month').endOf('week')
-  const days: dayjs.Dayjs[] = []
-  let cur = start
-  while (cur.isBefore(end) || cur.isSame(end, 'day')) {
-    days.push(cur)
-    cur = cur.add(1, 'day')
-  }
-  return days
-})
-
-// Week view days (7 days)
-const weekDays = computed(() => {
-  const start = currentDate.value.startOf('week')
-  return Array.from({ length: 7 }, (_, i) => start.add(i, 'day'))
-})
-
-// Hours for day/week view
-const dayHours = computed(() => Array.from({ length: 24 }, (_, i) => i))
-
-// ==================== Records mapping ====================
-interface CalendarEvent {
-  record: TableRecord
-  startDate: dayjs.Dayjs
-  endDate: dayjs.Dayjs
-  isMultiDay: boolean
-}
-
-const allEvents = computed<CalendarEvent[]>(() => {
-  const fieldId = activeDateFieldId.value
-  if (!fieldId) return []
-  const endFieldId = activeEndDateFieldId.value
-  const records = tableStore.getFilteredRecords()
-  const events: CalendarEvent[] = []
-
-  for (const record of records) {
-    const val = record.values[fieldId]
-    if (!val) continue
-    const startDate = dayjs(String(val))
-    if (!startDate.isValid()) continue
-
-    let endDate = startDate
-    if (endFieldId) {
-      const endVal = record.values[endFieldId]
-      if (endVal) {
-        const parsed = dayjs(String(endVal))
-        if (parsed.isValid() && parsed.isAfter(startDate)) endDate = parsed
-      }
-    }
-
-    events.push({
-      record,
-      startDate,
-      endDate,
-      isMultiDay: !endDate.isSame(startDate, 'day'),
-    })
-  }
-  return events
-})
-
-// Events grouped by date key for month view (single-day events + multi-day starts)
-function getEventsForDay(day: dayjs.Dayjs): CalendarEvent[] {
-  const key = day.format('YYYY-MM-DD')
-  return allEvents.value.filter((e) => {
-    if (e.isMultiDay) {
-      return day.isSameOrAfter(e.startDate, 'day') && day.isSameOrBefore(e.endDate, 'day')
-    }
-    return e.startDate.format('YYYY-MM-DD') === key
-  })
-}
-
-// Multi-day events that span across a day in month view
-function getMultiDayBars(day: dayjs.Dayjs): { event: CalendarEvent; isStart: boolean; isEnd: boolean; spanDays: number }[] {
-  return allEvents.value
-    .filter((e) => e.isMultiDay && day.isSameOrAfter(e.startDate, 'day') && day.isSameOrBefore(e.endDate, 'day'))
-    .map((e) => {
-      const isStart = day.isSame(e.startDate, 'day')
-      const isEnd = day.isSame(e.endDate, 'day')
-      const isWeekStart = day.day() === 0
-      const showBar = isStart || isWeekStart
-      const endOfWeek = day.endOf('week')
-      const actualEnd = e.endDate.isBefore(endOfWeek) ? e.endDate : endOfWeek
-      const spanDays = actualEnd.diff(day, 'day') + 1
-      return { event: e, isStart, isEnd, spanDays, showBar }
-    })
-    .filter((b) => b.showBar)
-}
-
-function getSingleDayEvents(day: dayjs.Dayjs): CalendarEvent[] {
-  const key = day.format('YYYY-MM-DD')
-  return allEvents.value.filter((e) => !e.isMultiDay && e.startDate.format('YYYY-MM-DD') === key)
-}
-
-// Whether the event has an explicit time component (not midnight)
-function eventHasTime(e: CalendarEvent): boolean {
-  return e.startDate.hour() !== 0 || e.startDate.minute() !== 0 || e.startDate.second() !== 0
-}
-
-// Events for week/day time slots (only timed, non-multi-day events)
-function getEventsAtHour(day: dayjs.Dayjs, hour: number): CalendarEvent[] {
-  return allEvents.value.filter((e) => {
-    if (e.isMultiDay) return false
-    if (!eventHasTime(e)) return false
-    return e.startDate.isSame(day, 'day') && e.startDate.hour() === hour
-  })
-}
-
-// All-day events: multi-day events + single-day events without time
-function getAllDayEvents(day: dayjs.Dayjs): CalendarEvent[] {
-  return allEvents.value.filter((e) => {
-    if (e.isMultiDay) {
-      return day.isSameOrAfter(e.startDate, 'day') && day.isSameOrBefore(e.endDate, 'day')
-    }
-    if (!eventHasTime(e)) {
-      return e.startDate.isSame(day, 'day')
-    }
-    return false
-  })
-}
-
-// ==================== Drag & Drop ====================
-const draggingEvent = ref<CalendarEvent | null>(null)
-const dragOverDate = ref<string | null>(null)
-let dragEnterCounter = 0
-
-function handleDragStart(e: DragEvent, event: CalendarEvent) {
-  draggingEvent.value = event
-  if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', event.record.id)
-  }
-}
-
-function handleDragEnter(e: DragEvent, dateKey: string) {
-  e.preventDefault()
-  dragEnterCounter++
-  dragOverDate.value = dateKey
-}
-
-function handleDragOver(e: DragEvent, _dateKey: string) {
-  e.preventDefault()
-  if (e.dataTransfer) e.dataTransfer.dropEffect = 'move'
-}
-
-function handleDragLeave() {
-  dragEnterCounter--
-  if (dragEnterCounter <= 0) {
-    dragOverDate.value = null
-    dragEnterCounter = 0
-  }
-}
-
-function resetDragState() {
-  draggingEvent.value = null
-  dragOverDate.value = null
-  dragEnterCounter = 0
-}
-
-function handleDrop(e: DragEvent, targetDate: dayjs.Dayjs) {
-  e.preventDefault()
-  const ev = draggingEvent.value
-  if (!ev) { resetDragState(); return }
-
-  const fieldId = activeDateFieldId.value
-  if (!fieldId) { resetDragState(); return }
-
-  const oldStart = ev.startDate
-  const diff = targetDate.startOf('day').diff(oldStart.startOf('day'), 'day')
-  if (diff === 0) { resetDragState(); return }
-
-  const hasTime = eventHasTime(ev)
-  const newStart = hasTime ? oldStart.add(diff, 'day') : targetDate
-
-  tableStore.updateCellValue(ev.record.id, fieldId, newStart.format(hasTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'))
-
-  if (ev.isMultiDay && activeEndDateFieldId.value) {
-    const newEnd = ev.endDate.add(diff, 'day')
-    const endHasTime = ev.endDate.hour() !== 0 || ev.endDate.minute() !== 0
-    tableStore.updateCellValue(ev.record.id, activeEndDateFieldId.value, newEnd.format(endHasTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'))
-  }
-
-  resetDragState()
-}
-
-function handleDropOnHour(e: DragEvent, day: dayjs.Dayjs, hour: number) {
-  e.preventDefault()
-  const ev = draggingEvent.value
-  if (!ev) { resetDragState(); return }
-
-  const fieldId = activeDateFieldId.value
-  if (!fieldId) { resetDragState(); return }
-
-  const oldStart = ev.startDate
-  const target = day.hour(hour).minute(0).second(0)
-  tableStore.updateCellValue(ev.record.id, fieldId, target.format('YYYY-MM-DD HH:mm:ss'))
-
-  if (ev.isMultiDay && activeEndDateFieldId.value) {
-    const diff = target.startOf('day').diff(oldStart.startOf('day'), 'day')
-    const newEnd = ev.endDate.add(diff, 'day')
-    tableStore.updateCellValue(ev.record.id, activeEndDateFieldId.value, newEnd.format('YYYY-MM-DD HH:mm:ss'))
-  }
-
-  resetDragState()
-}
-
-function handleDragEnd() {
-  resetDragState()
-}
-
-// ==================== Actions ====================
-function openDetail(recordId: string) {
-  detailRecordId.value = recordId
-  showDetail.value = true
-}
-
-function addRecordOnDate(day: dayjs.Dayjs) {
-  const fieldId = activeDateFieldId.value
-  const record = tableStore.addRecord()
-  if (record && fieldId) {
-    tableStore.updateCellValue(record.id, fieldId, day.format('YYYY-MM-DD'))
-  }
-}
-
-function addRecordAtHour(day: dayjs.Dayjs, hour: number) {
-  const fieldId = activeDateFieldId.value
-  const record = tableStore.addRecord()
-  if (record && fieldId) {
-    tableStore.updateCellValue(record.id, fieldId, day.hour(hour).minute(0).format('YYYY-MM-DD HH:mm:ss'))
-  }
-}
-
-function formatHour(h: number): string {
-  return `${String(h).padStart(2, '0')}:00`
-}
-</script>
-
-<template>
-  <div class="flex flex-col h-full overflow-hidden">
-    <!-- Header toolbar -->
-    <div class="flex items-center gap-3 px-4 py-2 flex-shrink-0" style="background: var(--zq-bg-toolbar); border-bottom: 1px solid var(--zq-border-color-light);">
-      <!-- Navigation -->
-      <el-button size="small" text @click="prevPeriod">
-        <el-icon><ArrowLeft /></el-icon>
-      </el-button>
-      <span class="text-sm font-semibold min-w-[160px] text-center select-none" style="color: var(--zq-text-primary);">
-        {{ headerTitle }}
-      </span>
-      <el-button size="small" text @click="nextPeriod">
-        <el-icon><ArrowRight /></el-icon>
-      </el-button>
-      <el-button size="small" @click="goToday">{{ t('calendar.today') }}</el-button>
-
-      <!-- Mode switcher -->
-      <div class="zq-cal-mode-switcher flex rounded-md overflow-hidden" style="border: 1px solid var(--zq-border-color);">
-        <button
-          v-for="mode in (['month', 'week', 'day'] as CalendarMode[])"
-          :key="mode"
-          class="px-3 py-1 text-xs transition-colors"
-          :class="{ 'zq-cal-mode-active': calendarMode === mode }"
-          :style="{
-            background: calendarMode === mode ? 'var(--zq-brand-color)' : 'transparent',
-            color: calendarMode === mode ? '#fff' : 'var(--zq-text-secondary)',
-          }"
-          @click="setCalendarMode(mode)"
-        >
-          {{ t(`calendar.mode${mode.charAt(0).toUpperCase() + mode.slice(1)}`) }}
-        </button>
-      </div>
-
-      <div class="flex-1" />
-
-      <!-- Date field selectors -->
-      <span class="text-xs" style="color: var(--zq-text-secondary);">{{ t('calendar.dateField') }}:</span>
-      <el-select
-        v-if="dateFields.length > 0"
-        v-model="selectedDateFieldId"
-        size="small"
-        style="width: 120px;"
-        :placeholder="dateFields[0]?.name"
-      >
-        <el-option v-for="f in dateFields" :key="f.id" :label="f.name" :value="f.id" />
-      </el-select>
-
-      <span class="text-xs" style="color: var(--zq-text-secondary);">{{ t('calendar.endDateField') }}:</span>
-      <el-select
-        v-if="dateFields.length > 1"
-        v-model="selectedEndDateFieldId"
-        size="small"
-        clearable
-        style="width: 120px;"
-        :placeholder="t('calendar.none')"
-      >
-        <el-option v-for="f in dateFields.filter(df => df.id !== activeDateFieldId)" :key="f.id" :label="f.name" :value="f.id" />
-      </el-select>
-      <span v-if="dateFields.length === 0" class="text-xs" style="color: var(--zq-text-placeholder);">{{ t('calendar.noDateField') }}</span>
-    </div>
-
-    <!-- No date field warning -->
-    <div v-if="dateFields.length === 0" class="flex-1 flex items-center justify-center" style="color: var(--zq-text-secondary);">
-      {{ t('calendar.noDateField') }}
-    </div>
-
-    <!-- ======================== MONTH VIEW ======================== -->
-    <template v-else-if="calendarMode === 'month'">
-      <div class="flex-1 overflow-auto">
-        <!-- Week header -->
-        <div class="grid grid-cols-7 flex-shrink-0" style="border-bottom: 1px solid var(--zq-border-color);">
-          <div
-            v-for="(wd, i) in weekDayLabels" :key="i"
-            class="py-2 text-center text-xs font-medium"
-            :style="{ color: i === 0 || i === 6 ? 'var(--zq-danger-color)' : 'var(--zq-text-secondary)' }"
-          >{{ wd }}</div>
-        </div>
-
-        <!-- Days grid -->
-        <div class="grid grid-cols-7" style="min-height: calc(100% - 36px);">
-          <div
-            v-for="(day, idx) in monthDays"
-            :key="idx"
-            class="border-r border-b p-1 flex flex-col group/day zq-cal-day-cell"
-            :class="{ 'zq-cal-drag-over': dragOverDate === day.format('YYYY-MM-DD') }"
-            :style="{
-              borderColor: 'var(--zq-border-color-light)',
-              background: isCurrentMonth(day) ? 'var(--zq-bg-cell)' : 'var(--zq-bg-secondary)',
-              minHeight: '100px',
-            }"
-            @dragenter="handleDragEnter($event, day.format('YYYY-MM-DD'))"
-            @dragover="handleDragOver($event, day.format('YYYY-MM-DD'))"
-            @dragleave="handleDragLeave"
-            @drop="handleDrop($event, day)"
-          >
-            <!-- Day number -->
-            <div class="flex items-center justify-between mb-1">
-              <span
-                class="w-6 h-6 flex items-center justify-center text-xs font-medium rounded-full"
-                :style="{
-                  background: isToday(day) ? 'var(--zq-brand-color)' : 'transparent',
-                  color: isToday(day) ? '#fff' : isCurrentMonth(day) ? (day.day() === 0 || day.day() === 6 ? 'var(--zq-danger-color)' : 'var(--zq-text-primary)') : 'var(--zq-text-placeholder)',
-                }"
-              >{{ day.date() }}</span>
-              <el-icon
-                :size="12"
-                class="opacity-0 group-hover/day:opacity-70 cursor-pointer transition-opacity"
-                style="color: var(--zq-brand-color);"
-                @click="addRecordOnDate(day)"
-              ><Plus /></el-icon>
-            </div>
-
-            <!-- Multi-day event bars -->
-            <div v-for="bar in getMultiDayBars(day)" :key="'md-' + bar.event.record.id" class="mb-0.5">
-              <div
-                draggable="true"
-                class="zq-cal-event zq-cal-event-multiday text-[10px] px-1.5 py-0.5 truncate cursor-pointer"
-                :style="{
-                  background: getRecordColor(bar.event.record) + '33',
-                  color: getRecordColor(bar.event.record),
-                  borderLeft: bar.isStart ? '3px solid ' + getRecordColor(bar.event.record) : 'none',
-                  borderRadius: (bar.isStart ? '4px' : '0') + ' ' + (bar.isEnd ? '4px' : '0') + ' ' + (bar.isEnd ? '4px' : '0') + ' ' + (bar.isStart ? '4px' : '0'),
-                  width: `calc(${bar.spanDays * 100}% + ${(bar.spanDays - 1) * 1}px)`,
-                  position: 'relative',
-                  zIndex: 2,
-                }"
-                @click="openDetail(bar.event.record.id)"
-                @dragstart="handleDragStart($event, bar.event)"
-                @dragend="handleDragEnd"
-              >
-                {{ getRecordTitle(bar.event.record) }}
-              </div>
-            </div>
-
-            <!-- Single-day events -->
-            <div class="space-y-0.5 flex-1 overflow-hidden">
-              <div
-                v-for="event in getSingleDayEvents(day).slice(0, 3)"
-                :key="event.record.id"
-                draggable="true"
-                class="zq-cal-event text-[11px] px-1.5 py-0.5 rounded truncate cursor-pointer hover:opacity-80 transition-opacity"
-                :style="{ background: getRecordColor(event.record) + '22', color: getRecordColor(event.record), borderLeft: '2px solid ' + getRecordColor(event.record) }"
-                @click="openDetail(event.record.id)"
-                @dragstart="handleDragStart($event, event)"
-                @dragend="handleDragEnd"
-              >
-                {{ getRecordTitle(event.record) }}
-              </div>
-              <div
-                v-if="getSingleDayEvents(day).length > 3"
-                class="text-[10px] px-1 cursor-pointer"
-                style="color: var(--zq-text-placeholder);"
-              >
-                +{{ getSingleDayEvents(day).length - 3 }} {{ t('calendar.more') }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <!-- ======================== WEEK VIEW ======================== -->
-    <template v-else-if="calendarMode === 'week'">
-      <div class="flex-1 overflow-auto zq-cal-week-scroll">
-        <div class="zq-cal-week-grid">
-          <!-- Week header -->
-          <div class="zq-cal-week-header">
-            <div class="zq-cal-time-gutter" style="background: var(--zq-bg-header);" />
-            <div
-              v-for="day in weekDays"
-              :key="day.format('YYYY-MM-DD')"
-              class="zq-cal-week-header-cell text-center"
-              :style="{ background: isToday(day) ? 'var(--zq-brand-color-light)' : 'var(--zq-bg-header)' }"
-            >
-              <div class="text-[10px] font-medium" :style="{ color: day.day() === 0 || day.day() === 6 ? 'var(--zq-danger-color)' : 'var(--zq-text-secondary)' }">
-                {{ weekDayLabels[day.day()] }}
-              </div>
-              <div
-                class="w-7 h-7 flex items-center justify-center text-sm font-semibold rounded-full mx-auto"
-                :style="{
-                  background: isToday(day) ? 'var(--zq-brand-color)' : 'transparent',
-                  color: isToday(day) ? '#fff' : 'var(--zq-text-primary)',
-                }"
-              >{{ day.date() }}</div>
-            </div>
-          </div>
-
-          <!-- All-day row -->
-          <div class="zq-cal-allday-row">
-            <div class="zq-cal-time-gutter zq-cal-allday-label">
-              <span class="text-[10px]" style="color: var(--zq-text-placeholder);">{{ t('calendar.allDay') }}</span>
-            </div>
-            <div
-              v-for="day in weekDays"
-              :key="'ad-' + day.format('YYYY-MM-DD')"
-              class="zq-cal-allday-cell"
-              :class="{ 'zq-cal-drag-over': dragOverDate === day.format('YYYY-MM-DD') + '-allday' }"
-              @dragenter="handleDragEnter($event, day.format('YYYY-MM-DD') + '-allday')"
-              @dragover="handleDragOver($event, day.format('YYYY-MM-DD') + '-allday')"
-              @dragleave="handleDragLeave"
-              @drop="handleDrop($event, day)"
-            >
-              <div
-                v-for="ev in getAllDayEvents(day)"
-                :key="ev.record.id"
-                draggable="true"
-                class="zq-cal-event text-[10px] px-1 py-0.5 rounded truncate cursor-pointer mb-0.5"
-                :style="{ background: getRecordColor(ev.record) + '22', color: getRecordColor(ev.record), borderLeft: '2px solid ' + getRecordColor(ev.record) }"
-                @click="openDetail(ev.record.id)"
-                @dragstart="handleDragStart($event, ev)"
-                @dragend="handleDragEnd"
-              >{{ getRecordTitle(ev.record) }}</div>
-            </div>
-          </div>
-
-          <!-- Time slots -->
-          <div class="zq-cal-time-body">
-            <template v-for="hour in dayHours" :key="hour">
-              <div class="zq-cal-time-row">
-                <div class="zq-cal-time-gutter zq-cal-time-label">
-                  <span class="text-[10px]" style="color: var(--zq-text-placeholder);">{{ formatHour(hour) }}</span>
-                </div>
-                <div
-                  v-for="day in weekDays"
-                  :key="day.format('YYYY-MM-DD') + '-' + hour"
-                  class="zq-cal-time-cell group/slot"
-                  :class="{ 'zq-cal-drag-over': dragOverDate === day.format('YYYY-MM-DD') + '-' + hour }"
-                  :style="{ background: isToday(day) ? 'var(--zq-brand-color-light)' : 'transparent' }"
-                  @dragenter="handleDragEnter($event, day.format('YYYY-MM-DD') + '-' + hour)"
-                  @dragover="handleDragOver($event, day.format('YYYY-MM-DD') + '-' + hour)"
-                  @dragleave="handleDragLeave"
-                  @drop="handleDropOnHour($event, day, hour)"
-                >
-                  <div
-                    v-for="ev in getEventsAtHour(day, hour)"
-                    :key="ev.record.id"
-                    draggable="true"
-                    class="zq-cal-event text-[10px] px-1.5 py-0.5 rounded truncate cursor-pointer mb-0.5"
-                    :style="{ background: getRecordColor(ev.record) + '22', color: getRecordColor(ev.record), borderLeft: '2px solid ' + getRecordColor(ev.record) }"
-                    @click.stop="openDetail(ev.record.id)"
-                    @dragstart="handleDragStart($event, ev)"
-                    @dragend="handleDragEnd"
-                  >{{ getRecordTitle(ev.record) }}</div>
-                  <el-icon
-                    :size="10"
-                    class="opacity-0 group-hover/slot:opacity-50 cursor-pointer absolute top-0.5 right-0.5"
-                    style="color: var(--zq-brand-color);"
-                    @click="addRecordAtHour(day, hour)"
-                  ><Plus /></el-icon>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <!-- ======================== DAY VIEW ======================== -->
-    <template v-else-if="calendarMode === 'day'">
-      <div class="flex-1 overflow-auto zq-cal-week-scroll">
-        <div class="zq-cal-day-grid">
-          <!-- Day header -->
-          <div class="zq-cal-week-header">
-            <div class="zq-cal-time-gutter" style="background: var(--zq-bg-header);" />
-            <div
-              class="zq-cal-week-header-cell text-center flex-1"
-              :style="{ background: isToday(currentDate) ? 'var(--zq-brand-color-light)' : 'var(--zq-bg-header)' }"
-            >
-              <div class="text-[10px] font-medium" :style="{ color: currentDate.day() === 0 || currentDate.day() === 6 ? 'var(--zq-danger-color)' : 'var(--zq-text-secondary)' }">
-                {{ weekDayLabels[currentDate.day()] }}
-              </div>
-              <div
-                class="w-8 h-8 flex items-center justify-center text-base font-semibold rounded-full mx-auto"
-                :style="{
-                  background: isToday(currentDate) ? 'var(--zq-brand-color)' : 'transparent',
-                  color: isToday(currentDate) ? '#fff' : 'var(--zq-text-primary)',
-                }"
-              >{{ currentDate.date() }}</div>
-            </div>
-          </div>
-
-          <!-- All-day row -->
-          <div class="zq-cal-allday-row">
-            <div class="zq-cal-time-gutter zq-cal-allday-label">
-              <span class="text-[10px]" style="color: var(--zq-text-placeholder);">{{ t('calendar.allDay') }}</span>
-            </div>
-            <div
-              class="zq-cal-allday-cell flex-1"
-              :class="{ 'zq-cal-drag-over': dragOverDate === currentDate.format('YYYY-MM-DD') + '-allday' }"
-              @dragenter="handleDragEnter($event, currentDate.format('YYYY-MM-DD') + '-allday')"
-              @dragover="handleDragOver($event, currentDate.format('YYYY-MM-DD') + '-allday')"
-              @dragleave="handleDragLeave"
-              @drop="handleDrop($event, currentDate)"
-            >
-              <div
-                v-for="ev in getAllDayEvents(currentDate)"
-                :key="ev.record.id"
-                draggable="true"
-                class="zq-cal-event text-[10px] px-1.5 py-0.5 rounded truncate cursor-pointer mb-0.5"
-                :style="{ background: getRecordColor(ev.record) + '22', color: getRecordColor(ev.record), borderLeft: '2px solid ' + getRecordColor(ev.record) }"
-                @click="openDetail(ev.record.id)"
-                @dragstart="handleDragStart($event, ev)"
-                @dragend="handleDragEnd"
-              >{{ getRecordTitle(ev.record) }}</div>
-            </div>
-          </div>
-
-          <!-- Time slots -->
-          <div class="zq-cal-time-body">
-            <template v-for="hour in dayHours" :key="hour">
-              <div class="zq-cal-time-row">
-                <div class="zq-cal-time-gutter zq-cal-time-label">
-                  <span class="text-[10px]" style="color: var(--zq-text-placeholder);">{{ formatHour(hour) }}</span>
-                </div>
-                <div
-                  class="zq-cal-time-cell group/slot flex-1"
-                  :class="{ 'zq-cal-drag-over': dragOverDate === currentDate.format('YYYY-MM-DD') + '-' + hour }"
-                  :style="{ background: isToday(currentDate) ? 'var(--zq-brand-color-light)' : 'transparent' }"
-                  @dragenter="handleDragEnter($event, currentDate.format('YYYY-MM-DD') + '-' + hour)"
-                  @dragover="handleDragOver($event, currentDate.format('YYYY-MM-DD') + '-' + hour)"
-                  @dragleave="handleDragLeave"
-                  @drop="handleDropOnHour($event, currentDate, hour)"
-                >
-                  <div
-                    v-for="ev in getEventsAtHour(currentDate, hour)"
-                    :key="ev.record.id"
-                    draggable="true"
-                    class="zq-cal-event text-[11px] px-2 py-1 rounded truncate cursor-pointer mb-0.5"
-                    :style="{ background: getRecordColor(ev.record) + '22', color: getRecordColor(ev.record), borderLeft: '3px solid ' + getRecordColor(ev.record) }"
-                    @click.stop="openDetail(ev.record.id)"
-                    @dragstart="handleDragStart($event, ev)"
-                    @dragend="handleDragEnd"
-                  >{{ getRecordTitle(ev.record) }}</div>
-                  <el-icon
-                    :size="12"
-                    class="opacity-0 group-hover/slot:opacity-50 cursor-pointer absolute top-1 right-1"
-                    style="color: var(--zq-brand-color);"
-                    @click="addRecordAtHour(currentDate, hour)"
-                  ><Plus /></el-icon>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <RecordDetailDrawer v-model:visible="showDetail" v-model:record-id="detailRecordId" />
-  </div>
-</template>
-
-<style scoped>
-/* ========== Mode switcher ========== */
-.zq-cal-mode-switcher button:not(:last-child) {
-  border-right: 1px solid var(--zq-border-color-light);
-}
-.zq-cal-mode-switcher button:hover:not(.zq-cal-mode-active) {
-  background: var(--zq-bg-cell-hover);
-}
-
-/* ========== Month view ========== */
-.zq-cal-day-cell {
-  transition: background 0.15s;
-}
-.zq-cal-drag-over {
-  background: var(--zq-brand-color-light) !important;
-  outline: 2px dashed var(--zq-brand-color);
-  outline-offset: -2px;
-}
-
-.zq-cal-event {
-  transition: opacity 0.15s, box-shadow 0.15s;
-  user-select: none;
-}
-.zq-cal-event:hover {
-  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
-}
-.zq-cal-event[draggable="true"] {
-  cursor: grab;
-}
-.zq-cal-event[draggable="true"]:active {
-  cursor: grabbing;
-  opacity: 0.7;
-}
-
-/* ========== Week / Day view shared ========== */
-.zq-cal-week-grid,
-.zq-cal-day-grid {
-  display: flex;
-  flex-direction: column;
-  min-height: 100%;
-}
-
-.zq-cal-week-header {
-  display: flex;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  border-bottom: 1px solid var(--zq-border-color);
-}
-.zq-cal-week-header-cell {
-  flex: 1;
-  padding: 4px 0 6px;
-  border-right: 1px solid var(--zq-border-color-light);
-}
-.zq-cal-week-header-cell:last-child {
-  border-right: none;
-}
-
-/* Time gutter (left labels) */
-.zq-cal-time-gutter {
-  width: 56px;
-  min-width: 56px;
-  flex-shrink: 0;
-  border-right: 1px solid var(--zq-border-color-light);
-  background: var(--zq-bg-cell);
-}
-
-/* All-day row */
-.zq-cal-allday-row {
-  display: flex;
-  border-bottom: 2px solid var(--zq-border-color);
-  min-height: 32px;
-}
-.zq-cal-allday-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.zq-cal-allday-cell {
-  flex: 1;
-  padding: 2px 4px;
-  border-right: 1px solid var(--zq-border-color-light);
-  min-height: 28px;
-}
-.zq-cal-allday-cell:last-child {
-  border-right: none;
-}
-
-/* Time body */
-.zq-cal-time-body {
-  flex: 1;
-}
-.zq-cal-time-row {
-  display: flex;
-  min-height: 48px;
-}
-.zq-cal-time-label {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: 2px;
-  border-bottom: 1px solid var(--zq-border-color-light);
-}
-.zq-cal-time-cell {
-  flex: 1;
-  position: relative;
-  padding: 2px 4px;
-  border-right: 1px solid var(--zq-border-color-light);
-  border-bottom: 1px solid var(--zq-border-color-light);
-}
-.zq-cal-time-cell:last-child {
-  border-right: none;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/CellRenderer.vue b/web/apps/web-ele/src/components/zq-smart-table/table/CellRenderer.vue
deleted file mode 100644
index e3edc47..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/CellRenderer.vue
+++ /dev/null
@@ -1,939 +0,0 @@
-<script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
-import { FieldType, type FieldConfig, type LinkedRecordItem } from '#/types/zq-smart-table/field'
-import type { CellValue } from '#/types/zq-smart-table/table'
-import dayjs from 'dayjs'
-import { Link as LinkIcon, Message, PhoneFilled } from '@element-plus/icons-vue'
-import { $t } from '@vben/locales';
-import {
-  ElDatePicker,
-  ElIcon,
-  ElInput,
-  ElOption,
-  ElPopover,
-  ElProgress,
-  ElRate,
-  ElSelect,
-  ElSlider,
-  ElSwitch,
-  ElTag,
-  ElTooltip,
-} from 'element-plus'
-
-const UserSelector = defineAsyncComponent(() => import('#/components/zq-form/user-selector/user-selector.vue'))
-const DeptSelector = defineAsyncComponent(() => import('#/components/zq-form/dept-selector/dept-selector.vue'))
-const RegionSelector = defineAsyncComponent(() => import('#/components/zq-form/region-selector/region-selector.vue'))
-const ImageSelector = defineAsyncComponent(() => import('#/components/zq-form/image-selector/image-selector.vue'))
-const FileSelector = defineAsyncComponent(() => import('#/components/zq-form/file-selector/file-selector.vue'))
-const LinkRecordSelector = defineAsyncComponent(() => import('#/components/zq-smart-table/table/LinkRecordSelector.vue'))
-const RichTextEditor = defineAsyncComponent(() => import('#/components/zq-form/rich-text-editor/rich-text-editor.vue'))
-
-function formatRelativeDate(val: string): string {
-  if (!val) return ''
-  const d = dayjs(val)
-  if (!d.isValid()) return val
-  const today = dayjs().startOf('day')
-  const diff = d.startOf('day').diff(today, 'day')
-  if (diff === 0) return `${$t('cellRenderer.today')} ${val}`
-  if (diff === -1) return `${$t('cellRenderer.yesterday')} ${val}`
-  if (diff === 1) return `${$t('cellRenderer.tomorrow')} ${val}`
-  return val
-}
-
-const props = defineProps<{
-  field: FieldConfig
-  value: CellValue
-  recordId: string
-  editing: boolean
-}>()
-
-const emit = defineEmits<{
-  update: [value: CellValue]
-  startEdit: []
-  endEdit: []
-}>()
-
-function getOptionLabel(optionId: string): string {
-  const opt = props.field.options?.find((o) => o.id === optionId)
-  return opt?.label ?? String(optionId)
-}
-
-function getOptionColor(optionId: string): string {
-  const opt = props.field.options?.find((o) => o.id === optionId)
-  return opt?.color ?? '#bbbfc4'
-}
-
-function handleSwitchChange(val: boolean | string | number) {
-  emit('update', !!val)
-}
-
-function handleSelectChange(val: string | number | boolean | undefined) {
-  emit('update', val as CellValue)
-}
-
-function handleMultiSelectChange(val: string[]) {
-  emit('update', val)
-}
-
-function handleRatingChange(val: number) {
-  emit('update', val)
-}
-
-function handleNumberInput(v: string) {
-  const num = v === '' ? '' : Number(v)
-  emit('update', num as CellValue)
-}
-
-const AVATAR_COLORS = ['#4e83fd', '#36b37e', '#ff991f', '#f54a45', '#8777d9', '#00b8d9', '#ff6b6b', '#6554c0']
-function avatarColor(name: string): string {
-  let hash = 0
-  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash)
-  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length]
-}
-
-function formatNumber(val: unknown): string {
-  if (val == null || val === '') return ''
-  const num = Number(val)
-  if (isNaN(num)) return String(val)
-  const fmt = props.field.numberFormat ?? 'number'
-  const precision = props.field.precision ?? 2
-  switch (fmt) {
-    case 'currency':
-      return `¥${num.toLocaleString('zh-CN', { minimumFractionDigits: precision, maximumFractionDigits: precision })}`
-    case 'percent':
-      return `${num.toLocaleString('zh-CN', { minimumFractionDigits: precision, maximumFractionDigits: precision })}%`
-    case 'yuan':
-      return `${num.toLocaleString('zh-CN', { minimumFractionDigits: precision, maximumFractionDigits: precision })} ${$t('cellRenderer.yuan')}`
-    default:
-      return num.toLocaleString('zh-CN', { minimumFractionDigits: 0, maximumFractionDigits: precision })
-  }
-}
-
-function formatCurrency(val: unknown, symbol: string): string {
-  if (val == null || val === '') return ''
-  const num = Number(val)
-  if (isNaN(num)) return String(val)
-  const precision = props.field.precision ?? 2
-  return `${symbol}${num.toLocaleString('zh-CN', { minimumFractionDigits: precision, maximumFractionDigits: precision })}`
-}
-
-function progressColor(val: number): string {
-  if (val >= 90) return '#34c724'
-  if (val >= 60) return '#4e83fd'
-  if (val >= 30) return '#ff7d00'
-  return '#f54a45'
-}
-
-const REGION_LEVEL_MAP: Record<string, 1 | 2 | 3> = { province: 1, city: 2, district: 3 }
-function toRegionLevel(level?: string): 1 | 2 | 3 {
-  return REGION_LEVEL_MAP[level ?? 'district'] ?? 3
-}
-
-function cellFileIds(val: CellValue): string | string[] | undefined {
-  if (!val) return undefined
-  if (Array.isArray(val)) return val.map(String)
-  return String(val)
-}
-
-function formatFormulaValue(val: unknown, resultType?: string): string {
-  if (val == null || val === '') return ''
-  switch (resultType) {
-    case 'number': {
-      const num = Number(val)
-      return isNaN(num) ? String(val) : num.toLocaleString('zh-CN')
-    }
-    case 'date': {
-      const d = dayjs(String(val))
-      return d.isValid() ? d.format('YYYY-MM-DD') : String(val)
-    }
-    case 'boolean':
-      return val === true || val === 'true' || val === 1 ? '✓' : '✗'
-    default:
-      return String(val)
-  }
-}
-
-function isValidUrl(str: string): boolean {
-  try { new URL(str); return true } catch { return false }
-}
-
-function isValidEmail(str: string): boolean {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str)
-}
-
-function isValidPhone(str: string): boolean {
-  return /^[\d\s\-+()]{5,20}$/.test(str)
-}
-
-function getUrlDomain(url: string): string {
-  try { return new URL(url).hostname } catch { return url }
-}
-
-function stripHtml(html: string): string {
-  const tmp = document.createElement('div')
-  tmp.innerHTML = html
-  return tmp.textContent || tmp.innerText || ''
-}
-
-
-const selectPopperOptions = {
-  modifiers: [
-    { name: 'offset', options: { offset: [0, 8] } },
-  ],
-}
-</script>
-
-<template>
-  <!-- Text -->
-  <template v-if="field.type === FieldType.Text">
-    <el-input
-      v-if="editing"
-      :model-value="String(value ?? '')"
-      size="small"
-      autofocus
-      :placeholder="field.name"
-      @update:model-value="(v: string) => emit('update', v)"
-      @blur="emit('endEdit')"
-      @keyup.enter="emit('endEdit')"
-    />
-    <el-tooltip v-else :content="String(value ?? '')" placement="top" :show-after="800" :disabled="!value || String(value).length < 20">
-      <span class="block truncate min-h-[22px] leading-[22px]">{{ value ?? '' }}</span>
-    </el-tooltip>
-  </template>
-
-  <!-- Number -->
-  <template v-else-if="field.type === FieldType.Number">
-    <el-input
-      v-if="editing"
-      :model-value="value != null && value !== '' ? String(value) : ''"
-      size="small"
-      type="number"
-      autofocus
-      :placeholder="field.name"
-      @update:model-value="handleNumberInput"
-      @blur="emit('endEdit')"
-      @keyup.enter="emit('endEdit')"
-    />
-    <span
-      v-else
-      class="block min-h-[22px] leading-[22px] text-right"
-      :style="{ color: value != null && Number(value) > 0 ? 'var(--zq-success-color, #67c23a)' : value != null && Number(value) < 0 ? 'var(--zq-danger-color, #f56c6c)' : undefined }"
-    >{{ formatNumber(value) }}</span>
-  </template>
-
-  <!-- Single Select -->
-  <template v-else-if="field.type === FieldType.SingleSelect">
-    <el-select
-      v-if="editing"
-      :model-value="value ? String(value) : undefined"
-      size="small"
-      :placeholder="field.name"
-      clearable
-      placement="bottom-start"
-      popper-class="zq-select-popper"
-      :teleported="true"
-      :popper-options="selectPopperOptions"
-      @change="handleSelectChange"
-    >
-      <el-option
-        v-for="opt in field.options"
-        :key="opt.id"
-        :label="opt.label"
-        :value="opt.id"
-      >
-        <div class="flex items-center gap-2">
-          <span class="w-2.5 h-2.5 rounded-full inline-block" :style="{ background: opt.color }" />
-          {{ opt.label }}
-        </div>
-      </el-option>
-    </el-select>
-    <div v-else class="min-h-[22px] flex items-center">
-      <el-tag
-        v-if="value"
-        size="small"
-        :color="getOptionColor(String(value))"
-        effect="dark"
-        round
-        style="border: none; color: #fff;"
-      >
-        {{ getOptionLabel(String(value)) }}
-      </el-tag>
-    </div>
-  </template>
-
-  <!-- Multi Select -->
-  <template v-else-if="field.type === FieldType.MultiSelect">
-    <el-select
-      v-if="editing"
-      :model-value="(value as string[]) ?? []"
-      size="small"
-      :placeholder="field.name"
-      multiple
-      clearable
-      placement="bottom-start"
-      popper-class="zq-select-popper"
-      :teleported="true"
-      :popper-options="selectPopperOptions"
-      @change="handleMultiSelectChange"
-    >
-      <el-option
-        v-for="opt in field.options"
-        :key="opt.id"
-        :label="opt.label"
-        :value="opt.id"
-      >
-        <div class="flex items-center gap-2">
-          <span class="w-2.5 h-2.5 rounded-full inline-block" :style="{ background: opt.color }" />
-          {{ opt.label }}
-        </div>
-      </el-option>
-    </el-select>
-    <div v-else class="flex flex-wrap gap-1 min-h-[22px] items-center">
-      <el-tag
-        v-for="v in ((value as string[]) ?? [])"
-        :key="v"
-        size="small"
-        :color="getOptionColor(v)"
-        effect="dark"
-        round
-        style="border: none; color: #fff;"
-      >
-        {{ getOptionLabel(v) }}
-      </el-tag>
-    </div>
-  </template>
-
-  <!-- Date -->
-  <template v-else-if="field.type === FieldType.Date">
-    <el-date-picker
-      v-if="editing"
-      :model-value="value ? String(value) : ''"
-      :type="field.includeTime ? 'datetime' : 'date'"
-      size="small"
-      :placeholder="field.name"
-      :value-format="field.includeTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'"
-      :format="field.includeTime ? 'YYYY-MM-DD HH:mm' : (field.dateFormat ?? 'YYYY-MM-DD')"
-      @update:model-value="(v: any) => { emit('update', v); emit('endEdit') }"
-    />
-    <el-tooltip v-else :content="String(value ?? '')" placement="top" :show-after="800" :disabled="!value">
-      <span class="block min-h-[22px] leading-[22px]">{{ value ? formatRelativeDate(String(value)) : '' }}</span>
-    </el-tooltip>
-  </template>
-
-  <!-- Checkbox (rendered as switch) -->
-  <template v-else-if="field.type === FieldType.Checkbox">
-    <el-switch
-      :model-value="!!value"
-      size="small"
-      @change="handleSwitchChange"
-    />
-  </template>
-
-  <!-- Rating -->
-  <template v-else-if="field.type === FieldType.Rating">
-    <el-rate
-      :model-value="Number(value ?? 0)"
-      :max="field.maxRating ?? 5"
-      size="small"
-      :colors="['#f7ba2a', '#f7ba2a', '#f7ba2a']"
-      @update:model-value="handleRatingChange"
-    />
-  </template>
-
-  <!-- Progress -->
-  <template v-else-if="field.type === FieldType.Progress">
-    <div v-if="editing" class="w-full flex items-center gap-2">
-      <el-slider
-        :model-value="Number(value ?? 0)"
-        :min="0"
-        :max="100"
-        size="small"
-        style="flex: 1;"
-        @update:model-value="(v: number) => emit('update', v)"
-      />
-      <span class="text-xs whitespace-nowrap" style="color: var(--zq-text-secondary);">{{ value ?? 0 }}%</span>
-    </div>
-    <div v-else class="flex items-center gap-2 w-full min-h-[22px]">
-      <el-progress :percentage="Number(value ?? 0)" :stroke-width="6" :color="progressColor(Number(value ?? 0))" style="flex: 1;" :show-text="false" />
-      <span class="text-xs whitespace-nowrap" style="color: var(--zq-text-secondary);">{{ value ?? 0 }}%</span>
-    </div>
-  </template>
-
-  <!-- Person / User -->
-  <template v-else-if="field.type === FieldType.Person || field.type === FieldType.User">
-    <div v-if="editing" class="w-full" @click.stop>
-      <UserSelector
-        :model-value="value as string | string[] | undefined"
-        :multiple="field.multiple"
-        :placeholder="field.name"
-        display-mode="select"
-        @update:model-value="(v: any) => emit('update', v)"
-      />
-    </div>
-    <div v-else-if="value && (Array.isArray(value) ? value.length > 0 : true)" class="w-full zq-cell-selector-readonly">
-      <UserSelector
-        :model-value="value as string | string[] | undefined"
-        :multiple="field.multiple"
-        placeholder=""
-        display-mode="select"
-        readonly
-      />
-    </div>
-    <span v-else class="block min-h-[22px]" />
-  </template>
-
-  <!-- Department (zq-form dept-selector) -->
-  <template v-else-if="field.type === FieldType.Department">
-    <div v-if="editing" class="w-full" @click.stop>
-      <DeptSelector
-        :model-value="value as string | string[] | undefined"
-        :multiple="field.multiple"
-        :placeholder="field.name"
-        @update:model-value="(v: any) => emit('update', v)"
-      />
-    </div>
-    <div v-else-if="value && (Array.isArray(value) ? value.length > 0 : true)" class="w-full zq-cell-selector-readonly">
-      <DeptSelector
-        :model-value="value as string | string[] | undefined"
-        :multiple="field.multiple"
-        placeholder=""
-      />
-    </div>
-    <span v-else class="block min-h-[22px]" />
-  </template>
-
-  <!-- Region (zq-form region-selector) -->
-  <template v-else-if="field.type === FieldType.Region">
-    <div v-if="editing" class="w-full" @click.stop>
-      <RegionSelector
-        :model-value="value as string[] | undefined"
-        :level="toRegionLevel(field.regionLevel)"
-        :placeholder="field.name"
-        @update:model-value="(v: any) => emit('update', v)"
-      />
-    </div>
-    <div v-else-if="value && (Array.isArray(value) ? value.length > 0 : true)" class="w-full zq-cell-selector-readonly">
-      <RegionSelector
-        :model-value="value as string[] | undefined"
-        :level="toRegionLevel(field.regionLevel)"
-        placeholder=" "
-        disabled
-      />
-    </div>
-    <span v-else class="block min-h-[22px]" />
-  </template>
-
-  <!-- URL (enhanced with domain display and favicon) -->
-  <template v-else-if="field.type === FieldType.URL">
-    <el-input
-      v-if="editing"
-      :model-value="String(value ?? '')"
-      size="small"
-      autofocus
-      :placeholder="field.name"
-      @update:model-value="(v: string) => emit('update', v)"
-      @blur="emit('endEdit')"
-      @keyup.enter="emit('endEdit')"
-    />
-    <a
-      v-else-if="value && isValidUrl(String(value))"
-      :href="String(value)"
-      target="_blank"
-      class="flex items-center gap-1.5 text-xs truncate min-h-[22px] leading-[22px]"
-      style="color: var(--zq-brand-color);"
-      @click.stop
-    >
-      <img
-        :src="`https://www.google.com/s2/favicons?domain=${getUrlDomain(String(value))}&sz=16`"
-        class="w-3.5 h-3.5 flex-shrink-0 rounded-sm"
-        @error="(e: Event) => (e.target as HTMLImageElement).style.display = 'none'"
-      />
-      <span class="truncate">{{ getUrlDomain(String(value)) }}</span>
-      <el-icon :size="10" class="flex-shrink-0 opacity-60"><LinkIcon /></el-icon>
-    </a>
-    <span v-else-if="value" class="block text-xs truncate min-h-[22px] leading-[22px]" style="color: var(--zq-text-secondary);">{{ value }}</span>
-    <span v-else class="block min-h-[22px]" />
-  </template>
-
-  <!-- CreatedTime / ModifiedTime -->
-  <template v-else-if="field.type === FieldType.CreatedTime || field.type === FieldType.ModifiedTime">
-    <span class="block truncate min-h-[22px] leading-[22px]" style="color: var(--zq-text-secondary);">{{ value ? formatRelativeDate(String(value)) : '' }}</span>
-  </template>
-
-  <!-- Email (enhanced with validation indicator) -->
-  <template v-else-if="field.type === FieldType.Email">
-    <el-input
-      v-if="editing"
-      :model-value="String(value ?? '')"
-      size="small"
-      autofocus
-      :placeholder="field.name"
-      :class="{ 'is-error': value && !isValidEmail(String(value)) }"
-      @update:model-value="(v: string) => emit('update', v)"
-      @blur="emit('endEdit')"
-      @keyup.enter="emit('endEdit')"
-    />
-    <a
-      v-else-if="value && isValidEmail(String(value))"
-      :href="`mailto:${value}`"
-      class="flex items-center gap-1 text-xs truncate min-h-[22px] leading-[22px]"
-      style="color: var(--zq-brand-color);"
-      @click.stop
-    >
-      <el-icon :size="12" class="flex-shrink-0"><Message /></el-icon>
-      <span class="truncate">{{ value }}</span>
-    </a>
-    <span v-else-if="value" class="block text-xs truncate min-h-[22px] leading-[22px]" style="color: var(--zq-danger-color, #f56c6c);">{{ value }}</span>
-    <span v-else class="block min-h-[22px]" />
-  </template>
-
-  <!-- Phone (enhanced with validation and call icon) -->
-  <template v-else-if="field.type === FieldType.Phone">
-    <el-input
-      v-if="editing"
-      :model-value="String(value ?? '')"
-      size="small"
-      autofocus
-      :placeholder="field.name"
-      @update:model-value="(v: string) => emit('update', v)"
-      @blur="emit('endEdit')"
-      @keyup.enter="emit('endEdit')"
-    />
-    <a
-      v-else-if="value && isValidPhone(String(value))"
-      :href="`tel:${value}`"
-      class="flex items-center gap-1 text-xs truncate min-h-[22px] leading-[22px]"
-      style="color: var(--zq-brand-color);"
-      @click.stop
-    >
-      <el-icon :size="12" class="flex-shrink-0"><PhoneFilled /></el-icon>
-      <span class="truncate">{{ value }}</span>
-    </a>
-    <span v-else-if="value" class="block text-xs truncate min-h-[22px] leading-[22px]">{{ value }}</span>
-    <span v-else class="block min-h-[22px]" />
-  </template>
-
-  <!-- Currency -->
-  <template v-else-if="field.type === FieldType.Currency">
-    <el-input
-      v-if="editing"
-      :model-value="value != null && value !== '' ? String(value) : ''"
-      size="small"
-      type="number"
-      autofocus
-      :placeholder="field.name"
-      @update:model-value="handleNumberInput"
-      @blur="emit('endEdit')"
-      @keyup.enter="emit('endEdit')"
-    />
-    <span v-else class="block min-h-[22px] leading-[22px] text-right">
-      {{ formatCurrency(value, field.currencySymbol ?? '¥') }}
-    </span>
-  </template>
-
-  <!-- AutoNumber (read-only, auto-generated) -->
-  <template v-else-if="field.type === FieldType.AutoNumber">
-    <span class="block truncate min-h-[22px] leading-[22px] tabular-nums" style="color: var(--zq-text-secondary);">
-      {{ value ?? '' }}
-    </span>
-  </template>
-
-  <!-- Location -->
-  <template v-else-if="field.type === FieldType.Location">
-    <el-input
-      v-if="editing"
-      :model-value="String(value ?? '')"
-      size="small"
-      autofocus
-      :placeholder="field.name"
-      @update:model-value="(v: string) => emit('update', v)"
-      @blur="emit('endEdit')"
-      @keyup.enter="emit('endEdit')"
-    />
-    <div v-else-if="value" class="flex items-center gap-1 min-h-[22px] text-xs truncate">
-      <span style="color: var(--zq-brand-color);">📍</span>
-      <span class="truncate">{{ value }}</span>
-    </div>
-    <span v-else class="block min-h-[22px]" />
-  </template>
-
-  <!-- CreatedBy / ModifiedBy (read-only) -->
-  <template v-else-if="field.type === FieldType.CreatedBy || field.type === FieldType.ModifiedBy">
-    <div class="flex items-center gap-1.5 min-h-[22px]">
-      <span
-        v-if="value"
-        class="inline-flex items-center justify-center rounded-full text-white text-[10px] font-medium flex-shrink-0"
-        :style="{ width: '20px', height: '20px', background: avatarColor(String(value)) }"
-      >{{ String(value).charAt(0) }}</span>
-      <span class="text-xs truncate" style="color: var(--zq-text-secondary);">{{ value ?? '' }}</span>
-    </div>
-  </template>
-
-  <!-- Attachment (FileSelector) -->
-  <template v-else-if="field.type === FieldType.Attachment">
-    <div v-if="editing" class="zq-cell-file-selector" @click.stop>
-      <FileSelector
-        :model-value="cellFileIds(value)"
-        multiple
-        display-mode="popover"
-        placeholder=""
-        source="smart-table"
-        @update:model-value="(v: any) => emit('update', v)"
-      />
-    </div>
-    <div v-else-if="value && (Array.isArray(value) ? value.length > 0 : true)" class="zq-cell-file-selector zq-cell-file-readonly" @click.stop>
-      <FileSelector
-        :model-value="cellFileIds(value)"
-        multiple
-        display-mode="popover"
-        placeholder=""
-        disabled
-      />
-    </div>
-    <span v-else class="min-h-[22px]"></span>
-  </template>
-
-  <!-- Image (ImageSelector) -->
-  <template v-else-if="field.type === FieldType.Image">
-    <div v-if="editing" class="zq-cell-image-selector" @click.stop>
-      <ImageSelector
-        :model-value="cellFileIds(value)"
-        multiple
-        :size="24"
-        :show-image-info="false"
-        placeholder=""
-        :clearable="true"
-        source="smart-table"
-        @update:model-value="(v: any) => emit('update', v)"
-      />
-    </div>
-    <div v-else-if="value && (Array.isArray(value) ? value.length > 0 : true)" class="zq-cell-image-selector zq-cell-image-readonly">
-      <ImageSelector
-        :model-value="cellFileIds(value)"
-        multiple
-        :size="24"
-        :show-image-info="false"
-        placeholder=""
-        disabled
-      />
-    </div>
-    <span v-else class="min-h-[22px]"></span>
-  </template>
-
-  <!-- RichText (WYSIWYG editor in popover) -->
-  <template v-else-if="field.type === FieldType.RichText">
-    <el-popover
-      v-if="editing"
-      :visible="true"
-      placement="bottom-start"
-      :width="420"
-      trigger="manual"
-      popper-class="zq-richtext-cell-popover"
-      :teleported="true"
-      @hide="emit('endEdit')"
-    >
-      <template #reference>
-        <span class="block truncate min-h-[22px] leading-[22px]">{{ stripHtml(String(value ?? '')) || field.name }}</span>
-      </template>
-      <div class="zq-richtext-cell-editor" @click.stop @mousedown.stop>
-        <RichTextEditor
-          :model-value="String(value ?? '')"
-          :placeholder="field.name"
-          min-height="80"
-          max-height="240"
-          :toolbar-config="{ groups: ['format', 'list', 'insert'], insert: { link: true, image: false, table: false, attachment: false, video: false } }"
-          @update:model-value="(v: string) => emit('update', v)"
-        />
-        <div class="flex justify-end mt-2">
-          <button class="zq-richtext-cell-done" @click="emit('endEdit')">{{ $t('common.confirm') }}</button>
-        </div>
-      </div>
-    </el-popover>
-    <el-tooltip v-else :content="stripHtml(String(value ?? ''))" placement="top" :show-after="800" :disabled="!value || stripHtml(String(value)).length < 20">
-      <span class="block truncate min-h-[22px] leading-[22px]">{{ stripHtml(String(value ?? '')) }}</span>
-    </el-tooltip>
-  </template>
-
-  <!-- Link -->
-  <template v-else-if="field.type === FieldType.Link">
-    <div v-if="editing" class="w-full" @click.stop>
-      <LinkRecordSelector
-        :linked-table-id="field.linkedTableId ?? ''"
-        :model-value="(value as LinkedRecordItem[] | undefined) ?? []"
-        @update:model-value="(ids: string[]) => emit('update', ids)"
-      />
-    </div>
-    <div v-else class="flex flex-wrap gap-1 min-h-[22px] items-center">
-      <el-tag
-        v-for="item in ((value as LinkedRecordItem[] | undefined) ?? [])"
-        :key="item.id"
-        size="small"
-        type="info"
-        round
-      >
-        {{ item.title || item.id }}
-      </el-tag>
-    </div>
-  </template>
-
-  <!-- Lookup (read-only) -->
-  <template v-else-if="field.type === FieldType.Lookup">
-    <div class="flex flex-wrap gap-1 min-h-[22px] items-center">
-      <template v-if="Array.isArray(value) && value.length > 0">
-        <el-tag v-for="(v, i) in (value as any[])" :key="i" size="small" type="info" round>
-          {{ v ?? '' }}
-        </el-tag>
-      </template>
-      <span v-else class="block min-h-[22px]" />
-    </div>
-  </template>
-
-  <!-- Rollup (read-only) -->
-  <template v-else-if="field.type === FieldType.Rollup">
-    <span
-      class="block truncate min-h-[22px] leading-[22px] text-right tabular-nums"
-      style="color: var(--zq-text-secondary);"
-    >
-      {{ value ?? '' }}
-    </span>
-  </template>
-
-  <!-- Formula (enhanced: format by result type) -->
-  <template v-else-if="field.type === FieldType.Formula">
-    <span
-      class="block truncate min-h-[22px] leading-[22px]"
-      :style="{
-        color: field.formulaResultType === 'boolean' ? (value === true || value === 'true' || value === 1 ? 'var(--zq-success-color, #67c23a)' : 'var(--zq-danger-color, #f56c6c)') : 'var(--zq-text-secondary)',
-        fontStyle: field.formulaResultType ? 'normal' : 'italic',
-        textAlign: field.formulaResultType === 'number' ? 'right' : undefined,
-      }"
-    >
-      {{ formatFormulaValue(value, field.formulaResultType) }}
-    </span>
-  </template>
-
-  <!-- Default text -->
-  <template v-else>
-    <el-input
-      v-if="editing"
-      :model-value="String(value ?? '')"
-      size="small"
-      autofocus
-      :placeholder="field.name"
-      @update:model-value="(v: string) => emit('update', v)"
-      @blur="emit('endEdit')"
-      @keyup.enter="emit('endEdit')"
-    />
-    <span v-else class="block truncate min-h-[22px] leading-[22px]">{{ value ?? '' }}</span>
-  </template>
-</template>
-
-<style>
-.zq-cell-selector-readonly {
-  pointer-events: none;
-}
-.zq-cell-selector-readonly .el-select,
-.zq-cell-selector-readonly .el-cascader {
-  width: 100%;
-}
-.zq-cell-selector-readonly .el-select .el-select__wrapper,
-.zq-cell-selector-readonly .el-select .el-input__wrapper {
-  box-shadow: none !important;
-  background: transparent !important;
-  border: none !important;
-  cursor: default;
-  padding: 0 !important;
-  min-height: 22px !important;
-  height: auto !important;
-}
-.zq-cell-selector-readonly .el-select .el-select__suffix,
-.zq-cell-selector-readonly .el-select .el-select__caret,
-.zq-cell-selector-readonly .el-select .el-input__suffix,
-.zq-cell-selector-readonly .el-select .el-input__prefix {
-  display: none !important;
-}
-.zq-cell-selector-readonly .el-select .el-select__placeholder.is-transparent,
-.zq-cell-selector-readonly .el-select .el-input__inner::placeholder {
-  color: transparent !important;
-}
-.zq-cell-selector-readonly .el-cascader .el-input__wrapper {
-  box-shadow: none !important;
-  background: transparent !important;
-  border: none !important;
-  cursor: default;
-  padding: 0 !important;
-  min-height: 22px !important;
-}
-.zq-cell-selector-readonly .el-cascader .el-input__suffix {
-  display: none !important;
-}
-.zq-cell-selector-readonly .el-cascader .el-input__inner::placeholder {
-  color: transparent !important;
-}
-.zq-cell-selector-readonly .el-cascader.is-disabled .el-input__inner,
-.zq-cell-selector-readonly .el-cascader.is-disabled .el-cascader__label {
-  color: var(--el-text-color-regular) !important;
-  -webkit-text-fill-color: var(--el-text-color-regular) !important;
-  cursor: default;
-}
-.zq-cell-selector-readonly .el-select .el-select__selected-item,
-.zq-cell-selector-readonly .el-select .el-tag {
-  margin: 0 2px 0 0 !important;
-}
-.zq-cell-selector-readonly .el-select .el-tag .el-tag__close {
-  display: none !important;
-}
-.zq-cell-selector-readonly .dept-selector-input {
-  cursor: default;
-}
-
-/* ImageSelector cell compact — override scoped styles */
-.zq-cell-image-selector {
-  min-height: 22px;
-  max-height: 32px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-.zq-cell-image-selector .image-selector {
-  width: auto !important;
-}
-.zq-cell-image-selector .image-selector-trigger-grid {
-  gap: 4px !important;
-  align-items: center;
-}
-.zq-cell-image-selector .image-grid-item,
-.zq-cell-image-selector .image-selector-trigger-grid .image-grid-item {
-  min-width: 24px !important;
-  max-width: 24px !important;
-  min-height: 24px !important;
-  max-height: 24px !important;
-  width: 24px !important;
-  height: 24px !important;
-  aspect-ratio: unset !important;
-  border-width: 1px !important;
-  border-radius: 4px !important;
-}
-.zq-cell-image-selector .image-grid-item.upload-placeholder,
-.zq-cell-image-selector .image-selector-trigger-grid .image-grid-item.upload-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.zq-cell-image-selector .image-grid-item .placeholder-icon {
-  font-size: 14px !important;
-  margin-top: 0 !important;
-  position: static !important;
-  transform: none !important;
-}
-.zq-cell-image-selector .image-grid-item .placeholder-text {
-  display: none !important;
-}
-.zq-cell-image-selector .image-remove-btn {
-  top: 1px !important;
-  right: 1px !important;
-  width: 14px !important;
-  height: 14px !important;
-  font-size: 8px !important;
-}
-.zq-cell-image-readonly {
-  pointer-events: none;
-}
-.zq-cell-image-readonly .image-selector-trigger-grid,
-.zq-cell-image-readonly .image-selector-trigger-grid.disabled {
-  opacity: 1 !important;
-}
-
-/* FileSelector cell compact — override scoped styles */
-.zq-cell-file-selector {
-  min-height: 22px;
-  max-height: 32px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-}
-.zq-cell-file-selector .file-selector {
-  width: 100%;
-}
-.zq-cell-file-selector .file-selector-trigger,
-.zq-cell-file-selector .file-selector .file-selector-trigger {
-  min-height: 24px !important;
-  max-height: 28px !important;
-  height: auto !important;
-  padding: 2px 4px !important;
-  border: none !important;
-  border-radius: 4px !important;
-  background: transparent !important;
-  box-shadow: none !important;
-  font-size: 12px !important;
-}
-.zq-cell-file-selector .trigger-content,
-.zq-cell-file-selector .file-selector-trigger .trigger-content {
-  gap: 4px !important;
-}
-.zq-cell-file-selector .trigger-icon,
-.zq-cell-file-selector .file-selector-trigger .trigger-icon {
-  width: 16px !important;
-  height: 16px !important;
-  font-size: 14px !important;
-}
-.zq-cell-file-selector .trigger-text,
-.zq-cell-file-selector .file-selector-trigger .trigger-text {
-  font-size: 12px !important;
-  line-height: 20px !important;
-}
-.zq-cell-file-selector .trigger-actions,
-.zq-cell-file-selector .file-selector-trigger .trigger-actions {
-  gap: 2px !important;
-}
-.zq-cell-file-selector .trigger-arrow {
-  font-size: 10px !important;
-}
-.zq-cell-file-selector .clear-btn,
-.zq-cell-file-selector .file-selector-trigger .clear-btn {
-  width: 16px !important;
-  height: 16px !important;
-  min-height: unset !important;
-  padding: 0 !important;
-}
-.zq-cell-file-selector .file-badge .el-badge__content {
-  font-size: 10px !important;
-  height: 14px !important;
-  line-height: 14px !important;
-  padding: 0 4px !important;
-}
-.zq-cell-file-readonly {
-  pointer-events: none;
-}
-.zq-cell-file-readonly .file-selector-trigger,
-.zq-cell-file-readonly .file-selector-trigger.disabled {
-  opacity: 1 !important;
-}
-.zq-cell-file-readonly .trigger-actions {
-  display: none !important;
-}
-
-/* RichText cell popover editor */
-.zq-richtext-cell-popover {
-  padding: 0 !important;
-}
-.zq-richtext-cell-popover .el-popover__body {
-  padding: 0 !important;
-}
-.zq-richtext-cell-editor {
-  padding: 8px;
-}
-.zq-richtext-cell-done {
-  padding: 4px 14px;
-  font-size: 12px;
-  border-radius: 4px;
-  border: none;
-  cursor: pointer;
-  background: var(--el-color-primary);
-  color: #fff;
-  transition: opacity 0.15s;
-}
-.zq-richtext-cell-done:hover {
-  opacity: 0.85;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/FieldConfigPopover.vue b/web/apps/web-ele/src/components/zq-smart-table/table/FieldConfigPopover.vue
deleted file mode 100644
index 9857c55..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/FieldConfigPopover.vue
+++ /dev/null
@@ -1,786 +0,0 @@
-<script setup lang="ts">
-import { reactive, computed, watch, nextTick, ref } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FieldType, FIELD_TYPE_LABELS, SELECT_COLORS, type FieldConfig, type SelectOption, type NumberFormat, type CurrencySymbol, type RollupAggregation, type FieldValidation } from '#/types/zq-smart-table/field'
-import FieldIcon from '#/components/zq-smart-table/icons/FieldIcon.vue'
-import { Plus, Delete, ArrowDown } from '@element-plus/icons-vue'
-import { getFieldListApi } from '#/api/smart-table'
-
-const props = defineProps<{
-  /** null = add mode, FieldConfig = edit mode */
-  field?: FieldConfig | null
-  anchorFieldId?: string | null
-  insertPosition?: 'left' | 'right'
-}>()
-
-const emit = defineEmits<{
-  close: []
-  saved: []
-}>()
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-const nameInputRef = ref<InstanceType<typeof import('element-plus')['ElInput']> | null>(null)
-
-const isEditMode = computed(() => !!props.field)
-
-const allTables = computed(() =>
-  tableStore.tables.map((t) => ({ id: t.id, name: t.name })),
-)
-
-const currentTableLinkFields = computed(() => {
-  const table = tableStore.activeTable
-  if (!table) return []
-  return table.fields.filter((f) => f.type === FieldType.Link)
-})
-
-const selectedLinkField = computed(() =>
-  currentTableLinkFields.value.find((f) => f.id === form.linkFieldId),
-)
-
-const linkedTableFields = ref<{ id: string; name: string; type: string }[]>([])
-
-watch(
-  () => selectedLinkField.value?.linkedTableId,
-  async (ltId) => {
-    if (!ltId) {
-      linkedTableFields.value = []
-      return
-    }
-    try {
-      const fields = await getFieldListApi(ltId)
-      linkedTableFields.value = fields
-        .filter((f: any) => f.type !== 'link' && f.type !== 'lookup' && f.type !== 'rollup')
-        .map((f: any) => ({ id: f.id, name: f.name, type: f.type }))
-    } catch {
-      linkedTableFields.value = []
-    }
-  },
-  { immediate: true },
-)
-
-const AGGREGATION_OPTIONS: { value: RollupAggregation; labelKey: string }[] = [
-  { value: 'COUNT', labelKey: 'link.aggCount' },
-  { value: 'COUNTA', labelKey: 'link.aggCounta' },
-  { value: 'SUM', labelKey: 'link.aggSum' },
-  { value: 'AVG', labelKey: 'link.aggAvg' },
-  { value: 'MIN', labelKey: 'link.aggMin' },
-  { value: 'MAX', labelKey: 'link.aggMax' },
-]
-
-function uid(): string {
-  return Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
-}
-
-const form = reactive({
-  name: '',
-  type: FieldType.Text as FieldType,
-  options: [] as SelectOption[],
-  maxRating: 5,
-  description: '',
-  numberFormat: 'number' as NumberFormat,
-  precision: 2,
-  includeTime: false,
-  currencySymbol: '¥' as CurrencySymbol,
-  formula: '',
-  formulaResultType: 'text' as 'text' | 'number' | 'date' | 'boolean',
-  multiple: false,
-  regionLevel: 'district' as 'province' | 'city' | 'district',
-  maxImageCount: 9,
-  linkedTableId: '' as string,
-  linkFieldId: '' as string,
-  lookupFieldId: '' as string,
-  rollupFieldId: '' as string,
-  aggregation: 'COUNT' as RollupAggregation,
-  validationEnabled: false,
-  validationMin: null as number | null,
-  validationMax: null as number | null,
-  validationMinLength: null as number | null,
-  validationMaxLength: null as number | null,
-  validationPattern: '' as string,
-  validationUnique: false,
-  validationMessage: '' as string,
-})
-
-watch(
-  () => props.field,
-  (f) => {
-    if (f) {
-      form.name = f.name
-      form.type = f.type
-      form.options = f.options ? JSON.parse(JSON.stringify(f.options)) : []
-      form.maxRating = f.maxRating ?? 5
-      form.description = f.description ?? ''
-      form.numberFormat = (f.numberFormat ?? 'number') as NumberFormat
-      form.precision = f.precision ?? 2
-      form.includeTime = f.includeTime ?? false
-      form.currencySymbol = (f.currencySymbol ?? '¥') as CurrencySymbol
-      form.formula = f.formula ?? ''
-      form.formulaResultType = f.formulaResultType ?? 'text'
-      form.multiple = f.multiple ?? false
-      form.regionLevel = f.regionLevel ?? 'district'
-      form.maxImageCount = f.maxImageCount ?? 9
-      form.linkedTableId = f.linkedTableId ?? ''
-      form.linkFieldId = f.linkFieldId ?? ''
-      form.lookupFieldId = f.lookupFieldId ?? ''
-      form.rollupFieldId = f.rollupFieldId ?? ''
-      form.aggregation = f.aggregation ?? 'COUNT'
-      const v = f.validation
-      form.validationEnabled = !!v
-      form.validationMin = v?.min ?? null
-      form.validationMax = v?.max ?? null
-      form.validationMinLength = v?.minLength ?? null
-      form.validationMaxLength = v?.maxLength ?? null
-      form.validationPattern = v?.pattern ?? ''
-      form.validationUnique = v?.unique ?? false
-      form.validationMessage = v?.message ?? ''
-    } else {
-      form.name = ''
-      form.type = FieldType.Text
-      form.options = []
-      form.maxRating = 5
-      form.description = ''
-      form.numberFormat = 'number'
-      form.precision = 2
-      form.includeTime = false
-      form.currencySymbol = '¥'
-      form.formula = ''
-      form.formulaResultType = 'text'
-      form.multiple = false
-      form.regionLevel = 'district'
-      form.maxImageCount = 9
-      form.linkedTableId = ''
-      form.linkFieldId = ''
-      form.lookupFieldId = ''
-      form.rollupFieldId = ''
-      form.aggregation = 'COUNT'
-      form.validationEnabled = false
-      form.validationMin = null
-      form.validationMax = null
-      form.validationMinLength = null
-      form.validationMaxLength = null
-      form.validationPattern = ''
-      form.validationUnique = false
-      form.validationMessage = ''
-    }
-    nextTick(() => nameInputRef.value?.focus())
-  },
-  { immediate: true },
-)
-
-const fieldTypeGroups = computed(() => [
-  {
-    label: t('table.fieldGroupBasic'),
-    types: [FieldType.Text, FieldType.RichText, FieldType.Number, FieldType.SingleSelect, FieldType.MultiSelect, FieldType.Date, FieldType.Checkbox],
-  },
-  {
-    label: t('table.fieldGroupAdvanced'),
-    types: [FieldType.Person, FieldType.User, FieldType.Department, FieldType.URL, FieldType.Email, FieldType.Phone, FieldType.Rating, FieldType.Progress, FieldType.Currency, FieldType.Attachment, FieldType.Image, FieldType.Location, FieldType.Region, FieldType.Formula, FieldType.Link, FieldType.Lookup, FieldType.Rollup],
-  },
-  {
-    label: t('table.fieldGroupSystem'),
-    types: [FieldType.CreatedTime, FieldType.ModifiedTime, FieldType.CreatedBy, FieldType.ModifiedBy, FieldType.AutoNumber],
-  },
-])
-
-const needsOptions = computed(() =>
-  form.type === FieldType.SingleSelect || form.type === FieldType.MultiSelect,
-)
-
-function addOption() {
-  form.options.push({
-    id: uid(),
-    label: '',
-    color: SELECT_COLORS[form.options.length % SELECT_COLORS.length],
-  })
-}
-
-function removeOption(index: number) {
-  form.options.splice(index, 1)
-}
-
-// Formula editor helpers
-const formulaInputRef = ref<any>(null)
-const showFormulaFunctions = ref(false)
-
-const insertableFields = computed(() => {
-  const table = tableStore.activeTable
-  if (!table) return []
-  return table.fields.filter(
-    (f) => f.type !== FieldType.Formula && f.id !== props.field?.id,
-  )
-})
-
-const FORMULA_FUNCTIONS = [
-  { name: 'IF', syntax: 'IF(condition, value_if_true, value_if_false)', desc: '' },
-  { name: 'AND', syntax: 'AND(expr1, expr2, ...)', desc: '' },
-  { name: 'OR', syntax: 'OR(expr1, expr2, ...)', desc: '' },
-  { name: 'NOT', syntax: 'NOT(expr)', desc: '' },
-  { name: 'CONCATENATE', syntax: 'CONCATENATE(str1, str2, ...)', desc: '' },
-  { name: 'ABS', syntax: 'ABS(number)', desc: '' },
-  { name: 'ROUND', syntax: 'ROUND(number, digits)', desc: '' },
-  { name: 'CEIL', syntax: 'CEIL(number)', desc: '' },
-  { name: 'FLOOR', syntax: 'FLOOR(number)', desc: '' },
-  { name: 'MOD', syntax: 'MOD(number, divisor)', desc: '' },
-  { name: 'POWER', syntax: 'POWER(base, exp)', desc: '' },
-  { name: 'SQRT', syntax: 'SQRT(number)', desc: '' },
-  { name: 'UPPER', syntax: 'UPPER(text)', desc: '' },
-  { name: 'LOWER', syntax: 'LOWER(text)', desc: '' },
-  { name: 'LEN', syntax: 'LEN(text)', desc: '' },
-  { name: 'LEFT', syntax: 'LEFT(text, count)', desc: '' },
-  { name: 'RIGHT', syntax: 'RIGHT(text, count)', desc: '' },
-  { name: 'MID', syntax: 'MID(text, start, length)', desc: '' },
-  { name: 'TRIM', syntax: 'TRIM(text)', desc: '' },
-  { name: 'NOW', syntax: 'NOW()', desc: '' },
-  { name: 'TODAY', syntax: 'TODAY()', desc: '' },
-  { name: 'DATEDIFF', syntax: 'DATEDIFF(date1, date2, unit)', desc: '' },
-  { name: 'DATEADD', syntax: 'DATEADD(date, amount, unit)', desc: '' },
-  { name: 'MIN', syntax: 'MIN(num1, num2, ...)', desc: '' },
-  { name: 'MAX', syntax: 'MAX(num1, num2, ...)', desc: '' },
-  { name: 'SUM', syntax: 'SUM(num1, num2, ...)', desc: '' },
-  { name: 'AVERAGE', syntax: 'AVERAGE(num1, num2, ...)', desc: '' },
-]
-
-function buildValidation(): FieldValidation | undefined {
-  if (!form.validationEnabled) return undefined
-  const v: FieldValidation = {}
-  if (form.validationMin != null) v.min = form.validationMin
-  if (form.validationMax != null) v.max = form.validationMax
-  if (form.validationMinLength != null) v.minLength = form.validationMinLength
-  if (form.validationMaxLength != null) v.maxLength = form.validationMaxLength
-  if (form.validationPattern) v.pattern = form.validationPattern
-  if (form.validationUnique) v.unique = true
-  if (form.validationMessage) v.message = form.validationMessage
-  if (Object.keys(v).length === 0) return undefined
-  return v
-}
-
-const VALIDATABLE_TYPES = new Set([
-  FieldType.Text, FieldType.Number, FieldType.URL, FieldType.Email,
-  FieldType.Phone, FieldType.Currency, FieldType.Progress, FieldType.RichText,
-  FieldType.Location,
-])
-
-const isNumericField = computed(() =>
-  [FieldType.Number, FieldType.Currency, FieldType.Progress].includes(form.type)
-)
-
-const isTextLikeField = computed(() =>
-  [FieldType.Text, FieldType.URL, FieldType.Email, FieldType.Phone, FieldType.RichText, FieldType.Location].includes(form.type)
-)
-
-function insertFieldRef(fieldName: string) {
-  form.formula += `{${fieldName}}`
-}
-
-function insertFunction(funcName: string) {
-  form.formula += `${funcName}()`
-}
-
-function handleConfirm() {
-  const name = form.name.trim()
-  if (!name) return
-
-  if (isEditMode.value && props.field) {
-    const updates: Partial<FieldConfig> = {
-      name,
-      type: form.type,
-      description: form.description || undefined,
-    }
-    if (needsOptions.value) {
-      updates.options = [...form.options]
-    }
-    if (form.type === FieldType.Rating) {
-      updates.maxRating = form.maxRating
-    }
-    if (form.type === FieldType.Number) {
-      updates.numberFormat = form.numberFormat
-      updates.precision = form.precision
-    }
-    if (form.type === FieldType.Date) {
-      updates.includeTime = form.includeTime
-    }
-    if (form.type === FieldType.Currency) {
-      updates.currencySymbol = form.currencySymbol
-      updates.precision = form.precision
-    }
-    if (form.type === FieldType.Formula) {
-      updates.formula = form.formula
-      updates.formulaResultType = form.formulaResultType
-    }
-    if (form.type === FieldType.User || form.type === FieldType.Department) {
-      updates.multiple = form.multiple
-    }
-    if (form.type === FieldType.Region) {
-      updates.regionLevel = form.regionLevel
-    }
-    if (form.type === FieldType.Image) {
-      updates.maxImageCount = form.maxImageCount
-    }
-    if (form.type === FieldType.Link) {
-      updates.linkedTableId = form.linkedTableId
-    }
-    if (form.type === FieldType.Lookup) {
-      updates.linkFieldId = form.linkFieldId
-      updates.lookupFieldId = form.lookupFieldId
-    }
-    if (form.type === FieldType.Rollup) {
-      updates.linkFieldId = form.linkFieldId
-      updates.rollupFieldId = form.rollupFieldId
-      updates.aggregation = form.aggregation
-    }
-    updates.validation = buildValidation()
-    tableStore.updateFieldFull(props.field.id, updates)
-  } else {
-    const field: FieldConfig = {
-      id: uid(),
-      name,
-      type: form.type,
-      width: 150,
-      visible: true,
-      required: false,
-      description: form.description || undefined,
-    }
-    if (needsOptions.value) {
-      field.options = [...form.options]
-    }
-    if (form.type === FieldType.Rating) {
-      field.maxRating = form.maxRating
-    }
-    if (form.type === FieldType.Number) {
-      field.numberFormat = form.numberFormat
-      field.precision = form.precision
-    }
-    if (form.type === FieldType.Date) {
-      field.includeTime = form.includeTime
-    }
-    if (form.type === FieldType.Currency) {
-      field.currencySymbol = form.currencySymbol
-      field.precision = form.precision
-    }
-    if (form.type === FieldType.Formula) {
-      field.formula = form.formula
-      field.formulaResultType = form.formulaResultType
-    }
-    if (form.type === FieldType.User || form.type === FieldType.Department) {
-      field.multiple = form.multiple
-    }
-    if (form.type === FieldType.Region) {
-      field.regionLevel = form.regionLevel
-    }
-    if (form.type === FieldType.Image) {
-      field.maxImageCount = form.maxImageCount
-    }
-    if (form.type === FieldType.Link) {
-      field.linkedTableId = form.linkedTableId
-    }
-    if (form.type === FieldType.Lookup) {
-      field.linkFieldId = form.linkFieldId
-      field.lookupFieldId = form.lookupFieldId
-    }
-    if (form.type === FieldType.Rollup) {
-      field.linkFieldId = form.linkFieldId
-      field.rollupFieldId = form.rollupFieldId
-      field.aggregation = form.aggregation
-    }
-    field.validation = buildValidation()
-    if (props.anchorFieldId && props.insertPosition) {
-      tableStore.insertField(field, props.anchorFieldId, props.insertPosition)
-    } else {
-      tableStore.addField(field)
-    }
-  }
-
-  emit('saved')
-  emit('close')
-}
-
-const configAreaRef = ref<HTMLElement | null>(null)
-
-function selectType(type: FieldType) {
-  form.type = type
-  const typesWithConfig = [
-    FieldType.SingleSelect, FieldType.MultiSelect, FieldType.Number, FieldType.Date,
-    FieldType.Rating, FieldType.Currency, FieldType.Formula,
-    FieldType.User, FieldType.Department, FieldType.Region, FieldType.Image,
-    FieldType.Link, FieldType.Lookup, FieldType.Rollup,
-  ]
-  if (typesWithConfig.includes(type)) {
-    nextTick(() => configAreaRef.value?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }))
-  }
-}
-</script>
-
-<template>
-  <div class="zq-field-config-popover" style="width: 320px;">
-    <!-- Header -->
-    <div class="px-4 pt-3 pb-2 text-xs font-semibold" style="color: var(--zq-text-secondary);">
-      {{ isEditMode ? t('table.editField') : t('table.addField') }}
-    </div>
-
-    <!-- Field Name -->
-    <div class="px-4 pb-2">
-      <el-input
-        ref="nameInputRef"
-        v-model="form.name"
-        size="small"
-        :placeholder="t('table.fieldName')"
-        @keyup.enter="handleConfirm"
-      />
-    </div>
-
-    <!-- Field Type Selector -->
-    <div class="px-4 pb-2">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('table.fieldType') }}
-      </div>
-      <div v-for="group in fieldTypeGroups" :key="group.label" class="mb-2">
-        <div class="text-[10px] mb-1 px-1" style="color: var(--zq-text-placeholder);">{{ group.label }}</div>
-        <div class="flex flex-wrap gap-1">
-          <div
-            v-for="type in group.types"
-            :key="type"
-            class="flex items-center gap-1 px-2 py-1 rounded cursor-pointer text-[11px] transition-colors"
-            :class="form.type === type ? 'zq-field-type-active' : 'hover:bg-black/4 dark:hover:bg-white/6'"
-            :style="form.type === type ? { background: 'var(--zq-brand-color-light)', color: 'var(--zq-brand-color)' } : { color: 'var(--zq-text-primary)' }"
-            @click="selectType(type)"
-          >
-            <FieldIcon :type="type" :size="12" />
-            <span class="truncate">{{ t(FIELD_TYPE_LABELS[type]) }}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Type-specific config area -->
-    <div ref="configAreaRef" />
-
-    <!-- Options for Select types -->
-    <div v-if="needsOptions" class="px-4 pb-2">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('table.fieldOptions') }}
-      </div>
-      <div v-for="(opt, idx) in form.options" :key="opt.id" class="flex items-center gap-1.5 mb-1.5">
-        <el-popover trigger="click" :width="196" placement="bottom-start">
-          <template #reference>
-            <span
-              class="w-3.5 h-3.5 rounded-full flex-shrink-0 cursor-pointer border"
-              :style="{ background: opt.color, borderColor: opt.color }"
-            />
-          </template>
-          <div class="grid grid-cols-6 gap-1.5 p-1">
-            <span
-              v-for="c in SELECT_COLORS"
-              :key="c"
-              class="w-5 h-5 rounded-full cursor-pointer border-2 transition-transform hover:scale-110"
-              :style="{ background: c, borderColor: opt.color === c ? 'var(--zq-brand-color)' : 'transparent' }"
-              @click="opt.color = c"
-            />
-          </div>
-        </el-popover>
-        <el-input v-model="opt.label" size="small" :placeholder="`${t('table.fieldOptions')} ${idx + 1}`" class="flex-1" />
-        <el-icon class="cursor-pointer flex-shrink-0 hover:opacity-70" :size="14" style="color: var(--zq-text-placeholder);" @click="removeOption(idx)">
-          <Delete />
-        </el-icon>
-      </div>
-      <div
-        class="flex items-center gap-1 text-[11px] cursor-pointer py-1 hover:opacity-70"
-        style="color: var(--zq-brand-color);"
-        @click="addOption"
-      >
-        <el-icon :size="12"><Plus /></el-icon>
-        {{ t('common.add') }}
-      </div>
-    </div>
-
-    <!-- Number format config -->
-    <div v-if="form.type === FieldType.Number" class="px-4 pb-2">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('table.numberFormat') }}
-      </div>
-      <el-select v-model="form.numberFormat" size="small" class="w-full" popper-class="zq-field-popover-select">
-        <el-option value="number" :label="t('table.numberFormatNumber')" />
-        <el-option value="currency" :label="t('table.numberFormatCurrency')" />
-        <el-option value="percent" :label="t('table.numberFormatPercent')" />
-        <el-option value="yuan" :label="t('table.numberFormatYuan')" />
-      </el-select>
-      <div class="text-[11px] font-medium mb-1.5 mt-2" style="color: var(--zq-text-placeholder);">
-        {{ t('table.precision') }}
-      </div>
-      <el-input-number v-model="form.precision" :min="0" :max="8" size="small" controls-position="right" class="w-full" />
-    </div>
-
-    <!-- Date config -->
-    <div v-if="form.type === FieldType.Date" class="px-4 pb-2">
-      <div class="flex items-center justify-between">
-        <span class="text-[11px] font-medium" style="color: var(--zq-text-placeholder);">
-          {{ t('table.includeTime') }}
-        </span>
-        <el-switch v-model="form.includeTime" size="small" />
-      </div>
-    </div>
-
-    <!-- Rating max -->
-    <div v-if="form.type === FieldType.Rating" class="px-4 pb-2">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('table.maxRating') }}
-      </div>
-      <el-input-number v-model="form.maxRating" :min="1" :max="10" size="small" controls-position="right" />
-    </div>
-
-    <!-- Currency config -->
-    <div v-if="form.type === FieldType.Currency" class="px-4 pb-2">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('table.currencySymbol') }}
-      </div>
-      <el-select v-model="form.currencySymbol" size="small" class="w-full" popper-class="zq-field-popover-select">
-        <el-option value="¥" :label="t('table.currencyCNY')" />
-        <el-option value="$" :label="t('table.currencyUSD')" />
-        <el-option value="€" :label="t('table.currencyEUR')" />
-        <el-option value="£" :label="t('table.currencyGBP')" />
-        <el-option value="₩" :label="t('table.currencyKRW')" />
-      </el-select>
-      <div class="text-[11px] font-medium mb-1.5 mt-2" style="color: var(--zq-text-placeholder);">
-        {{ t('table.precision') }}
-      </div>
-      <el-input-number v-model="form.precision" :min="0" :max="8" size="small" controls-position="right" class="w-full" />
-    </div>
-
-    <!-- Formula config -->
-    <div v-if="form.type === FieldType.Formula" class="px-4 pb-2 space-y-2">
-      <!-- Available fields -->
-      <div>
-        <div class="text-[11px] font-medium mb-1" style="color: var(--zq-text-placeholder);">
-          {{ t('formula.availableFields') }}
-        </div>
-        <div class="flex flex-wrap gap-1 max-h-[80px] overflow-auto">
-          <span
-            v-for="f in insertableFields"
-            :key="f.id"
-            class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] cursor-pointer transition-colors hover:opacity-80"
-            style="background: var(--zq-brand-color-light); color: var(--zq-brand-color);"
-            @click="insertFieldRef(f.name)"
-          >
-            {{ f.name }}
-          </span>
-        </div>
-      </div>
-      <!-- Formula input -->
-      <div>
-        <div class="text-[11px] font-medium mb-1" style="color: var(--zq-text-placeholder);">
-          {{ t('table.formulaExpression') }}
-        </div>
-        <el-input
-          ref="formulaInputRef"
-          v-model="form.formula"
-          size="small"
-          type="textarea"
-          :rows="3"
-          :placeholder="t('formula.placeholder')"
-          style="font-family: monospace;"
-        />
-      </div>
-      <!-- Function reference -->
-      <div>
-        <div
-          class="text-[11px] font-medium cursor-pointer flex items-center gap-1"
-          style="color: var(--zq-text-placeholder);"
-          @click="showFormulaFunctions = !showFormulaFunctions"
-        >
-          <el-icon :size="10"><ArrowDown /></el-icon>
-          {{ t('formula.functionReference') }}
-        </div>
-        <div
-          v-if="showFormulaFunctions"
-          class="mt-1 max-h-[150px] overflow-auto rounded p-2 space-y-0.5"
-          style="background: var(--zq-bg-secondary);"
-        >
-          <div
-            v-for="fn in FORMULA_FUNCTIONS"
-            :key="fn.name"
-            class="flex items-center text-[10px] py-0.5 cursor-pointer rounded px-1 hover:bg-[var(--zq-bg-cell-hover)] transition-colors"
-            @click="insertFunction(fn.name)"
-          >
-            <code class="font-mono" style="color: var(--zq-brand-color);">{{ fn.syntax }}</code>
-          </div>
-        </div>
-      </div>
-      <!-- Result type -->
-      <div>
-        <div class="text-[11px] font-medium mb-1" style="color: var(--zq-text-placeholder);">
-          {{ t('table.formulaResultType') }}
-        </div>
-        <el-select v-model="form.formulaResultType" size="small" class="w-full" popper-class="zq-field-popover-select">
-          <el-option value="text" :label="t('formula.resultText')" />
-          <el-option value="number" :label="t('formula.resultNumber')" />
-          <el-option value="date" :label="t('formula.resultDate')" />
-          <el-option value="boolean" :label="t('formula.resultBoolean')" />
-        </el-select>
-      </div>
-    </div>
-
-    <!-- User / Department: multiple toggle -->
-    <div v-if="form.type === FieldType.User || form.type === FieldType.Department" class="px-4 pb-2">
-      <div class="flex items-center justify-between">
-        <span class="text-[11px] font-medium" style="color: var(--zq-text-placeholder);">
-          {{ t('table.multipleSelect') }}
-        </span>
-        <el-switch v-model="form.multiple" size="small" />
-      </div>
-    </div>
-
-    <!-- Region: level config -->
-    <div v-if="form.type === FieldType.Region" class="px-4 pb-2">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('table.regionLevel') }}
-      </div>
-      <el-select v-model="form.regionLevel" size="small" class="w-full" popper-class="zq-field-popover-select">
-        <el-option value="province" :label="t('table.regionProvince')" />
-        <el-option value="city" :label="t('table.regionCity')" />
-        <el-option value="district" :label="t('table.regionDistrict')" />
-      </el-select>
-    </div>
-
-    <!-- Image: max count config -->
-    <div v-if="form.type === FieldType.Image" class="px-4 pb-2">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('table.maxImageCount') }}
-      </div>
-      <el-input-number v-model="form.maxImageCount" :min="1" :max="50" size="small" controls-position="right" class="w-full" />
-    </div>
-
-    <!-- Link config: select target table -->
-    <div v-if="form.type === FieldType.Link" class="px-4 pb-2">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('link.targetTable') }}
-      </div>
-      <el-select v-model="form.linkedTableId" size="small" class="w-full" :placeholder="t('link.selectTable')" filterable popper-class="zq-field-popover-select">
-        <el-option v-for="tb in allTables" :key="tb.id" :label="tb.name" :value="tb.id" />
-      </el-select>
-    </div>
-
-    <!-- Lookup config: select link field + lookup field -->
-    <div v-if="form.type === FieldType.Lookup" class="px-4 pb-2">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('link.linkField') }}
-      </div>
-      <el-select v-model="form.linkFieldId" size="small" class="w-full" :placeholder="t('link.selectLinkField')" popper-class="zq-field-popover-select">
-        <el-option v-for="lf in currentTableLinkFields" :key="lf.id" :label="lf.name" :value="lf.id" />
-      </el-select>
-      <template v-if="form.linkFieldId">
-        <div class="text-[11px] font-medium mb-1.5 mt-2" style="color: var(--zq-text-placeholder);">
-          {{ t('link.lookupField') }}
-        </div>
-        <el-select v-model="form.lookupFieldId" size="small" class="w-full" :placeholder="t('link.selectField')" popper-class="zq-field-popover-select">
-          <el-option v-for="f in linkedTableFields" :key="f.id" :label="f.name" :value="f.id" />
-        </el-select>
-      </template>
-    </div>
-
-    <!-- Rollup config: select link field + rollup field + aggregation -->
-    <div v-if="form.type === FieldType.Rollup" class="px-4 pb-2">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('link.linkField') }}
-      </div>
-      <el-select v-model="form.linkFieldId" size="small" class="w-full" :placeholder="t('link.selectLinkField')" popper-class="zq-field-popover-select">
-        <el-option v-for="lf in currentTableLinkFields" :key="lf.id" :label="lf.name" :value="lf.id" />
-      </el-select>
-      <template v-if="form.linkFieldId">
-        <div class="text-[11px] font-medium mb-1.5 mt-2" style="color: var(--zq-text-placeholder);">
-          {{ t('link.rollupField') }}
-        </div>
-        <el-select v-model="form.rollupFieldId" size="small" class="w-full" :placeholder="t('link.selectField')" popper-class="zq-field-popover-select">
-          <el-option v-for="f in linkedTableFields" :key="f.id" :label="f.name" :value="f.id" />
-        </el-select>
-        <div class="text-[11px] font-medium mb-1.5 mt-2" style="color: var(--zq-text-placeholder);">
-          {{ t('link.aggregation') }}
-        </div>
-        <el-select v-model="form.aggregation" size="small" class="w-full" popper-class="zq-field-popover-select">
-          <el-option v-for="agg in AGGREGATION_OPTIONS" :key="agg.value" :label="t(agg.labelKey)" :value="agg.value" />
-        </el-select>
-      </template>
-    </div>
-
-    <!-- Validation Rules -->
-    <div v-if="VALIDATABLE_TYPES.has(form.type)" class="px-4 pb-2">
-      <div class="flex items-center justify-between mb-1.5">
-        <span class="text-[11px] font-medium" style="color: var(--zq-text-placeholder);">
-          {{ t('validation.title') }}
-        </span>
-        <el-switch v-model="form.validationEnabled" size="small" />
-      </div>
-      <div v-if="form.validationEnabled" class="space-y-2 rounded p-2" style="background: var(--zq-bg-secondary);">
-        <!-- Min / Max for numeric fields -->
-        <template v-if="isNumericField">
-          <div class="flex items-center gap-2">
-            <div class="flex-1">
-              <div class="text-[10px] mb-0.5" style="color: var(--zq-text-placeholder);">{{ t('validation.min') }}</div>
-              <el-input-number v-model="form.validationMin" size="small" controls-position="right" class="w-full" :placeholder="t('validation.noLimit')" />
-            </div>
-            <div class="flex-1">
-              <div class="text-[10px] mb-0.5" style="color: var(--zq-text-placeholder);">{{ t('validation.max') }}</div>
-              <el-input-number v-model="form.validationMax" size="small" controls-position="right" class="w-full" :placeholder="t('validation.noLimit')" />
-            </div>
-          </div>
-        </template>
-        <!-- MinLength / MaxLength for text-like fields -->
-        <template v-if="isTextLikeField">
-          <div class="flex items-center gap-2">
-            <div class="flex-1">
-              <div class="text-[10px] mb-0.5" style="color: var(--zq-text-placeholder);">{{ t('validation.minLength') }}</div>
-              <el-input-number v-model="form.validationMinLength" :min="0" size="small" controls-position="right" class="w-full" />
-            </div>
-            <div class="flex-1">
-              <div class="text-[10px] mb-0.5" style="color: var(--zq-text-placeholder);">{{ t('validation.maxLength') }}</div>
-              <el-input-number v-model="form.validationMaxLength" :min="0" size="small" controls-position="right" class="w-full" />
-            </div>
-          </div>
-        </template>
-        <!-- Regex pattern -->
-        <div v-if="isTextLikeField">
-          <div class="text-[10px] mb-0.5" style="color: var(--zq-text-placeholder);">{{ t('validation.pattern') }}</div>
-          <el-input v-model="form.validationPattern" size="small" :placeholder="t('validation.patternPlaceholder')" style="font-family: monospace;" />
-        </div>
-        <!-- Unique -->
-        <div class="flex items-center justify-between">
-          <span class="text-[10px]" style="color: var(--zq-text-placeholder);">{{ t('validation.unique') }}</span>
-          <el-switch v-model="form.validationUnique" size="small" />
-        </div>
-        <!-- Custom error message -->
-        <div>
-          <div class="text-[10px] mb-0.5" style="color: var(--zq-text-placeholder);">{{ t('validation.customMessage') }}</div>
-          <el-input v-model="form.validationMessage" size="small" :placeholder="t('validation.customMessagePlaceholder')" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Description -->
-    <div class="px-4 pb-3">
-      <div class="text-[11px] font-medium mb-1.5" style="color: var(--zq-text-placeholder);">
-        {{ t('table.fieldDescription') }}
-      </div>
-      <el-input
-        v-model="form.description"
-        size="small"
-        type="textarea"
-        :rows="2"
-        :placeholder="t('table.fieldDescription')"
-      />
-    </div>
-
-    <!-- Actions -->
-    <div class="flex justify-end gap-2 px-4 pb-3">
-      <el-button size="small" @click="emit('close')">{{ t('common.cancel') }}</el-button>
-      <el-button size="small" type="primary" :disabled="!form.name.trim()" @click="handleConfirm">
-        {{ t('common.confirm') }}
-      </el-button>
-    </div>
-  </div>
-</template>
-
-<style>
-.zq-field-popover-select {
-  z-index: 10001 !important;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/FormView.vue b/web/apps/web-ele/src/components/zq-smart-table/table/FormView.vue
deleted file mode 100644
index d29e2b0..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/FormView.vue
+++ /dev/null
@@ -1,394 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, reactive, defineAsyncComponent } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FieldType } from '#/types/zq-smart-table/field'
-import type { CellValue } from '#/types/zq-smart-table/table'
-import { ElMessage } from 'element-plus'
-import { User, Warning } from '@element-plus/icons-vue'
-
-const UserSelector = defineAsyncComponent(() => import('#/components/zq-form/user-selector/user-selector.vue'))
-const DeptSelector = defineAsyncComponent(() => import('#/components/zq-form/dept-selector/dept-selector.vue'))
-const RegionSelector = defineAsyncComponent(() => import('#/components/zq-form/region-selector/region-selector.vue'))
-const RichTextEditor = defineAsyncComponent(() => import('#/components/zq-form/rich-text-editor/rich-text-editor.vue'))
-const MoneyInput = defineAsyncComponent(() => import('#/components/zq-form/money-input/money-input.vue'))
-const ImageSelector = defineAsyncComponent(() => import('#/components/zq-form/image-selector/image-selector.vue'))
-const FileSelector = defineAsyncComponent(() => import('#/components/zq-form/file-selector/file-selector.vue'))
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-const REGION_LEVEL_MAP: Record<string, number> = { province: 1, city: 2, district: 3 }
-function toRegionLevel(level?: string): number {
-  return REGION_LEVEL_MAP[level ?? 'district'] ?? 3
-}
-
-const formValues = reactive<{ [fieldId: string]: CellValue }>({})
-const submitted = ref(false)
-const validationErrors = reactive<Record<string, string>>({})
-
-const fields = computed(() => {
-  const table = tableStore.activeTable
-  if (!table) return []
-  return table.fields.filter(
-    (f) => f.type !== FieldType.CreatedTime && f.type !== FieldType.ModifiedTime
-      && f.type !== FieldType.CreatedBy && f.type !== FieldType.ModifiedBy
-      && f.type !== FieldType.AutoNumber && f.type !== FieldType.Formula
-  )
-})
-
-function isValidEmail(str: string): boolean {
-  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str)
-}
-
-function isValidPhone(str: string): boolean {
-  return /^[\d\s\-+()]{5,20}$/.test(str)
-}
-
-function isValidUrl(str: string): boolean {
-  try { new URL(str); return true } catch { return false }
-}
-
-function validateField(fieldId: string): boolean {
-  const field = fields.value.find(f => f.id === fieldId)
-  if (!field) return true
-  const val = formValues[fieldId]
-
-  if (field.required) {
-    const empty = val == null || val === '' || (Array.isArray(val) && val.length === 0)
-    if (empty) {
-      validationErrors[fieldId] = t('form.fieldRequired', { name: field.name })
-      return false
-    }
-  }
-
-  if (val && field.type === FieldType.Email && !isValidEmail(String(val))) {
-    validationErrors[fieldId] = t('form.invalidEmail')
-    return false
-  }
-  if (val && field.type === FieldType.Phone && !isValidPhone(String(val))) {
-    validationErrors[fieldId] = t('form.invalidPhone')
-    return false
-  }
-  if (val && field.type === FieldType.URL && !isValidUrl(String(val))) {
-    validationErrors[fieldId] = t('form.invalidUrl')
-    return false
-  }
-
-  delete validationErrors[fieldId]
-  return true
-}
-
-function validateAll(): boolean {
-  let valid = true
-  for (const field of fields.value) {
-    if (!validateField(field.id)) valid = false
-  }
-  return valid
-}
-
-function resetForm() {
-  for (const key of Object.keys(formValues)) {
-    delete formValues[key]
-  }
-  for (const key of Object.keys(validationErrors)) {
-    delete validationErrors[key]
-  }
-  submitted.value = false
-}
-
-function handleSubmit() {
-  if (!validateAll()) {
-    ElMessage.warning(t('form.checkFormErrors'))
-    return
-  }
-  const record = tableStore.addRecord()
-  if (!record) return
-  for (const [fieldId, value] of Object.entries(formValues)) {
-    tableStore.updateCellValue(record.id, fieldId, value)
-  }
-  ElMessage.success(t('form.submitSuccess'))
-  resetForm()
-  submitted.value = true
-  setTimeout(() => { submitted.value = false }, 2000)
-}
-
-function handleCheckboxChange(fieldId: string, val: boolean | string | number) {
-  formValues[fieldId] = !!val
-}
-
-function handleRatingChange(fieldId: string, val: number) {
-  formValues[fieldId] = val
-}
-
-function onFieldInput(fieldId: string) {
-  if (validationErrors[fieldId]) {
-    validateField(fieldId)
-  }
-}
-</script>
-
-<template>
-  <div class="h-full overflow-auto flex justify-center py-8 px-4" style="background: var(--zq-bg-secondary);">
-    <div class="w-full max-w-2xl">
-      <!-- Form Header -->
-      <div class="rounded-xl p-6 mb-6" style="background: var(--zq-brand-color);">
-        <h1 class="text-xl font-bold text-white mb-1">{{ t('form.formTitle') }}</h1>
-        <p class="text-sm text-white/70">{{ t('form.formDescription') }}</p>
-      </div>
-
-      <!-- Form Fields -->
-      <div class="space-y-4">
-        <div
-          v-for="field in fields"
-          :key="field.id"
-          class="rounded-xl p-5"
-          style="background: var(--zq-bg-cell); box-shadow: var(--zq-shadow);"
-        >
-          <label class="block text-sm font-medium mb-1" style="color: var(--zq-text-primary);">
-            {{ field.name }}
-            <span v-if="field.required" class="text-red-500 ml-0.5">*</span>
-          </label>
-          <p v-if="field.description" class="text-xs mb-2" style="color: var(--zq-text-secondary);">{{ field.description }}</p>
-
-          <!-- Text -->
-          <el-input
-            v-if="field.type === FieldType.Text"
-            :model-value="String(formValues[field.id] ?? '')"
-            :placeholder="field.name"
-            @update:model-value="(v: string) => { formValues[field.id] = v; onFieldInput(field.id) }"
-          />
-
-          <!-- Email (with validation hint) -->
-          <el-input
-            v-else-if="field.type === FieldType.Email"
-            :model-value="String(formValues[field.id] ?? '')"
-            :placeholder="field.name"
-            type="email"
-            @update:model-value="(v: string) => { formValues[field.id] = v; onFieldInput(field.id) }"
-            @blur="() => validateField(field.id)"
-          />
-
-          <!-- Phone -->
-          <el-input
-            v-else-if="field.type === FieldType.Phone"
-            :model-value="String(formValues[field.id] ?? '')"
-            :placeholder="field.name"
-            type="tel"
-            @update:model-value="(v: string) => { formValues[field.id] = v; onFieldInput(field.id) }"
-            @blur="() => validateField(field.id)"
-          />
-
-          <!-- URL -->
-          <el-input
-            v-else-if="field.type === FieldType.URL"
-            :model-value="String(formValues[field.id] ?? '')"
-            :placeholder="field.name"
-            type="url"
-            @update:model-value="(v: string) => { formValues[field.id] = v; onFieldInput(field.id) }"
-            @blur="() => validateField(field.id)"
-          />
-
-          <!-- Number -->
-          <el-input-number
-            v-else-if="field.type === FieldType.Number"
-            :model-value="Number(formValues[field.id] ?? 0)"
-            :placeholder="field.name"
-            controls-position="right"
-            style="width: 100%;"
-            @update:model-value="(v: number | undefined) => formValues[field.id] = v ?? 0"
-          />
-
-          <!-- Currency (MoneyInput) -->
-          <MoneyInput
-            v-else-if="field.type === FieldType.Currency"
-            :model-value="formValues[field.id] as number | string | undefined"
-            :currency-symbol="field.currencySymbol ?? '¥'"
-            :precision="field.precision ?? 2"
-            :placeholder="field.name"
-            show-currency
-            @update:model-value="(v: any) => formValues[field.id] = v"
-          />
-
-          <!-- Single Select -->
-          <el-select
-            v-else-if="field.type === FieldType.SingleSelect"
-            :model-value="String(formValues[field.id] ?? '')"
-            :placeholder="field.name"
-            style="width: 100%;"
-            clearable
-            @change="(v: string) => formValues[field.id] = v"
-          >
-            <el-option
-              v-for="opt in field.options"
-              :key="opt.id"
-              :label="opt.label"
-              :value="opt.id"
-            >
-              <div class="flex items-center gap-2">
-                <span class="w-2.5 h-2.5 rounded-full inline-block" :style="{ background: opt.color }" />
-                {{ opt.label }}
-              </div>
-            </el-option>
-          </el-select>
-
-          <!-- Multi Select -->
-          <el-select
-            v-else-if="field.type === FieldType.MultiSelect"
-            :model-value="(formValues[field.id] as string[]) ?? []"
-            :placeholder="field.name"
-            style="width: 100%;"
-            multiple
-            clearable
-            @change="(v: string[]) => formValues[field.id] = v"
-          >
-            <el-option
-              v-for="opt in field.options"
-              :key="opt.id"
-              :label="opt.label"
-              :value="opt.id"
-            />
-          </el-select>
-
-          <!-- Date -->
-          <el-date-picker
-            v-else-if="field.type === FieldType.Date"
-            :model-value="formValues[field.id] ? String(formValues[field.id]) : ''"
-            :type="field.includeTime ? 'datetime' : 'date'"
-            :placeholder="field.name"
-            :value-format="field.includeTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD'"
-            style="width: 100%;"
-            @update:model-value="(v: any) => formValues[field.id] = v"
-          />
-
-          <!-- Checkbox (rendered as switch) -->
-          <el-switch
-            v-else-if="field.type === FieldType.Checkbox"
-            :model-value="!!formValues[field.id]"
-            size="small"
-            @change="(val: boolean | string | number) => handleCheckboxChange(field.id, val)"
-          />
-
-          <!-- Rating -->
-          <el-rate
-            v-else-if="field.type === FieldType.Rating"
-            :model-value="Number(formValues[field.id] ?? 0)"
-            :max="field.maxRating ?? 5"
-            @update:model-value="(val: number) => handleRatingChange(field.id, val)"
-          />
-
-          <!-- Progress -->
-          <el-slider
-            v-else-if="field.type === FieldType.Progress"
-            :model-value="Number(formValues[field.id] ?? 0)"
-            :min="0"
-            :max="100"
-            @update:model-value="(v: any) => formValues[field.id] = Number(v)"
-          />
-
-          <!-- Person (text input with avatar) -->
-          <el-input
-            v-else-if="field.type === FieldType.Person"
-            :model-value="String(formValues[field.id] ?? '')"
-            :placeholder="field.name"
-            @update:model-value="(v: string) => formValues[field.id] = v"
-          >
-            <template #prefix><el-icon><User /></el-icon></template>
-          </el-input>
-
-          <!-- User (UserSelector) -->
-          <UserSelector
-            v-else-if="field.type === FieldType.User"
-            :model-value="formValues[field.id] as string | string[] | undefined"
-            :multiple="field.multiple"
-            :placeholder="field.name"
-            display-mode="select"
-            @update:model-value="(v: any) => formValues[field.id] = v"
-          />
-
-          <!-- Department (DeptSelector) -->
-          <DeptSelector
-            v-else-if="field.type === FieldType.Department"
-            :model-value="formValues[field.id] as string | string[] | undefined"
-            :multiple="field.multiple"
-            :placeholder="field.name"
-            @update:model-value="(v: any) => formValues[field.id] = v"
-          />
-
-          <!-- Region (RegionSelector) -->
-          <RegionSelector
-            v-else-if="field.type === FieldType.Region"
-            :model-value="formValues[field.id] as string[] | undefined"
-            :level="toRegionLevel(field.regionLevel)"
-            :placeholder="field.name"
-            @update:model-value="(v: any) => formValues[field.id] = v"
-          />
-
-          <!-- Image (ImageSelector) -->
-          <ImageSelector
-            v-else-if="field.type === FieldType.Image"
-            :model-value="formValues[field.id] as string | string[] | undefined"
-            multiple
-            :placeholder="field.name"
-            source="smart-table"
-            @update:model-value="(v: any) => formValues[field.id] = v"
-          />
-
-          <!-- Attachment (FileSelector) -->
-          <FileSelector
-            v-else-if="field.type === FieldType.Attachment"
-            :model-value="formValues[field.id] as string | string[] | undefined"
-            multiple
-            :placeholder="field.name"
-            show-size
-            show-icon
-            source="smart-table"
-            @update:model-value="(v: any) => formValues[field.id] = v"
-          />
-
-          <!-- RichText (RichTextEditor) -->
-          <RichTextEditor
-            v-else-if="field.type === FieldType.RichText"
-            :model-value="String(formValues[field.id] ?? '')"
-            :placeholder="field.name"
-            min-height="120"
-            max-height="300"
-            @update:model-value="(v: string) => formValues[field.id] = v"
-          />
-
-          <!-- Location -->
-          <el-input
-            v-else-if="field.type === FieldType.Location"
-            :model-value="String(formValues[field.id] ?? '')"
-            :placeholder="field.name"
-            @update:model-value="(v: string) => formValues[field.id] = v"
-          >
-            <template #prefix>📍</template>
-          </el-input>
-
-          <!-- Default -->
-          <el-input
-            v-else
-            :model-value="String(formValues[field.id] ?? '')"
-            :placeholder="field.name"
-            @update:model-value="(v: string) => formValues[field.id] = v"
-          />
-
-          <!-- Validation error -->
-          <div v-if="validationErrors[field.id]" class="flex items-center gap-1 mt-1 text-xs" style="color: var(--zq-danger-color, #f56c6c);">
-            <el-icon :size="12"><Warning /></el-icon>
-            {{ validationErrors[field.id] }}
-          </div>
-        </div>
-      </div>
-
-      <!-- Submit -->
-      <div class="mt-6 flex gap-3">
-        <el-button type="primary" size="large" @click="handleSubmit" style="min-width: 120px;">
-          {{ t('form.submit') }}
-        </el-button>
-        <el-button size="large" @click="resetForm">{{ t('common.reset') }}</el-button>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/GallerySkeleton.vue b/web/apps/web-ele/src/components/zq-smart-table/table/GallerySkeleton.vue
deleted file mode 100644
index b0a82c4..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/GallerySkeleton.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <div class="h-full overflow-hidden p-5 animate-pulse" style="background: var(--el-bg-color-page, var(--zq-bg-primary));">
-    <div class="grid gap-4" :style="{ gridTemplateColumns: `repeat(auto-fill, minmax(264px, 1fr))` }">
-      <div
-        v-for="i in count"
-        :key="i"
-        class="rounded-lg overflow-hidden"
-        style="background: var(--el-bg-color, var(--zq-bg-cell)); border: 1px solid var(--el-border-color-lighter);"
-      >
-        <!-- Cover placeholder -->
-        <div v-if="showCover" class="h-[140px]" style="background: var(--el-fill-color-light);" />
-        <!-- Body -->
-        <div class="p-4 flex flex-col gap-2.5">
-          <div class="h-4 rounded" :style="{ width: titleWidths[i - 1] + '%', background: 'var(--el-fill-color)' }" />
-          <div class="flex flex-col gap-2 mt-1">
-            <div v-for="f in fieldRows" :key="f" class="flex items-center gap-2">
-              <div class="w-[70px] h-3 rounded flex-shrink-0" style="background: var(--el-fill-color); opacity: 0.5;" />
-              <div class="h-3 rounded" :style="{ width: fieldWidths[(i - 1) * fieldRows + (f - 1)] + '%', background: 'var(--el-fill-color)', opacity: 0.6 }" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  count?: number
-  showCover?: boolean
-  fieldRows?: number
-}>(), {
-  count: 8,
-  showCover: false,
-  fieldRows: 3,
-})
-
-function seededRandom(seed: number): number {
-  const x = Math.sin(seed * 9301 + 49297) * 233280
-  return x - Math.floor(x)
-}
-
-const titleWidths = computed(() =>
-  Array.from({ length: props.count }, (_, i) => 40 + Math.floor(seededRandom(i + 1) * 45)),
-)
-
-const fieldWidths = computed(() =>
-  Array.from({ length: props.count * props.fieldRows }, (_, i) => 30 + Math.floor(seededRandom(i + 50) * 55)),
-)
-</script>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/GalleryView.vue b/web/apps/web-ele/src/components/zq-smart-table/table/GalleryView.vue
deleted file mode 100644
index a6db1ad..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/GalleryView.vue
+++ /dev/null
@@ -1,581 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FieldType, type FieldConfig } from '#/types/zq-smart-table/field'
-import type { Record as TableRecord, CellValue } from '#/types/zq-smart-table/table'
-import RecordDetailDrawer from './RecordDetailDrawer.vue'
-import FieldIcon from '#/components/zq-smart-table/icons/FieldIcon.vue'
-import { ElTag, ElProgress, ElRate, ElSwitch } from 'element-plus'
-import { Plus } from '@vben/icons'
-import dayjs from 'dayjs'
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-const detailRecordId = ref<string | null>(null)
-const showDetail = ref(false)
-
-const records = computed(() => tableStore.getFilteredRecords())
-
-const fields = computed(() => {
-  const table = tableStore.activeTable
-  const view = tableStore.activeView
-  if (!table || !view) return []
-  const ids = view.visibleFieldIds
-  if (ids.length === 0) return table.fields.filter((f) => f.visible)
-  return ids.map((id) => table.fields.find((f) => f.id === id)).filter(Boolean) as FieldConfig[]
-})
-
-const titleField = computed(() => {
-  return fields.value[0] ?? null
-})
-
-const coverField = computed(() => {
-  return fields.value.find((f) => f.type === FieldType.Image) ?? null
-})
-
-const displayFields = computed(() => {
-  return fields.value.filter((f) => {
-    if (titleField.value && f.id === titleField.value.id) return false
-    if (coverField.value && f.id === coverField.value.id) return false
-    return true
-  }).slice(0, 6)
-})
-
-function getTitle(record: TableRecord): string {
-  if (!titleField.value) return record.id
-  return String(record.values[titleField.value.id] ?? '') || t('table.noTitle')
-}
-
-function getCoverUrl(record: TableRecord): string | null {
-  if (!coverField.value) return null
-  const val = record.values[coverField.value.id]
-  if (!val) return null
-  const id = Array.isArray(val) ? val[0] : val
-  if (!id) return null
-  return `/api/file_manager/access-token/url/${id}`
-}
-
-function formatFieldValue(value: CellValue, field: FieldConfig): string {
-  if (value == null || value === '') return '-'
-  switch (field.type) {
-    case FieldType.SingleSelect: {
-      const opt = field.options?.find((o) => o.id === value)
-      return opt?.label ?? String(value)
-    }
-    case FieldType.MultiSelect: {
-      if (!Array.isArray(value)) return String(value)
-      return value.map((v) => {
-        const opt = field.options?.find((o) => o.id === v)
-        return opt?.label ?? String(v)
-      }).join(', ')
-    }
-    case FieldType.Date: {
-      const d = dayjs(String(value))
-      return d.isValid() ? d.format(field.dateFormat || 'YYYY-MM-DD') : String(value)
-    }
-    case FieldType.Checkbox:
-      return value ? t('gallery.yes') : t('gallery.no')
-    case FieldType.Number: {
-      const num = Number(value)
-      if (isNaN(num)) return String(value)
-      return num.toLocaleString('zh-CN')
-    }
-    case FieldType.Currency: {
-      const num = Number(value)
-      if (isNaN(num)) return String(value)
-      const sym = field.currencySymbol ?? '¥'
-      return `${sym}${num.toLocaleString('zh-CN', { minimumFractionDigits: 2 })}`
-    }
-    case FieldType.RichText: {
-      const tmp = document.createElement('div')
-      tmp.innerHTML = String(value)
-      const text = tmp.textContent || tmp.innerText || ''
-      return text.length > 50 ? `${text.slice(0, 50)}...` : text
-    }
-    case FieldType.Link: {
-      if (!Array.isArray(value)) return String(value)
-      return value.map((item: any) => item?.title || item?.id || '').join(', ')
-    }
-    case FieldType.Lookup: {
-      if (!Array.isArray(value)) return String(value)
-      return value.map((v: any) => String(v ?? '')).join(', ')
-    }
-    case FieldType.Rollup:
-      return String(value)
-    default:
-      return String(value)
-  }
-}
-
-function getOptionColor(value: CellValue, field: FieldConfig): string | null {
-  if (field.type !== FieldType.SingleSelect || !value) return null
-  const opt = field.options?.find((o) => o.id === value)
-  return opt?.color ?? null
-}
-
-function getProgressValue(value: CellValue): number {
-  return value != null ? Number(value) : 0
-}
-
-function progressColor(val: number): string {
-  if (val >= 90) return '#34c724'
-  if (val >= 60) return '#4e83fd'
-  if (val >= 30) return '#ff7d00'
-  return '#f54a45'
-}
-
-function openDetail(recordId: string) {
-  detailRecordId.value = recordId
-  showDetail.value = true
-}
-
-function handleAddRecord() {
-  tableStore.addRecord()
-}
-
-// ==================== Virtual Scrolling ====================
-const galleryContainerRef = ref<HTMLElement | null>(null)
-const galleryScrollTop = ref(0)
-const galleryClientHeight = ref(600)
-const galleryContainerWidth = ref(800)
-
-const ROW_HEIGHT_EST = computed(() => (coverField.value ? 350 : 220))
-const GALLERY_OVERSCAN = 2
-
-let galleryResizeObserver: ResizeObserver | null = null
-
-onMounted(() => {
-  const el = galleryContainerRef.value
-  if (el) {
-    galleryContainerWidth.value = el.clientWidth
-    galleryClientHeight.value = el.clientHeight
-    galleryResizeObserver = new ResizeObserver(() => {
-      galleryContainerWidth.value = galleryContainerRef.value?.clientWidth ?? 800
-    })
-    galleryResizeObserver.observe(el)
-  }
-})
-
-onUnmounted(() => {
-  galleryResizeObserver?.disconnect()
-})
-
-function handleGalleryScroll() {
-  const el = galleryContainerRef.value
-  if (!el) return
-  galleryScrollTop.value = el.scrollTop
-  galleryClientHeight.value = el.clientHeight
-
-  const distanceToBottom = el.scrollHeight - el.scrollTop - el.clientHeight
-  if (distanceToBottom < 300 && !tableStore.loadingMore) {
-    tableStore.loadMoreRecords()
-  }
-}
-
-const galleryCols = computed(() => {
-  const available = galleryContainerWidth.value - 40
-  return Math.max(1, Math.floor((available + 16) / (264 + 16)))
-})
-
-const galleryRowCount = computed(() => Math.ceil((records.value.length + 1) / galleryCols.value))
-
-const galleryVisibleRange = computed(() => {
-  const rh = ROW_HEIGHT_EST.value
-  const total = galleryRowCount.value
-  if (total <= 5) return { startRow: 0, endRow: total }
-  const startRaw = Math.floor(galleryScrollTop.value / rh)
-  const visible = Math.ceil(galleryClientHeight.value / rh)
-  return {
-    startRow: Math.max(0, startRaw - GALLERY_OVERSCAN),
-    endRow: Math.min(total, startRaw + visible + GALLERY_OVERSCAN),
-  }
-})
-
-const topSpacerHeight = computed(() => galleryVisibleRange.value.startRow * ROW_HEIGHT_EST.value)
-const bottomSpacerHeight = computed(() =>
-  Math.max(0, (galleryRowCount.value - galleryVisibleRange.value.endRow) * ROW_HEIGHT_EST.value),
-)
-
-const visibleGalleryRecords = computed(() => {
-  const { startRow, endRow } = galleryVisibleRange.value
-  const cols = galleryCols.value
-  const startIdx = startRow * cols
-  const endIdx = Math.min(records.value.length, endRow * cols)
-  return records.value.slice(startIdx, endIdx)
-})
-
-const showAddCard = computed(() => {
-  const { endRow } = galleryVisibleRange.value
-  return records.value.length < endRow * galleryCols.value
-})
-</script>
-
-<template>
-  <div ref="galleryContainerRef" class="gallery-container" @scroll="handleGalleryScroll">
-    <div v-if="topSpacerHeight > 0" :style="{ height: topSpacerHeight + 'px' }" />
-    <div class="gallery-grid">
-      <div
-        v-for="record in visibleGalleryRecords"
-        :key="record.id"
-        class="gallery-card"
-        @click="openDetail(record.id)"
-      >
-        <!-- 封面图 -->
-        <div v-if="coverField" class="card-cover">
-          <img
-            v-if="getCoverUrl(record)"
-            :src="getCoverUrl(record)!"
-            :alt="getTitle(record)"
-            class="cover-img"
-          />
-          <div v-else class="cover-placeholder">
-            <span class="placeholder-text">{{ getTitle(record).charAt(0) }}</span>
-          </div>
-        </div>
-
-        <!-- 卡片内容 -->
-        <div class="card-body">
-          <!-- 标题 -->
-          <div class="card-title">{{ getTitle(record) }}</div>
-
-          <!-- 字段列表 -->
-          <div class="card-fields">
-            <div
-              v-for="field in displayFields"
-              :key="field.id"
-              class="field-row"
-            >
-              <div class="field-label">
-                <FieldIcon :type="field.type" :size="12" />
-                <span>{{ field.name }}</span>
-              </div>
-              <div class="field-value">
-                <!-- 单选标签 -->
-                <template v-if="field.type === FieldType.SingleSelect && record.values[field.id]">
-                  <ElTag
-                    size="small"
-                    :color="getOptionColor(record.values[field.id], field) ?? undefined"
-                    effect="dark"
-                    round
-                    class="gallery-tag"
-                  >
-                    {{ formatFieldValue(record.values[field.id], field) }}
-                  </ElTag>
-                </template>
-
-                <!-- 多选标签 -->
-                <template v-else-if="field.type === FieldType.MultiSelect && Array.isArray(record.values[field.id])">
-                  <div class="flex flex-wrap gap-1">
-                    <ElTag
-                      v-for="optId in (record.values[field.id] as string[]).slice(0, 3)"
-                      :key="String(optId)"
-                      size="small"
-                      :color="getOptionColor(optId, field) ?? undefined"
-                      effect="dark"
-                      round
-                      class="gallery-tag"
-                    >
-                      {{ formatFieldValue(optId, field) }}
-                    </ElTag>
-                    <ElTag
-                      v-if="(record.values[field.id] as string[]).length > 3"
-                      size="small"
-                      round
-                      class="gallery-tag"
-                    >
-                      +{{ (record.values[field.id] as string[]).length - 3 }}
-                    </ElTag>
-                  </div>
-                </template>
-
-                <!-- 进度 -->
-                <template v-else-if="field.type === FieldType.Progress && record.values[field.id] != null">
-                  <ElProgress
-                    :percentage="getProgressValue(record.values[field.id])"
-                    :stroke-width="6"
-                    :color="progressColor(getProgressValue(record.values[field.id]))"
-                    :show-text="true"
-                    class="gallery-progress"
-                  />
-                </template>
-
-                <!-- 评分 -->
-                <template v-else-if="field.type === FieldType.Rating && record.values[field.id] != null">
-                  <ElRate
-                    :model-value="Number(record.values[field.id])"
-                    disabled
-                    :max="field.maxRating ?? 5"
-                    class="gallery-rate"
-                  />
-                </template>
-
-                <!-- 复选框 (switch) -->
-                <template v-else-if="field.type === FieldType.Checkbox">
-                  <ElSwitch
-                    :model-value="!!record.values[field.id]"
-                    disabled
-                    size="small"
-                  />
-                </template>
-
-                <!-- Link -->
-                <template v-else-if="field.type === FieldType.Link && Array.isArray(record.values[field.id])">
-                  <div class="flex flex-wrap gap-1">
-                    <ElTag
-                      v-for="item in (record.values[field.id] as any[]).slice(0, 3)"
-                      :key="item.id"
-                      size="small"
-                      type="info"
-                      round
-                      class="gallery-tag"
-                    >
-                      {{ item.title || item.id }}
-                    </ElTag>
-                    <ElTag
-                      v-if="(record.values[field.id] as any[]).length > 3"
-                      size="small"
-                      round
-                      class="gallery-tag"
-                    >
-                      +{{ (record.values[field.id] as any[]).length - 3 }}
-                    </ElTag>
-                  </div>
-                </template>
-
-                <!-- Lookup -->
-                <template v-else-if="field.type === FieldType.Lookup && Array.isArray(record.values[field.id])">
-                  <div class="flex flex-wrap gap-1">
-                    <ElTag
-                      v-for="(v, i) in (record.values[field.id] as any[]).slice(0, 3)"
-                      :key="i"
-                      size="small"
-                      type="info"
-                      round
-                      class="gallery-tag"
-                    >
-                      {{ v ?? '' }}
-                    </ElTag>
-                  </div>
-                </template>
-
-                <!-- 默认文本 -->
-                <template v-else>
-                  <span class="field-value-text">
-                    {{ formatFieldValue(record.values[field.id], field) }}
-                  </span>
-                </template>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- 新增卡片 -->
-      <div v-if="showAddCard" class="gallery-card gallery-card-add" @click="handleAddRecord">
-        <div class="add-content">
-          <Plus class="add-icon" />
-          <span class="add-text">{{ t('table.addRecord') }}</span>
-        </div>
-      </div>
-    </div>
-    <div v-if="bottomSpacerHeight > 0" :style="{ height: bottomSpacerHeight + 'px' }" />
-
-    <RecordDetailDrawer v-model:visible="showDetail" :record-id="detailRecordId" />
-  </div>
-</template>
-
-<style scoped>
-.gallery-container {
-  height: 100%;
-  overflow: auto;
-  padding: 20px;
-  background: var(--el-bg-color-page, var(--zq-bg-primary));
-}
-
-.gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
-  gap: 16px;
-}
-
-.gallery-card {
-  border-radius: 8px;
-  overflow: hidden;
-  cursor: pointer;
-  transition: box-shadow 0.2s, transform 0.15s;
-  background: var(--el-bg-color, var(--zq-bg-cell));
-  border: 1px solid var(--el-border-color-lighter);
-}
-
-.gallery-card:hover {
-  box-shadow: 0 4px 12px rgb(0 0 0 / 8%);
-  transform: translateY(-1px);
-}
-
-/* 封面图 */
-.card-cover {
-  width: 100%;
-  height: 160px;
-  overflow: hidden;
-  background: var(--el-fill-color-light);
-}
-
-.cover-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.cover-placeholder {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--el-color-primary-light-9);
-}
-
-.placeholder-text {
-  font-size: 36px;
-  font-weight: 600;
-  color: var(--el-color-primary);
-  opacity: 0.5;
-}
-
-/* 卡片内容 */
-.card-body {
-  padding: 14px 16px 16px;
-}
-
-.card-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  line-height: 1.5;
-  margin-bottom: 10px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-/* 字段列表 */
-.card-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.field-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  min-height: 22px;
-}
-
-.field-label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  width: 80px;
-  flex-shrink: 0;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  line-height: 22px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.field-label span {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.field-value {
-  flex: 1;
-  min-width: 0;
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-  line-height: 22px;
-}
-
-.field-value-text {
-  display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.gallery-tag {
-  border: none !important;
-  color: #fff !important;
-  max-width: 100%;
-}
-
-.gallery-tag :deep(.el-tag__content) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.gallery-progress {
-  width: 100%;
-}
-
-.gallery-progress :deep(.el-progress__text) {
-  font-size: 11px !important;
-  min-width: 30px;
-}
-
-.gallery-rate {
-  height: 22px;
-}
-
-.gallery-rate :deep(.el-rate__icon) {
-  font-size: 14px !important;
-  margin-right: 2px;
-}
-
-/* 新增卡片 */
-.gallery-card-add {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 160px;
-  border: 1px dashed var(--el-border-color);
-  background: transparent;
-}
-
-.gallery-card-add:hover {
-  border-color: var(--el-color-primary);
-  box-shadow: none;
-  transform: none;
-}
-
-.add-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  color: var(--el-text-color-placeholder);
-}
-
-.gallery-card-add:hover .add-content {
-  color: var(--el-color-primary);
-}
-
-.add-icon {
-  width: 24px;
-  height: 24px;
-}
-
-.add-text {
-  font-size: 13px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/GanttView.vue b/web/apps/web-ele/src/components/zq-smart-table/table/GanttView.vue
deleted file mode 100644
index edfa778..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/GanttView.vue
+++ /dev/null
@@ -1,1659 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FieldType } from '#/types/zq-smart-table/field'
-import type { Record as TableRecord } from '#/types/zq-smart-table/table'
-import type { DependencyType, GanttDependency } from '#/types/zq-smart-table/table'
-import dayjs from 'dayjs'
-import RecordDetailDrawer from './RecordDetailDrawer.vue'
-import { ElSelect, ElOption, ElButton, ElTooltip, ElTag } from 'element-plus'
-import { Calendar, Diamond, Flag, Link2 } from '@vben/icons'
-
-function genId() {
-  return `dep_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`
-}
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-const startFieldId = ref('')
-const endFieldId = ref('')
-const detailRecordId = ref<string | null>(null)
-const showDetail = ref(false)
-
-type ZoomLevel = 'day' | 'week' | 'month'
-const zoomLevel = ref<ZoomLevel>('day')
-
-const ZOOM_CONFIG: Record<ZoomLevel, { dayWidth: number; labelKey: string }> = {
-  day: { dayWidth: 36, labelKey: 'gantt.zoomDay' },
-  week: { dayWidth: 14, labelKey: 'gantt.zoomWeek' },
-  month: { dayWidth: 5, labelKey: 'gantt.zoomMonth' },
-}
-
-const dayWidth = computed(() => ZOOM_CONFIG[zoomLevel.value].dayWidth)
-
-const dateFields = computed(() =>
-  tableStore.activeTable?.fields.filter((f) => f.type === FieldType.Date) ?? [],
-)
-const checkboxFields = computed(() =>
-  tableStore.activeTable?.fields.filter((f) => f.type === FieldType.Checkbox) ?? [],
-)
-
-const milestoneFieldId = ref('')
-const showCriticalPath = ref(false)
-const showDependencies = ref(true)
-
-watch(
-  dateFields,
-  (fields) => {
-    if (fields.length > 0 && !startFieldId.value) startFieldId.value = fields[0]!.id
-    if (fields.length > 1 && !endFieldId.value) endFieldId.value = fields[1]?.id ?? fields[0]!.id
-    else if (fields.length === 1 && !endFieldId.value) endFieldId.value = fields[0]!.id
-  },
-  { immediate: true },
-)
-
-watch(
-  () => tableStore.activeView,
-  (view) => {
-    if (view?.ganttStartFieldId) startFieldId.value = view.ganttStartFieldId
-    if (view?.ganttEndFieldId) endFieldId.value = view.ganttEndFieldId
-    if (view?.ganttMilestoneFieldId) milestoneFieldId.value = view.ganttMilestoneFieldId
-  },
-  { immediate: true },
-)
-
-function saveFieldSelection() {
-  const view = tableStore.activeView
-  if (view) {
-    view.ganttStartFieldId = startFieldId.value
-    view.ganttEndFieldId = endFieldId.value
-    view.ganttMilestoneFieldId = milestoneFieldId.value
-  }
-}
-
-watch([startFieldId, endFieldId, milestoneFieldId], saveFieldSelection)
-
-const dependencies = computed<GanttDependency[]>(() => {
-  return tableStore.activeView?.ganttDependencies ?? []
-})
-
-function addDependency(fromId: string, toId: string, type: DependencyType) {
-  const view = tableStore.activeView
-  if (!view) return
-  if (!view.ganttDependencies) view.ganttDependencies = []
-  const exists = view.ganttDependencies.some(
-    (d) => d.fromRecordId === fromId && d.toRecordId === toId,
-  )
-  if (exists) return
-  view.ganttDependencies.push({ id: genId(), fromRecordId: fromId, toRecordId: toId, type })
-}
-
-function removeDependency(depId: string) {
-  const view = tableStore.activeView
-  if (!view || !view.ganttDependencies) return
-  view.ganttDependencies = view.ganttDependencies.filter((d) => d.id !== depId)
-}
-
-function updateDependencyType(depId: string, type: DependencyType) {
-  const view = tableStore.activeView
-  if (!view || !view.ganttDependencies) return
-  const dep = view.ganttDependencies.find((d) => d.id === depId)
-  if (dep) dep.type = type
-}
-
-const titleField = computed(() =>
-  tableStore.activeTable?.fields.find((f) => f.type === FieldType.Text),
-)
-
-const statusField = computed(() =>
-  tableStore.activeTable?.fields.find((f) => f.type === FieldType.SingleSelect),
-)
-
-const records = computed(() => tableStore.getFilteredRecords())
-
-interface GanttItem {
-  record: TableRecord
-  title: string
-  start: dayjs.Dayjs | null
-  end: dayjs.Dayjs | null
-  status?: string
-  statusColor?: string
-  durationDays: number
-  isMilestone: boolean
-}
-
-const ganttItems = computed<GanttItem[]>(() => {
-  return records.value
-    .map((r) => {
-      const startVal = r.values[startFieldId.value]
-      const endVal = r.values[endFieldId.value]
-      const start = startVal ? dayjs(String(startVal)) : null
-      const end = endVal ? dayjs(String(endVal)) : null
-      const title = titleField.value ? String(r.values[titleField.value.id] ?? '') : r.id
-
-      let status: string | undefined
-      let statusColor: string | undefined
-      if (statusField.value) {
-        const optId = String(r.values[statusField.value.id] ?? '')
-        const opt = statusField.value.options?.find((o) => o.id === optId)
-        if (opt) {
-          status = opt.label
-          statusColor = opt.color
-        }
-      }
-
-      const validStart = start?.isValid() ? start : null
-      const validEnd = end?.isValid() ? end : null
-      const effectiveEnd = validEnd ?? validStart
-      const durationDays = validStart && effectiveEnd ? effectiveEnd.diff(validStart, 'day') + 1 : 0
-
-      let isMilestone = false
-      if (milestoneFieldId.value) {
-        const val = r.values[milestoneFieldId.value]
-        isMilestone = val === true || val === 'true' || val === 1
-      } else if (startFieldId.value !== endFieldId.value) {
-        isMilestone = validStart !== null && (validEnd === null || validStart.isSame(validEnd, 'day'))
-      }
-
-      return { record: r, title, start: validStart, end: validEnd, status, statusColor, durationDays, isMilestone }
-    })
-    .filter((item) => item.start !== null)
-})
-
-const ganttItemMap = computed(() => {
-  const map = new Map<string, { item: GanttItem; index: number }>()
-  ganttItems.value.forEach((item, idx) => {
-    map.set(item.record.id, { item, index: idx })
-  })
-  return map
-})
-
-const noDateRecordCount = computed(() => {
-  return records.value.length - ganttItems.value.length
-})
-
-const timeRange = computed(() => {
-  if (ganttItems.value.length === 0) {
-    const today = dayjs()
-    return { start: today.subtract(7, 'day'), end: today.add(30, 'day') }
-  }
-  let minDate = dayjs('2099-12-31')
-  let maxDate = dayjs('2000-01-01')
-  for (const item of ganttItems.value) {
-    if (item.start && item.start.isBefore(minDate)) minDate = item.start
-    const itemEnd = item.end?.isValid() ? item.end : item.start
-    if (itemEnd && itemEnd.isAfter(maxDate)) maxDate = itemEnd
-  }
-  const paddingBefore = zoomLevel.value === 'month' ? 14 : zoomLevel.value === 'week' ? 7 : 3
-  const paddingAfter = zoomLevel.value === 'month' ? 30 : zoomLevel.value === 'week' ? 14 : 7
-  return {
-    start: minDate.subtract(paddingBefore, 'day'),
-    end: maxDate.add(paddingAfter, 'day'),
-  }
-})
-
-const totalDays = computed(() => timeRange.value.end.diff(timeRange.value.start, 'day') + 1)
-
-const headerDays = computed(() => {
-  const days: { date: dayjs.Dayjs; label: string; isToday: boolean; isWeekend: boolean }[] = []
-  const today = dayjs().startOf('day')
-  for (let i = 0; i < totalDays.value; i++) {
-    const d = timeRange.value.start.add(i, 'day')
-    days.push({
-      date: d,
-      label: d.format('DD'),
-      isToday: d.isSame(today, 'day'),
-      isWeekend: d.day() === 0 || d.day() === 6,
-    })
-  }
-  return days
-})
-
-const headerMonths = computed(() => {
-  const months: { label: string; span: number }[] = []
-  let currentMonth = ''
-  let currentSpan = 0
-  for (const day of headerDays.value) {
-    const monthLabel = day.date.format('YYYY/MM')
-    if (monthLabel !== currentMonth) {
-      if (currentMonth) months.push({ label: currentMonth, span: currentSpan })
-      currentMonth = monthLabel
-      currentSpan = 1
-    } else {
-      currentSpan++
-    }
-  }
-  if (currentMonth) months.push({ label: currentMonth, span: currentSpan })
-  return months
-})
-
-const headerWeeks = computed(() => {
-  const weeks: { label: string; span: number }[] = []
-  let currentWeek = ''
-  let currentSpan = 0
-  for (const day of headerDays.value) {
-    const weekStart = day.date.startOf('week').format('MM/DD')
-    const weekLabel = weekStart
-    if (weekLabel !== currentWeek) {
-      if (currentWeek) weeks.push({ label: currentWeek, span: currentSpan })
-      currentWeek = weekLabel
-      currentSpan = 1
-    } else {
-      currentSpan++
-    }
-  }
-  if (currentWeek) weeks.push({ label: currentWeek, span: currentSpan })
-  return weeks
-})
-
-function getBarLeft(item: GanttItem): number {
-  if (!item.start) return 0
-  return item.start.diff(timeRange.value.start, 'day') * dayWidth.value
-}
-
-function getBarWidth(item: GanttItem): number {
-  if (!item.start) return 0
-  const endDate = item.end?.isValid() ? item.end : item.start
-  const duration = Math.max(endDate!.diff(item.start, 'day') + 1, 1)
-  return Math.max(duration * dayWidth.value - 2, 8)
-}
-
-function getBarStyle(item: GanttItem) {
-  if (!item.start) return { display: 'none' }
-  if (item.isMilestone) {
-    const left = getBarLeft(item) + dayWidth.value / 2
-    return {
-      left: `${left - 12}px`,
-      width: '24px',
-    }
-  }
-  return {
-    left: `${getBarLeft(item)}px`,
-    width: `${getBarWidth(item)}px`,
-  }
-}
-
-const BAR_COLORS = ['#4e83fd', '#36b37e', '#ff991f', '#8777d9', '#00b8d9', '#ff6b6b']
-function barColor(item: GanttItem, idx: number): string {
-  return item.statusColor ?? BAR_COLORS[idx % BAR_COLORS.length]!
-}
-
-function barTooltip(item: GanttItem): string {
-  const parts = [item.title || t('table.noTitle')]
-  if (item.isMilestone) parts.push(`[${t('gantt.milestone')}]`)
-  if (item.start) parts.push(`${t('gantt.startField')}: ${item.start.format('YYYY-MM-DD')}`)
-  if (item.end?.isValid()) parts.push(`${t('gantt.endField')}: ${item.end.format('YYYY-MM-DD')}`)
-  if (item.durationDays > 0 && !item.isMilestone) parts.push(t('gantt.durationDays', { days: item.durationDays }))
-  if (item.status) parts.push(item.status)
-  return parts.join('<br>')
-}
-
-const todayOffset = computed(() => {
-  const today = dayjs().startOf('day')
-  const offset = today.diff(timeRange.value.start, 'day')
-  return offset * dayWidth.value + dayWidth.value / 2
-})
-
-const showTodayLine = computed(() => {
-  const today = dayjs().startOf('day')
-  return !today.isBefore(timeRange.value.start) && !today.isAfter(timeRange.value.end)
-})
-
-const scrollContainer = ref<HTMLElement | null>(null)
-const leftPanel = ref<HTMLElement | null>(null)
-const svgLayer = ref<SVGSVGElement | null>(null)
-
-function scrollToToday() {
-  if (!scrollContainer.value) return
-  const today = dayjs().startOf('day')
-  const offset = today.diff(timeRange.value.start, 'day')
-  scrollContainer.value.scrollLeft = Math.max(0, offset * dayWidth.value - 300)
-}
-
-function handleTimelineScroll() {
-  if (!scrollContainer.value || !leftPanel.value) return
-  leftPanel.value.scrollTop = scrollContainer.value.scrollTop
-}
-
-function handleLeftPanelScroll() {
-  if (!scrollContainer.value || !leftPanel.value) return
-  scrollContainer.value.scrollTop = leftPanel.value.scrollTop
-}
-
-function openDetail(recordId: string) {
-  detailRecordId.value = recordId
-  showDetail.value = true
-}
-
-watch(ganttItems, () => {
-  nextTick(() => setTimeout(scrollToToday, 50))
-}, { immediate: true })
-
-const ROW_HEIGHT = 40
-const HEADER_HEIGHT = 56
-
-// ========== Dependency Lines (SVG) ==========
-
-interface DepLineData {
-  dep: GanttDependency
-  path: string
-  arrowPoints: string
-  midX: number
-  midY: number
-  isCritical: boolean
-}
-
-function getAnchorPoint(item: GanttItem, rowIndex: number, side: 'start' | 'end'): { x: number; y: number } {
-  const y = HEADER_HEIGHT + rowIndex * ROW_HEIGHT + ROW_HEIGHT / 2
-
-  if (item.isMilestone) {
-    const cx = getBarLeft(item) + dayWidth.value / 2
-    return { x: cx, y }
-  }
-
-  if (side === 'start') {
-    return { x: getBarLeft(item), y }
-  }
-  return { x: getBarLeft(item) + getBarWidth(item), y }
-}
-
-function buildDepPath(fromPt: { x: number; y: number }, toPt: { x: number; y: number }): string {
-  const dx = toPt.x - fromPt.x
-  const dy = toPt.y - fromPt.y
-  const minBend = 20
-
-  if (Math.abs(dy) < 2) {
-    const cx = fromPt.x + dx / 2
-    return `M ${fromPt.x} ${fromPt.y} C ${cx} ${fromPt.y}, ${cx} ${toPt.y}, ${toPt.x} ${toPt.y}`
-  }
-
-  if (dx > minBend * 2) {
-    const cx1 = fromPt.x + dx * 0.3
-    const cx2 = fromPt.x + dx * 0.7
-    return `M ${fromPt.x} ${fromPt.y} C ${cx1} ${fromPt.y}, ${cx2} ${toPt.y}, ${toPt.x} ${toPt.y}`
-  }
-
-  const offset = minBend
-  const mx = Math.max(fromPt.x, toPt.x) + offset
-  return `M ${fromPt.x} ${fromPt.y} L ${mx} ${fromPt.y} L ${mx} ${toPt.y} L ${toPt.x} ${toPt.y}`
-}
-
-function buildArrowHead(toPt: { x: number; y: number }, approachPt: { x: number; y: number }): string {
-  const size = 6
-  const angle = Math.atan2(toPt.y - approachPt.y, toPt.x - approachPt.x)
-  const p1x = toPt.x - size * Math.cos(angle - Math.PI / 6)
-  const p1y = toPt.y - size * Math.sin(angle - Math.PI / 6)
-  const p2x = toPt.x - size * Math.cos(angle + Math.PI / 6)
-  const p2y = toPt.y - size * Math.sin(angle + Math.PI / 6)
-  return `${toPt.x},${toPt.y} ${p1x},${p1y} ${p2x},${p2y}`
-}
-
-function getApproachPoint(fromPt: { x: number; y: number }, toPt: { x: number; y: number }): { x: number; y: number } {
-  const dx = toPt.x - fromPt.x
-  const minBend = 20
-  if (Math.abs(toPt.y - fromPt.y) < 2 || dx > minBend * 2) {
-    return fromPt
-  }
-  const mx = Math.max(fromPt.x, toPt.x) + minBend
-  return { x: mx, y: toPt.y }
-}
-
-const depLines = computed<DepLineData[]>(() => {
-  if (!showDependencies.value) return []
-
-  const lines: DepLineData[] = []
-  for (const dep of dependencies.value) {
-    const fromEntry = ganttItemMap.value.get(dep.fromRecordId)
-    const toEntry = ganttItemMap.value.get(dep.toRecordId)
-    if (!fromEntry || !toEntry) continue
-
-    let fromSide: 'start' | 'end' = 'end'
-    let toSide: 'start' | 'end' = 'start'
-    switch (dep.type) {
-      case 'FS': fromSide = 'end'; toSide = 'start'; break
-      case 'FF': fromSide = 'end'; toSide = 'end'; break
-      case 'SS': fromSide = 'start'; toSide = 'start'; break
-      case 'SF': fromSide = 'start'; toSide = 'end'; break
-    }
-
-    const fromPt = getAnchorPoint(fromEntry.item, fromEntry.index, fromSide)
-    const toPt = getAnchorPoint(toEntry.item, toEntry.index, toSide)
-
-    const path = buildDepPath(fromPt, toPt)
-    const approachPt = getApproachPoint(fromPt, toPt)
-    const arrowPoints = buildArrowHead(toPt, approachPt)
-    const midX = (fromPt.x + toPt.x) / 2
-    const midY = (fromPt.y + toPt.y) / 2
-    const isCritical = criticalRecordIds.value.has(dep.fromRecordId) && criticalRecordIds.value.has(dep.toRecordId)
-
-    lines.push({ dep, path, arrowPoints, midX, midY, isCritical })
-  }
-  return lines
-})
-
-// ========== Critical Path ==========
-
-const criticalRecordIds = computed<Set<string>>(() => {
-  if (!showCriticalPath.value) return new Set()
-
-  const items = ganttItems.value
-  const deps = dependencies.value.filter((d) => d.type === 'FS')
-
-  if (items.length === 0 || deps.length === 0) return new Set()
-
-  const idToItem = new Map<string, GanttItem>()
-  items.forEach((item) => idToItem.set(item.record.id, item))
-
-  const successors = new Map<string, string[]>()
-  const predecessors = new Map<string, string[]>()
-  for (const dep of deps) {
-    if (!idToItem.has(dep.fromRecordId) || !idToItem.has(dep.toRecordId)) continue
-    if (!successors.has(dep.fromRecordId)) successors.set(dep.fromRecordId, [])
-    successors.get(dep.fromRecordId)!.push(dep.toRecordId)
-    if (!predecessors.has(dep.toRecordId)) predecessors.set(dep.toRecordId, [])
-    predecessors.get(dep.toRecordId)!.push(dep.fromRecordId)
-  }
-
-  const allIds = [...idToItem.keys()]
-  const es = new Map<string, number>()
-  const ef = new Map<string, number>()
-  const ls = new Map<string, number>()
-  const lf = new Map<string, number>()
-
-  const baseDate = timeRange.value.start
-
-  for (const id of allIds) {
-    const item = idToItem.get(id)!
-    const start = item.start ? item.start.diff(baseDate, 'day') : 0
-    es.set(id, start)
-    ef.set(id, start + Math.max(item.durationDays, 1))
-  }
-
-  const visited = new Set<string>()
-  const inStack = new Set<string>()
-  const topoOrder: string[] = []
-  let hasCycle = false
-
-  function dfs(id: string) {
-    if (hasCycle) return
-    if (inStack.has(id)) { hasCycle = true; return }
-    if (visited.has(id)) return
-    visited.add(id)
-    inStack.add(id)
-    for (const succ of successors.get(id) ?? []) {
-      dfs(succ)
-    }
-    inStack.delete(id)
-    topoOrder.unshift(id)
-  }
-
-  for (const id of allIds) dfs(id)
-
-  if (hasCycle) return new Set()
-
-  // Forward pass
-
-  for (const id of topoOrder) {
-    const preds = predecessors.get(id) ?? []
-    if (preds.length > 0) {
-      const maxPredEf = Math.max(...preds.map((p) => ef.get(p) ?? 0))
-      const item = idToItem.get(id)!
-      const dur = Math.max(item.durationDays, 1)
-      es.set(id, maxPredEf)
-      ef.set(id, maxPredEf + dur)
-    }
-  }
-
-  // Backward pass
-  const projectEnd = Math.max(...allIds.map((id) => ef.get(id) ?? 0))
-
-  for (const id of allIds) {
-    lf.set(id, projectEnd)
-    ls.set(id, projectEnd - Math.max(idToItem.get(id)!.durationDays, 1))
-  }
-
-  for (const id of [...topoOrder].reverse()) {
-    const succs = successors.get(id) ?? []
-    if (succs.length > 0) {
-      const minSuccLs = Math.min(...succs.map((s) => ls.get(s) ?? projectEnd))
-      lf.set(id, minSuccLs)
-      ls.set(id, minSuccLs - Math.max(idToItem.get(id)!.durationDays, 1))
-    }
-  }
-
-  const critical = new Set<string>()
-  for (const id of allIds) {
-    const slack = (ls.get(id) ?? 0) - (es.get(id) ?? 0)
-    if (Math.abs(slack) < 0.5) critical.add(id)
-  }
-
-  return critical
-})
-
-// ========== Bar Drag (move + resize) ==========
-
-type DragMode = 'move' | 'resize-start' | 'resize-end'
-const dragging = ref(false)
-const dragMoved = ref(false)
-const dragMode = ref<DragMode>('move')
-const dragItem = ref<GanttItem | null>(null)
-const dragStartX = ref(0)
-const dragOrigStart = ref<dayjs.Dayjs | null>(null)
-const dragOrigEnd = ref<dayjs.Dayjs | null>(null)
-let lastAppliedDelta = 0
-
-function handleBarDragStart(e: MouseEvent, item: GanttItem, mode: DragMode) {
-  if (e.button !== 0) return
-  if (item.isMilestone && mode !== 'move') return
-  e.preventDefault()
-  e.stopPropagation()
-  dragging.value = true
-  dragMoved.value = false
-  dragMode.value = mode
-  dragItem.value = item
-  dragStartX.value = e.clientX
-  dragOrigStart.value = item.start
-  dragOrigEnd.value = item.end?.isValid() ? item.end : item.start
-  lastAppliedDelta = 0
-
-  document.addEventListener('mousemove', handleBarDragMove)
-  document.addEventListener('mouseup', handleBarDragEnd)
-}
-
-function handleBarDragMove(e: MouseEvent) {
-  if (!dragging.value || !dragItem.value || !dragOrigStart.value || !dragOrigEnd.value) return
-  const dx = e.clientX - dragStartX.value
-  const daysDelta = Math.round(dx / dayWidth.value)
-  if (daysDelta === lastAppliedDelta) return
-  lastAppliedDelta = daysDelta
-  dragMoved.value = true
-
-  const recordId = dragItem.value.record.id
-
-  if (dragMode.value === 'move') {
-    const newStart = dragOrigStart.value.add(daysDelta, 'day')
-    const newEnd = dragOrigEnd.value.add(daysDelta, 'day')
-    tableStore.updateCellValue(recordId, startFieldId.value, newStart.format('YYYY-MM-DD'))
-    if (startFieldId.value !== endFieldId.value) {
-      tableStore.updateCellValue(recordId, endFieldId.value, newEnd.format('YYYY-MM-DD'))
-    }
-  } else if (dragMode.value === 'resize-start') {
-    const newStart = dragOrigStart.value.add(daysDelta, 'day')
-    if (newStart.isBefore(dragOrigEnd.value) || newStart.isSame(dragOrigEnd.value, 'day')) {
-      tableStore.updateCellValue(recordId, startFieldId.value, newStart.format('YYYY-MM-DD'))
-    }
-  } else if (dragMode.value === 'resize-end') {
-    const newEnd = dragOrigEnd.value.add(daysDelta, 'day')
-    if (newEnd.isAfter(dragOrigStart.value) || newEnd.isSame(dragOrigStart.value, 'day')) {
-      if (startFieldId.value !== endFieldId.value) {
-        tableStore.updateCellValue(recordId, endFieldId.value, newEnd.format('YYYY-MM-DD'))
-      }
-    }
-  }
-}
-
-function handleBarDragEnd() {
-  dragging.value = false
-  dragItem.value = null
-  dragOrigStart.value = null
-  dragOrigEnd.value = null
-  lastAppliedDelta = 0
-  document.removeEventListener('mousemove', handleBarDragMove)
-  document.removeEventListener('mouseup', handleBarDragEnd)
-
-  if (dragMoved.value) {
-    requestAnimationFrame(() => { dragMoved.value = false })
-  }
-}
-
-function handleBarClick(_e: MouseEvent, recordId: string) {
-  if (dragMoved.value) return
-  openDetail(recordId)
-}
-
-// ========== Dependency Linking (interactive) ==========
-
-const linkingFrom = ref<string | null>(null)
-const linkingFromSide = ref<'start' | 'end'>('end')
-const linkMousePos = ref<{ x: number; y: number } | null>(null)
-
-function startLinking(recordId: string, side: 'start' | 'end') {
-  linkingFrom.value = recordId
-  linkingFromSide.value = side
-}
-
-function handleSvgMouseMove(e: MouseEvent) {
-  if (!linkingFrom.value || !scrollContainer.value) return
-  const rect = scrollContainer.value.getBoundingClientRect()
-  linkMousePos.value = {
-    x: e.clientX - rect.left + scrollContainer.value.scrollLeft,
-    y: e.clientY - rect.top + scrollContainer.value.scrollTop,
-  }
-}
-
-function handleBarMouseUp(recordId: string) {
-  if (!linkingFrom.value || linkingFrom.value === recordId) {
-    cancelLinking()
-    return
-  }
-  const depType: DependencyType = linkingFromSide.value === 'end' ? 'FS' : 'SS'
-  addDependency(linkingFrom.value, recordId, depType)
-  cancelLinking()
-}
-
-function cancelLinking() {
-  linkingFrom.value = null
-  linkMousePos.value = null
-}
-
-const linkingLinePath = computed(() => {
-  if (!linkingFrom.value || !linkMousePos.value) return ''
-  const entry = ganttItemMap.value.get(linkingFrom.value)
-  if (!entry) return ''
-  const fromPt = getAnchorPoint(entry.item, entry.index, linkingFromSide.value)
-  return `M ${fromPt.x} ${fromPt.y} L ${linkMousePos.value.x} ${linkMousePos.value.y}`
-})
-
-// ========== Dependency context menu ==========
-const depContextMenu = ref<{ visible: boolean; x: number; y: number; dep: GanttDependency | null }>({
-  visible: false, x: 0, y: 0, dep: null,
-})
-
-function showDepContextMenu(e: MouseEvent, dep: GanttDependency) {
-  e.preventDefault()
-  e.stopPropagation()
-  if (!scrollContainer.value) return
-  const rect = scrollContainer.value.getBoundingClientRect()
-  depContextMenu.value = {
-    visible: true,
-    x: e.clientX - rect.left + scrollContainer.value.scrollLeft,
-    y: e.clientY - rect.top + scrollContainer.value.scrollTop,
-    dep,
-  }
-}
-
-function hideDepContextMenu() {
-  depContextMenu.value.visible = false
-}
-
-function handleDepTypeChange(type: DependencyType) {
-  if (depContextMenu.value.dep) {
-    updateDependencyType(depContextMenu.value.dep.id, type)
-  }
-  hideDepContextMenu()
-}
-
-function handleDepDelete() {
-  if (depContextMenu.value.dep) {
-    removeDependency(depContextMenu.value.dep.id)
-  }
-  hideDepContextMenu()
-}
-
-onMounted(() => {
-  document.addEventListener('click', hideDepContextMenu)
-  document.addEventListener('mouseup', handleGlobalMouseUp)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('click', hideDepContextMenu)
-  document.removeEventListener('mouseup', handleGlobalMouseUp)
-  document.removeEventListener('mousemove', handleBarDragMove)
-  document.removeEventListener('mouseup', handleBarDragEnd)
-})
-
-function handleGlobalMouseUp() {
-  if (linkingFrom.value) cancelLinking()
-}
-</script>
-
-<template>
-  <div class="gantt-root">
-    <!-- Toolbar -->
-    <div class="gantt-toolbar">
-      <div class="toolbar-left">
-        <div class="field-picker">
-          <span class="field-label">{{ t('gantt.startField') }}</span>
-          <ElSelect v-model="startFieldId" size="small" class="field-select">
-            <ElOption v-for="f in dateFields" :key="f.id" :value="f.id" :label="f.name" />
-          </ElSelect>
-        </div>
-        <div class="field-picker">
-          <span class="field-label">{{ t('gantt.endField') }}</span>
-          <ElSelect v-model="endFieldId" size="small" class="field-select">
-            <ElOption v-for="f in dateFields" :key="f.id" :value="f.id" :label="f.name" />
-          </ElSelect>
-        </div>
-        <div class="field-picker">
-          <span class="field-label">{{ t('gantt.milestoneField') }}</span>
-          <ElSelect v-model="milestoneFieldId" size="small" class="field-select" clearable :placeholder="t('gantt.autoDetect')">
-            <ElOption v-for="f in checkboxFields" :key="f.id" :value="f.id" :label="f.name" />
-          </ElSelect>
-        </div>
-      </div>
-      <div class="toolbar-right">
-        <ElTooltip :content="t('gantt.toggleDependencies')" placement="bottom" :show-after="300">
-          <button class="gantt-icon-btn" :class="{ active: showDependencies }" @click="showDependencies = !showDependencies">
-            <Link2 class="gantt-icon-14" />
-          </button>
-        </ElTooltip>
-        <ElTooltip :content="t('gantt.toggleCriticalPath')" placement="bottom" :show-after="300">
-          <button class="gantt-icon-btn" :class="{ active: showCriticalPath }" @click="showCriticalPath = !showCriticalPath">
-            <Flag class="gantt-icon-14" />
-          </button>
-        </ElTooltip>
-        <div class="zoom-group">
-          <button
-            v-for="z in (['day', 'week', 'month'] as ZoomLevel[])"
-            :key="z"
-            class="zoom-btn"
-            :class="{ active: zoomLevel === z }"
-            @click="zoomLevel = z"
-          >
-            {{ t(ZOOM_CONFIG[z].labelKey) }}
-          </button>
-        </div>
-        <ElButton size="small" text class="today-btn" @click="scrollToToday">
-          <Calendar class="today-icon" />
-          {{ t('calendar.today') }}
-        </ElButton>
-      </div>
-    </div>
-
-    <!-- Empty state -->
-    <div v-if="dateFields.length === 0" class="gantt-empty">
-      {{ t('gantt.noDateField') }}
-    </div>
-
-    <!-- Gantt body -->
-    <div v-else class="gantt-body">
-      <!-- Left panel -->
-      <div class="gantt-left">
-        <div class="left-header">
-          <span class="left-header-text">{{ t('gantt.taskName') }}</span>
-          <span v-if="noDateRecordCount > 0" class="no-date-hint">
-            {{ t('gantt.noDateCount', { count: noDateRecordCount }) }}
-          </span>
-        </div>
-        <div ref="leftPanel" class="left-body" @scroll="handleLeftPanelScroll">
-          <div
-            v-for="item in ganttItems"
-            :key="item.record.id"
-            class="left-row"
-            :class="{ 'is-critical': showCriticalPath && criticalRecordIds.has(item.record.id) }"
-            @click="openDetail(item.record.id)"
-          >
-            <Diamond v-if="item.isMilestone" class="milestone-icon" />
-            <ElTag
-              v-if="item.status"
-              :color="item.statusColor"
-              effect="dark"
-              round
-              size="small"
-              class="status-tag"
-            >
-              {{ item.status }}
-            </ElTag>
-            <span class="task-title">{{ item.title || t('table.noTitle') }}</span>
-          </div>
-        </div>
-      </div>
-
-      <!-- Right timeline -->
-      <div
-        ref="scrollContainer"
-        class="gantt-right"
-        @scroll="handleTimelineScroll"
-        @mousemove="handleSvgMouseMove"
-      >
-        <div class="timeline-canvas" :style="{ width: totalDays * dayWidth + 'px' }">
-          <!-- Month row -->
-          <div class="timeline-header month-row">
-            <div
-              v-for="m in headerMonths"
-              :key="m.label"
-              class="month-cell"
-              :style="{ width: m.span * dayWidth + 'px' }"
-            >
-              {{ m.label }}
-            </div>
-          </div>
-
-          <!-- Day/week row -->
-          <div class="timeline-header day-row">
-            <template v-if="zoomLevel === 'day'">
-              <div
-                v-for="day in headerDays"
-                :key="day.date.valueOf()"
-                class="day-cell"
-                :class="{ 'is-today': day.isToday, 'is-weekend': day.isWeekend }"
-                :style="{ width: dayWidth + 'px' }"
-              >
-                {{ day.label }}
-              </div>
-            </template>
-            <template v-else>
-              <div
-                v-for="w in headerWeeks"
-                :key="w.label"
-                class="week-cell"
-                :style="{ width: w.span * dayWidth + 'px' }"
-              >
-                {{ w.label }}
-              </div>
-            </template>
-          </div>
-
-          <!-- Background columns (weekends + today) -->
-          <div class="bg-columns" :style="{ height: ganttItems.length * ROW_HEIGHT + 'px' }">
-            <div
-              v-for="day in headerDays"
-              :key="day.date.valueOf()"
-              class="bg-col"
-              :class="{ 'bg-weekend': day.isWeekend, 'bg-today': day.isToday }"
-              :style="{ left: day.date.diff(timeRange.start, 'day') * dayWidth + 'px', width: dayWidth + 'px' }"
-            />
-          </div>
-
-          <!-- Today line -->
-          <div
-            v-if="showTodayLine"
-            class="today-line"
-            :style="{ left: todayOffset + 'px', height: ganttItems.length * ROW_HEIGHT + HEADER_HEIGHT + 'px' }"
-          >
-            <div class="today-marker">{{ t('gantt.todayMark') }}</div>
-          </div>
-
-          <!-- SVG dependency layer -->
-          <svg
-            ref="svgLayer"
-            class="dep-svg-layer"
-            :style="{
-              width: totalDays * dayWidth + 'px',
-              height: ganttItems.length * ROW_HEIGHT + HEADER_HEIGHT + 'px',
-            }"
-          >
-            <!-- Dependency arrows -->
-            <g v-for="line in depLines" :key="line.dep.id">
-              <path
-                :d="line.path"
-                class="dep-line"
-                :class="{ 'dep-critical': line.isCritical && showCriticalPath }"
-                @contextmenu="showDepContextMenu($event, line.dep)"
-              />
-              <polygon
-                :points="line.arrowPoints"
-                class="dep-arrow"
-                :class="{ 'dep-critical': line.isCritical && showCriticalPath }"
-              />
-              <text
-                :x="line.midX"
-                :y="line.midY - 6"
-                class="dep-type-label"
-              >{{ line.dep.type }}</text>
-            </g>
-
-            <!-- Linking line (in-progress) -->
-            <path
-              v-if="linkingLinePath"
-              :d="linkingLinePath"
-              class="dep-linking-line"
-            />
-          </svg>
-
-          <!-- Data rows -->
-          <div class="timeline-rows">
-            <div
-              v-for="(item, idx) in ganttItems"
-              :key="item.record.id"
-              class="timeline-row"
-              :class="{ 'is-critical-row': showCriticalPath && criticalRecordIds.has(item.record.id) }"
-              :style="{ height: ROW_HEIGHT + 'px' }"
-              @mouseup="handleBarMouseUp(item.record.id)"
-            >
-              <ElTooltip
-                :content="barTooltip(item)"
-                placement="top"
-                :show-after="400"
-                raw-content
-              >
-                <div
-                  v-if="item.isMilestone"
-                  class="gantt-milestone"
-                  :style="getBarStyle(item)"
-                  :class="{ 'gantt-bar-dragging': dragging && dragItem?.record.id === item.record.id }"
-                  @click.stop="handleBarClick($event, item.record.id)"
-                  @mousedown.stop.prevent="handleBarDragStart($event, item, 'move')"
-                >
-                  <div
-                    class="link-handle link-handle-milestone-left"
-                    @mousedown.stop.prevent="startLinking(item.record.id, 'start')"
-                  />
-                  <div class="milestone-diamond" :style="{ background: barColor(item, idx) }" />
-                  <div
-                    class="link-handle link-handle-milestone-right"
-                    @mousedown.stop.prevent="startLinking(item.record.id, 'end')"
-                  />
-                </div>
-                <div
-                  v-else
-                  class="gantt-bar"
-                  :class="{
-                    'gantt-bar-critical': showCriticalPath && criticalRecordIds.has(item.record.id),
-                    'gantt-bar-dragging': dragging && dragItem?.record.id === item.record.id,
-                  }"
-                  :style="{ ...getBarStyle(item), background: barColor(item, idx) }"
-                  @click.stop="handleBarClick($event, item.record.id)"
-                  @mousedown.stop.prevent="handleBarDragStart($event, item, 'move')"
-                >
-                  <!-- Resize handle left -->
-                  <div
-                    class="resize-handle resize-handle-left"
-                    @mousedown.stop.prevent="handleBarDragStart($event, item, 'resize-start')"
-                  />
-                  <!-- Link handle left -->
-                  <div
-                    class="link-handle link-handle-left"
-                    @mousedown.stop.prevent="startLinking(item.record.id, 'start')"
-                  />
-                  <span v-if="dayWidth >= 14" class="bar-text">{{ item.title }}</span>
-                  <!-- Link handle right -->
-                  <div
-                    class="link-handle link-handle-right"
-                    @mousedown.stop.prevent="startLinking(item.record.id, 'end')"
-                  />
-                  <!-- Resize handle right -->
-                  <div
-                    class="resize-handle resize-handle-right"
-                    @mousedown.stop.prevent="handleBarDragStart($event, item, 'resize-end')"
-                  />
-                </div>
-              </ElTooltip>
-            </div>
-          </div>
-        </div>
-
-        <!-- Dependency context menu -->
-        <div
-          v-if="depContextMenu.visible"
-          class="dep-context-menu"
-          :style="{ left: depContextMenu.x + 'px', top: depContextMenu.y + 'px' }"
-          @click.stop
-        >
-          <div class="dep-menu-title">{{ t('gantt.depType') }}</div>
-          <div
-            v-for="dt in (['FS', 'FF', 'SS', 'SF'] as DependencyType[])"
-            :key="dt"
-            class="dep-menu-item"
-            :class="{ active: depContextMenu.dep?.type === dt }"
-            @click="handleDepTypeChange(dt)"
-          >
-            <span class="dep-type-tag">{{ dt }}</span>
-            <span class="dep-type-desc">{{ t(`gantt.depDesc_${dt}`) }}</span>
-          </div>
-          <div class="dep-menu-divider" />
-          <div class="dep-menu-item dep-menu-delete" @click="handleDepDelete">
-            {{ t('gantt.deleteDep') }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <RecordDetailDrawer v-model:visible="showDetail" :record-id="detailRecordId" />
-  </div>
-</template>
-
-<style scoped>
-.gantt-root {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-  background: var(--el-bg-color, var(--zq-bg-primary));
-}
-
-/* ===== Toolbar ===== */
-.gantt-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-  flex-shrink: 0;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.toolbar-left {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
-}
-
-.toolbar-right {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.field-picker {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.field-label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  white-space: nowrap;
-}
-
-.field-select {
-  width: 130px;
-}
-
-.gantt-icon-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  border: 1px solid var(--el-border-color);
-  background: var(--el-bg-color);
-  color: var(--el-text-color-regular);
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.gantt-icon-btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.gantt-icon-btn.active {
-  background: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary-light-5);
-  color: var(--el-color-primary);
-}
-
-.gantt-icon-14 {
-  width: 14px;
-  height: 14px;
-}
-
-.zoom-group {
-  display: flex;
-  border: 1px solid var(--el-border-color);
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.zoom-btn {
-  padding: 4px 12px;
-  font-size: 12px;
-  cursor: pointer;
-  border: none;
-  background: var(--el-bg-color);
-  color: var(--el-text-color-regular);
-  transition: all 0.15s;
-  outline: none;
-}
-
-.zoom-btn:not(:last-child) {
-  border-right: 1px solid var(--el-border-color);
-}
-
-.zoom-btn.active {
-  background: var(--el-color-primary);
-  color: #fff;
-}
-
-.zoom-btn:hover:not(.active) {
-  background: var(--el-fill-color-light);
-}
-
-.today-btn {
-  font-size: 12px;
-}
-
-.today-icon {
-  width: 14px;
-  height: 14px;
-  margin-right: 4px;
-}
-
-/* ===== Empty ===== */
-.gantt-empty {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--el-text-color-placeholder);
-  font-size: 14px;
-}
-
-/* ===== Body layout ===== */
-.gantt-body {
-  flex: 1;
-  display: flex;
-  overflow: hidden;
-}
-
-/* ===== Left panel ===== */
-.gantt-left {
-  width: 260px;
-  flex-shrink: 0;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--el-border-color-lighter);
-  z-index: 2;
-  background: var(--el-bg-color, var(--zq-bg-primary));
-}
-
-.left-header {
-  height: 56px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  padding: 0 14px 8px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-  flex-shrink: 0;
-}
-
-.left-header-text {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--el-text-color-secondary);
-}
-
-.no-date-hint {
-  font-size: 11px;
-  color: var(--el-text-color-placeholder);
-}
-
-.left-body {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.left-body::-webkit-scrollbar {
-  width: 0;
-  display: none;
-}
-
-.left-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 14px;
-  height: 40px;
-  cursor: pointer;
-  border-bottom: 1px solid var(--el-border-color-extra-light);
-  transition: background 0.15s;
-}
-
-.left-row:hover {
-  background: var(--el-fill-color-light);
-}
-
-.left-row.is-critical {
-  background: var(--el-color-danger-light-9);
-}
-
-.left-row.is-critical:hover {
-  background: var(--el-color-danger-light-8);
-}
-
-.milestone-icon {
-  width: 14px;
-  height: 14px;
-  color: var(--el-color-warning);
-  flex-shrink: 0;
-}
-
-.status-tag {
-  border: none !important;
-  color: #fff !important;
-  font-size: 10px !important;
-  padding: 0 6px !important;
-  flex-shrink: 0;
-}
-
-.task-title {
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ===== Right timeline ===== */
-.gantt-right {
-  flex: 1;
-  overflow: auto;
-  position: relative;
-}
-
-.timeline-canvas {
-  position: relative;
-  min-height: 100%;
-}
-
-/* ===== Timeline header ===== */
-.timeline-header {
-  display: flex;
-  position: sticky;
-  top: 0;
-  z-index: 3;
-  background: var(--el-bg-color, var(--zq-bg-header));
-}
-
-.month-row {
-  height: 28px;
-}
-
-.month-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--el-text-color-secondary);
-  border-bottom: 1px solid var(--el-border-color-extra-light);
-  border-right: 1px solid var(--el-border-color-extra-light);
-  box-sizing: border-box;
-}
-
-.day-row {
-  height: 28px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.day-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  color: var(--el-text-color-secondary);
-  box-sizing: border-box;
-}
-
-.day-cell.is-today {
-  color: var(--el-color-primary);
-  font-weight: 700;
-  background: var(--el-color-primary-light-9);
-}
-
-.day-cell.is-weekend {
-  color: var(--el-text-color-placeholder);
-  background: var(--el-fill-color-lighter);
-}
-
-.week-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-  color: var(--el-text-color-secondary);
-  border-right: 1px solid var(--el-border-color-extra-light);
-  box-sizing: border-box;
-}
-
-/* ===== Background columns ===== */
-.bg-columns {
-  position: absolute;
-  top: 56px;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  z-index: 0;
-}
-
-.bg-col {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-}
-
-.bg-col.bg-weekend {
-  background: var(--el-fill-color-lighter);
-}
-
-.bg-col.bg-today {
-  background: var(--el-color-primary-light-9);
-}
-
-/* ===== Today line ===== */
-.today-line {
-  position: absolute;
-  top: 0;
-  width: 2px;
-  background: var(--el-color-primary);
-  z-index: 4;
-  pointer-events: none;
-}
-
-.today-marker {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  background: var(--el-color-primary);
-  color: #fff;
-  font-size: 10px;
-  padding: 2px 8px;
-  border-radius: 0 0 4px 4px;
-  white-space: nowrap;
-  line-height: 1.4;
-  font-weight: 500;
-}
-
-/* ===== SVG dependency layer ===== */
-.dep-svg-layer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 5;
-  pointer-events: none;
-  overflow: visible;
-}
-
-.dep-svg-layer > g {
-  pointer-events: auto;
-}
-
-.dep-line {
-  fill: none;
-  stroke: var(--el-text-color-placeholder);
-  stroke-width: 1.5;
-  pointer-events: stroke;
-  cursor: pointer;
-  transition: stroke 0.15s;
-}
-
-.dep-line:hover {
-  stroke: var(--el-color-primary);
-  stroke-width: 2.5;
-}
-
-.dep-line.dep-critical {
-  stroke: var(--el-color-danger);
-  stroke-width: 2;
-}
-
-.dep-arrow {
-  fill: var(--el-text-color-placeholder);
-  pointer-events: none;
-  transition: fill 0.15s;
-}
-
-.dep-arrow.dep-critical {
-  fill: var(--el-color-danger);
-}
-
-.dep-type-label {
-  font-size: 9px;
-  fill: var(--el-text-color-secondary);
-  pointer-events: none;
-  text-anchor: middle;
-  font-weight: 500;
-}
-
-.dep-linking-line {
-  fill: none;
-  stroke: var(--el-color-primary);
-  stroke-width: 2;
-  stroke-dasharray: 6 3;
-  pointer-events: none;
-}
-
-/* ===== Data rows ===== */
-.timeline-rows {
-  position: relative;
-  z-index: 1;
-}
-
-.timeline-row {
-  position: relative;
-  border-bottom: 1px solid var(--el-border-color-extra-light);
-}
-
-.timeline-row.is-critical-row {
-  background: var(--el-color-danger-light-9);
-}
-
-/* ===== Gantt bar ===== */
-.gantt-bar {
-  position: absolute;
-  top: 8px;
-  height: 24px;
-  border-radius: 4px;
-  cursor: grab;
-  display: flex;
-  align-items: center;
-  transition: opacity 0.15s, box-shadow 0.15s;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
-  z-index: 1;
-}
-
-.gantt-bar:active {
-  cursor: grabbing;
-}
-
-.gantt-bar:hover {
-  opacity: 0.9;
-  box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
-}
-
-.gantt-bar-critical {
-  box-shadow: 0 0 0 2px var(--el-color-danger), 0 1px 3px rgb(0 0 0 / 12%);
-}
-
-.bar-text {
-  color: #fff;
-  font-size: 11px;
-  font-weight: 500;
-  padding: 0 8px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 24px;
-  flex: 1;
-  min-width: 0;
-}
-
-/* ===== Milestone diamond ===== */
-.gantt-milestone {
-  position: absolute;
-  top: 8px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 2;
-  cursor: grab;
-}
-
-.gantt-milestone:active {
-  cursor: grabbing;
-}
-
-.milestone-diamond {
-  width: 16px;
-  height: 16px;
-  transform: rotate(45deg);
-  border-radius: 2px;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
-  transition: transform 0.15s;
-}
-
-.gantt-milestone:hover .milestone-diamond {
-  transform: rotate(45deg) scale(1.15);
-  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
-}
-
-/* ===== Link handles ===== */
-.link-handle {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: #fff;
-  border: 2px solid var(--el-color-primary);
-  opacity: 0;
-  cursor: crosshair;
-  z-index: 3;
-  transition: opacity 0.15s;
-}
-
-.gantt-bar:hover .link-handle,
-.gantt-milestone:hover .link-handle {
-  opacity: 1;
-}
-
-.link-handle-left {
-  left: -5px;
-}
-
-.link-handle-right {
-  right: -5px;
-}
-
-.link-handle-milestone-left {
-  left: -6px;
-}
-
-.link-handle-milestone-right {
-  right: -6px;
-}
-
-/* ===== Resize handles ===== */
-.resize-handle {
-  position: absolute;
-  top: 0;
-  width: 6px;
-  height: 100%;
-  cursor: col-resize;
-  z-index: 5;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-.gantt-bar:hover .resize-handle {
-  opacity: 1;
-}
-
-.resize-handle::after {
-  content: '';
-  position: absolute;
-  top: 4px;
-  bottom: 4px;
-  width: 2px;
-  border-radius: 1px;
-  background: rgba(255, 255, 255, 0.7);
-}
-
-.resize-handle-left {
-  left: 0;
-  border-radius: 4px 0 0 4px;
-}
-
-.resize-handle-left::after {
-  left: 2px;
-}
-
-.resize-handle-right {
-  right: 0;
-  border-radius: 0 4px 4px 0;
-}
-
-.resize-handle-right::after {
-  right: 2px;
-}
-
-.gantt-bar-dragging {
-  opacity: 0.85;
-  box-shadow: 0 3px 10px rgb(0 0 0 / 25%);
-  z-index: 5;
-}
-
-/* ===== Dependency context menu ===== */
-.dep-context-menu {
-  position: absolute;
-  z-index: 100;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
-  padding: 4px 0;
-  min-width: 200px;
-}
-
-.dep-menu-title {
-  padding: 6px 12px;
-  font-size: 11px;
-  color: var(--el-text-color-placeholder);
-  font-weight: 500;
-}
-
-.dep-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  font-size: 13px;
-  cursor: pointer;
-  transition: background 0.15s;
-  color: var(--el-text-color-primary);
-}
-
-.dep-menu-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.dep-menu-item.active {
-  color: var(--el-color-primary);
-}
-
-.dep-type-tag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 18px;
-  border-radius: 3px;
-  font-size: 10px;
-  font-weight: 700;
-  background: var(--el-fill-color);
-  color: var(--el-text-color-secondary);
-}
-
-.dep-menu-item.active .dep-type-tag {
-  background: var(--el-color-primary-light-8);
-  color: var(--el-color-primary);
-}
-
-.dep-type-desc {
-  font-size: 12px;
-}
-
-.dep-menu-divider {
-  height: 1px;
-  background: var(--el-border-color-extra-light);
-  margin: 4px 0;
-}
-
-.dep-menu-delete {
-  color: var(--el-color-danger);
-}
-
-.dep-menu-delete:hover {
-  background: var(--el-color-danger-light-9);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/KanbanSkeleton.vue b/web/apps/web-ele/src/components/zq-smart-table/table/KanbanSkeleton.vue
deleted file mode 100644
index b0dc3d4..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/KanbanSkeleton.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div class="flex flex-col h-full animate-pulse">
-    <!-- Toolbar skeleton -->
-    <div class="flex items-center justify-between px-4 py-2" style="border-bottom: 1px solid var(--el-border-color-lighter);">
-      <div class="flex items-center gap-2">
-        <div class="w-16 h-3.5 rounded" style="background: var(--el-fill-color);" />
-        <div class="w-20 h-3.5 rounded" style="background: var(--el-fill-color);" />
-      </div>
-      <div class="w-24 h-7 rounded" style="background: var(--el-fill-color);" />
-    </div>
-    <!-- Columns -->
-    <div class="flex gap-3 p-4 flex-1 overflow-hidden">
-      <div v-for="col in columns" :key="col" class="w-[280px] flex-shrink-0 rounded-lg flex flex-col" style="background: var(--el-fill-color-lighter);">
-        <!-- Column header -->
-        <div class="flex items-center gap-2 px-3 py-2.5">
-          <div class="w-2.5 h-2.5 rounded-full" :style="{ background: dotColors[col - 1] }" />
-          <div class="h-3.5 rounded" :style="{ width: headerWidths[col - 1] + 'px', background: 'var(--el-fill-color)' }" />
-          <div class="w-6 h-4 rounded-full ml-auto" style="background: var(--el-fill-color);" />
-        </div>
-        <!-- Cards -->
-        <div class="flex flex-col gap-2 px-2 pb-2">
-          <div
-            v-for="card in cardCounts[col - 1]"
-            :key="card"
-            class="rounded-md p-3 flex flex-col gap-2"
-            style="background: var(--el-bg-color); box-shadow: 0 1px 2px rgb(0 0 0 / 5%);"
-          >
-            <div class="h-3.5 rounded" :style="{ width: cardTitleWidths[(col - 1) * 5 + (card - 1)] + '%', background: 'var(--el-fill-color)' }" />
-            <div class="h-3 rounded w-3/5" style="background: var(--el-fill-color); opacity: 0.6;" />
-            <div v-if="card % 2 === 0" class="h-5 w-16 rounded-full" style="background: var(--el-fill-color); opacity: 0.5;" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  columns?: number
-}>(), {
-  columns: 4,
-})
-
-function seededRandom(seed: number): number {
-  const x = Math.sin(seed * 9301 + 49297) * 233280
-  return x - Math.floor(x)
-}
-
-const dotColors = ['#4e83fd', '#36b37e', '#ff991f', '#f54a45', '#8777d9', '#00b8d9']
-const headerWidths = computed(() =>
-  Array.from({ length: props.columns }, (_, i) => 50 + Math.floor(seededRandom(i + 10) * 50)),
-)
-const cardCounts = computed(() =>
-  Array.from({ length: props.columns }, (_, i) => 2 + Math.floor(seededRandom(i + 20) * 3)),
-)
-const cardTitleWidths = computed(() =>
-  Array.from({ length: props.columns * 5 }, (_, i) => 40 + Math.floor(seededRandom(i + 30) * 50)),
-)
-</script>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/KanbanView.vue b/web/apps/web-ele/src/components/zq-smart-table/table/KanbanView.vue
deleted file mode 100644
index a3be2ff..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/KanbanView.vue
+++ /dev/null
@@ -1,984 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, reactive, watch } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FieldType } from '#/types/zq-smart-table/field'
-import type { Record as TableRecord } from '#/types/zq-smart-table/table'
-import RecordDetailDrawer from './RecordDetailDrawer.vue'
-import FieldIcon from '#/components/zq-smart-table/icons/FieldIcon.vue'
-import { Plus, Settings2, ChevronRight, ChevronDown } from '@vben/icons'
-import {
-  ElTag,
-  ElProgress,
-  ElRate,
-  ElSwitch,
-  ElPopover,
-  ElButton,
-} from 'element-plus'
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-const detailRecordId = ref<string | null>(null)
-const showDetail = ref(false)
-const showFieldSettings = ref(false)
-const collapsedCols = ref<Set<string>>(new Set())
-
-const draggingRecordId = ref<string | null>(null)
-const draggingFromColId = ref<string | null>(null)
-const dragOverColId = ref<string | null>(null)
-const dragOverRecordId = ref<string | null>(null)
-
-function openDetail(recordId: string) {
-  detailRecordId.value = recordId
-  showDetail.value = true
-}
-
-const kanbanField = computed(() => {
-  const table = tableStore.activeTable
-  const view = tableStore.activeView
-  if (!table || !view || !view.kanbanFieldId) return null
-  return table.fields.find((f) => f.id === view.kanbanFieldId)
-})
-
-const columns = computed(() => {
-  const field = kanbanField.value
-  const table = tableStore.activeTable
-  if (!field || !table || !field.options) return []
-  const records = tableStore.getFilteredRecords()
-  const cols = field.options.map((opt) => ({
-    id: opt.id,
-    label: opt.label,
-    color: opt.color,
-    records: records.filter((r) => r.values[field.id] === opt.id),
-  }))
-  const uncategorized = records.filter(
-    (r) => !r.values[field.id] || !field.options!.find((o) => o.id === r.values[field.id]),
-  )
-  if (uncategorized.length > 0) {
-    cols.unshift({
-      id: '__uncategorized__',
-      label: t('kanban.uncategorized'),
-      color: '#bbbfc4',
-      records: uncategorized,
-    })
-  }
-  return cols
-})
-
-const titleField = computed(() => {
-  const table = tableStore.activeTable
-  if (!table) return null
-  return table.fields.find((f) => f.type === FieldType.Text) || table.fields[0]
-})
-
-const cardFields = computed(() => {
-  const table = tableStore.activeTable
-  const view = tableStore.activeView
-  if (!table || !view) return []
-  return view.visibleFieldIds
-    .map((id) => table.fields.find((f) => f.id === id))
-    .filter(
-      (f) =>
-        f && f.visible && f.id !== titleField.value?.id && f.id !== view.kanbanFieldId,
-    )
-    .slice(0, 5) as typeof table.fields
-})
-
-function getRecordTitle(record: TableRecord): string {
-  if (!titleField.value) return record.id
-  return String(record.values[titleField.value.id] ?? '')
-}
-
-function getOptionInfo(
-  fieldId: string,
-  optionId: string,
-): { label: string; color: string } | null {
-  const table = tableStore.activeTable
-  if (!table) return null
-  const field = table.fields.find((f) => f.id === fieldId)
-  const opt = field?.options?.find((o) => o.id === optionId)
-  return opt ? { label: opt.label, color: opt.color } : null
-}
-
-const AVATAR_COLORS = [
-  '#4e83fd',
-  '#36b37e',
-  '#ff991f',
-  '#f54a45',
-  '#8777d9',
-  '#00b8d9',
-]
-function avatarColor(name: string): string {
-  let hash = 0
-  for (let i = 0; i < name.length; i++)
-    hash = name.charCodeAt(i) + ((hash << 5) - hash)
-  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length]!
-}
-
-function addRecordToColumn(columnId: string) {
-  const view = tableStore.activeView
-  if (!view || !view.kanbanFieldId) return
-  const record = tableStore.addRecord()
-  if (record && columnId !== '__uncategorized__') {
-    tableStore.updateCellValue(record.id, view.kanbanFieldId, columnId)
-  }
-}
-
-function toggleCollapse(colId: string) {
-  const s = new Set(collapsedCols.value)
-  if (s.has(colId)) s.delete(colId)
-  else s.add(colId)
-  collapsedCols.value = s
-}
-
-function handleCardDragStart(e: DragEvent, recordId: string, colId: string) {
-  draggingRecordId.value = recordId
-  draggingFromColId.value = colId
-  if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', recordId)
-  }
-}
-
-function handleCardDragEnd() {
-  draggingRecordId.value = null
-  draggingFromColId.value = null
-  dragOverColId.value = null
-  dragOverRecordId.value = null
-}
-
-function handleColDragOver(e: DragEvent, colId: string) {
-  e.preventDefault()
-  dragOverColId.value = colId
-}
-
-function handleCardDragOver(e: DragEvent, recordId: string) {
-  e.preventDefault()
-  e.stopPropagation()
-  dragOverColId.value = null
-  dragOverRecordId.value = recordId
-}
-
-function handleColDrop(e: DragEvent, targetColId: string) {
-  e.preventDefault()
-  const recordId = draggingRecordId.value
-  if (!recordId) return
-  const view = tableStore.activeView
-  if (!view?.kanbanFieldId) return
-  const newValue = targetColId === '__uncategorized__' ? null : targetColId
-  tableStore.updateCellValue(recordId, view.kanbanFieldId, newValue)
-  if (
-    dragOverRecordId.value &&
-    dragOverRecordId.value !== recordId
-  ) {
-    const table = tableStore.activeTable
-    if (table) {
-      const recs = table.records
-      const srcIdx = recs.findIndex((r) => r.id === recordId)
-      const tgtIdx = recs.findIndex((r) => r.id === dragOverRecordId.value)
-      if (srcIdx !== -1 && tgtIdx !== -1) {
-        const [moved] = recs.splice(srcIdx, 1)
-        recs.splice(tgtIdx, 0, moved!)
-      }
-    }
-  }
-  handleCardDragEnd()
-}
-
-function toggleFieldVisibility(fieldId: string) {
-  const view = tableStore.activeView
-  if (!view) return
-  const idx = view.visibleFieldIds.indexOf(fieldId)
-  if (idx !== -1) view.visibleFieldIds.splice(idx, 1)
-  else view.visibleFieldIds.push(fieldId)
-}
-
-// ==================== Per-column Virtual Scrolling ====================
-const CARD_HEIGHT_EST = 110
-const COLUMN_GAP = 8
-const KANBAN_OVERSCAN = 5
-const colScrollMap = reactive<Record<string, { top: number; height: number }>>({})
-
-function handleColumnScroll(e: Event, colId: string) {
-  const el = e.target as HTMLElement
-  colScrollMap[colId] = { top: el.scrollTop, height: el.clientHeight }
-}
-
-watch(columns, (newCols) => {
-  const validIds = new Set(newCols.map(c => c.id))
-  for (const key of Object.keys(colScrollMap)) {
-    if (!validIds.has(key)) delete colScrollMap[key]
-  }
-})
-
-const colVirtualInfo = computed(() => {
-  const result: Record<string, { records: TableRecord[]; topPad: number; bottomPad: number }> = {}
-  for (const col of columns.value) {
-    const total = col.records.length
-    if (total <= 30) {
-      result[col.id] = { records: col.records, topPad: 0, bottomPad: 0 }
-      continue
-    }
-    const state = colScrollMap[col.id]
-    if (!state) {
-      result[col.id] = { records: col.records.slice(0, 30), topPad: 0, bottomPad: Math.max(0, (total - 30) * CARD_HEIGHT_EST - COLUMN_GAP) }
-      continue
-    }
-    const startRaw = Math.floor(state.top / CARD_HEIGHT_EST)
-    const visible = Math.ceil(state.height / CARD_HEIGHT_EST)
-    const start = Math.max(0, startRaw - KANBAN_OVERSCAN)
-    const end = Math.min(total, startRaw + visible + KANBAN_OVERSCAN)
-    result[col.id] = {
-      records: col.records.slice(start, end),
-      topPad: Math.max(0, start * CARD_HEIGHT_EST - COLUMN_GAP),
-      bottomPad: Math.max(0, (total - end) * CARD_HEIGHT_EST - COLUMN_GAP),
-    }
-  }
-  return result
-})
-</script>
-
-<template>
-  <div
-    v-if="!kanbanField"
-    class="kanban-empty-state"
-  >
-    {{ tableStore.loading ? '' : t('kanban.noGroupField') }}
-  </div>
-
-  <div v-else class="kanban-root">
-    <!-- 工具栏 -->
-    <div class="kanban-toolbar">
-      <div class="toolbar-info">
-        <span class="group-label">{{ t('kanban.groupBy') }}:</span>
-        <span class="group-value">{{ kanbanField.name }}</span>
-      </div>
-      <div class="toolbar-actions">
-        <ElPopover
-          v-model:visible="showFieldSettings"
-          placement="bottom-end"
-          :width="220"
-          trigger="click"
-        >
-          <template #reference>
-            <ElButton
-              size="small"
-              text
-            >
-              <Settings2 class="btn-icon" />
-              {{ t('kanban.cardFields') }}
-            </ElButton>
-          </template>
-          <div class="field-settings">
-            <div class="field-settings-title">
-              {{ t('kanban.showFields') }}
-            </div>
-            <div
-              v-for="field in tableStore.activeTable?.fields.filter(
-                (f) =>
-                  f.id !== titleField?.id &&
-                  f.id !== tableStore.activeView?.kanbanFieldId,
-              )"
-              :key="field.id"
-              class="field-settings-item"
-              @click="toggleFieldVisibility(field.id)"
-            >
-              <ElSwitch
-                :model-value="
-                  tableStore.activeView?.visibleFieldIds.includes(field.id)
-                "
-                size="small"
-                @click.stop
-              />
-              <FieldIcon :type="field.type" :size="13" class="field-settings-icon" />
-              <span class="field-settings-name">{{ field.name }}</span>
-            </div>
-          </div>
-        </ElPopover>
-      </div>
-    </div>
-
-    <!-- 列区域 -->
-    <div class="kanban-columns">
-      <div
-        v-for="col in columns"
-        :key="col.id"
-        class="kanban-column"
-        :class="{
-          'is-collapsed': collapsedCols.has(col.id),
-          'is-drag-over': dragOverColId === col.id,
-        }"
-        @dragover="handleColDragOver($event, col.id)"
-        @drop="handleColDrop($event, col.id)"
-      >
-        <!-- 折叠状态 -->
-        <div
-          v-if="collapsedCols.has(col.id)"
-          class="collapsed-column"
-          @click="toggleCollapse(col.id)"
-        >
-          <ChevronRight class="collapse-icon" />
-          <span class="collapsed-dot" :style="{ background: col.color }" />
-          <span class="collapsed-label">{{ col.label }}</span>
-          <span class="collapsed-count">{{ col.records.length }}</span>
-        </div>
-
-        <!-- 展开状态 -->
-        <template v-else>
-          <!-- 列头 -->
-          <div class="column-header">
-            <div
-              class="collapse-btn"
-              @click.stop="toggleCollapse(col.id)"
-            >
-              <ChevronDown class="collapse-icon" />
-            </div>
-            <span
-              class="column-dot"
-              :style="{ background: col.color }"
-            />
-            <span class="column-title">{{ col.label }}</span>
-            <span class="column-count">{{ col.records.length }}</span>
-          </div>
-
-          <!-- 卡片列表 -->
-          <div class="column-body" @scroll="handleColumnScroll($event, col.id)">
-            <div
-              v-if="col.records.length === 0"
-              class="column-empty"
-            >
-              {{ t('common.noData') }}
-            </div>
-
-            <template v-else>
-            <div v-if="colVirtualInfo[col.id]?.topPad" :style="{ height: (colVirtualInfo[col.id]?.topPad ?? 0) + 'px', flexShrink: '0' }" />
-            <div
-              v-for="record in (colVirtualInfo[col.id]?.records ?? col.records)"
-              :key="record.id"
-              draggable="true"
-              class="kanban-card"
-              :class="{
-                'is-dragging': draggingRecordId === record.id,
-                'is-drag-target':
-                  dragOverRecordId === record.id &&
-                  draggingRecordId !== record.id,
-              }"
-              @click="openDetail(record.id)"
-              @dragstart="handleCardDragStart($event, record.id, col.id)"
-              @dragend="handleCardDragEnd"
-              @dragover="handleCardDragOver($event, record.id)"
-            >
-              <!-- 左侧色条 -->
-              <div
-                class="card-accent"
-                :style="{ background: col.color }"
-              />
-
-              <div class="card-content">
-                <!-- 标题 -->
-                <div class="card-title">
-                  {{ getRecordTitle(record) || t('table.noTitle') }}
-                </div>
-
-                <!-- 字段 -->
-                <div v-if="cardFields.length > 0" class="card-fields">
-                  <template v-for="field in cardFields" :key="field.id">
-                    <div
-                      v-if="
-                        record.values[field.id] != null &&
-                        record.values[field.id] !== ''
-                      "
-                      class="card-field-row"
-                    >
-                      <!-- 单选 -->
-                      <template v-if="field.type === FieldType.SingleSelect">
-                        <ElTag
-                          v-if="
-                            getOptionInfo(
-                              field.id,
-                              String(record.values[field.id]),
-                            )
-                          "
-                          size="small"
-                          effect="dark"
-                          round
-                          :color="
-                            getOptionInfo(
-                              field.id,
-                              String(record.values[field.id]),
-                            )!.color
-                          "
-                          class="card-tag"
-                        >
-                          {{
-                            getOptionInfo(
-                              field.id,
-                              String(record.values[field.id]),
-                            )!.label
-                          }}
-                        </ElTag>
-                      </template>
-
-                      <!-- 多选 -->
-                      <template
-                        v-else-if="field.type === FieldType.MultiSelect"
-                      >
-                        <div class="flex flex-wrap gap-1">
-                          <ElTag
-                            v-for="optId in (
-                              record.values[field.id] as string[]
-                            ).slice(0, 3)"
-                            :key="optId"
-                            size="small"
-                            effect="dark"
-                            round
-                            :color="
-                              getOptionInfo(field.id, optId)?.color ??
-                              '#bbbfc4'
-                            "
-                            class="card-tag"
-                          >
-                            {{
-                              getOptionInfo(field.id, optId)?.label ?? optId
-                            }}
-                          </ElTag>
-                          <ElTag
-                            v-if="
-                              (record.values[field.id] as string[]).length > 3
-                            "
-                            size="small"
-                            round
-                            class="card-tag"
-                          >
-                            +{{
-                              (record.values[field.id] as string[]).length - 3
-                            }}
-                          </ElTag>
-                        </div>
-                      </template>
-
-                      <!-- 人员 -->
-                      <template
-                        v-else-if="field.type === FieldType.Person || field.type === FieldType.User"
-                      >
-                        <span
-                          class="card-avatar"
-                          :style="{
-                            background: avatarColor(
-                              String(record.values[field.id]),
-                            ),
-                          }"
-                        >
-                          {{
-                            String(record.values[field.id]).charAt(0)
-                          }}
-                        </span>
-                        <span class="card-field-text">{{
-                          record.values[field.id]
-                        }}</span>
-                      </template>
-
-                      <!-- 日期 -->
-                      <template
-                        v-else-if="field.type === FieldType.Date"
-                      >
-                        <FieldIcon
-                          :type="field.type"
-                          :size="11"
-                          class="card-field-icon"
-                        />
-                        <span class="card-field-text">{{
-                          record.values[field.id]
-                        }}</span>
-                      </template>
-
-                      <!-- 进度 -->
-                      <template
-                        v-else-if="field.type === FieldType.Progress"
-                      >
-                        <ElProgress
-                          :percentage="
-                            Number(record.values[field.id] ?? 0)
-                          "
-                          :stroke-width="4"
-                          :show-text="true"
-                          class="card-progress"
-                        />
-                      </template>
-
-                      <!-- 评分 -->
-                      <template
-                        v-else-if="field.type === FieldType.Rating"
-                      >
-                        <ElRate
-                          :model-value="
-                            Number(record.values[field.id] ?? 0)
-                          "
-                          :max="field.maxRating ?? 5"
-                          disabled
-                          size="small"
-                          class="card-rate"
-                        />
-                      </template>
-
-                      <!-- 复选框 (switch) -->
-                      <template
-                        v-else-if="field.type === FieldType.Checkbox"
-                      >
-                        <ElSwitch
-                          :model-value="!!record.values[field.id]"
-                          disabled
-                          size="small"
-                        />
-                        <span class="card-field-text">{{
-                          field.name
-                        }}</span>
-                      </template>
-
-                      <!-- Link -->
-                      <template
-                        v-else-if="field.type === FieldType.Link"
-                      >
-                        <div class="flex flex-wrap gap-1">
-                          <ElTag
-                            v-for="item in (record.values[field.id] as any[] ?? [])"
-                            :key="item.id"
-                            size="small"
-                            type="info"
-                            round
-                            class="card-tag"
-                          >
-                            {{ item.title || item.id }}
-                          </ElTag>
-                        </div>
-                      </template>
-
-                      <!-- Lookup -->
-                      <template
-                        v-else-if="field.type === FieldType.Lookup"
-                      >
-                        <div class="flex flex-wrap gap-1">
-                          <ElTag
-                            v-for="(v, i) in (record.values[field.id] as any[] ?? [])"
-                            :key="i"
-                            size="small"
-                            type="info"
-                            round
-                            class="card-tag"
-                          >
-                            {{ v ?? '' }}
-                          </ElTag>
-                        </div>
-                      </template>
-
-                      <!-- Rollup -->
-                      <template
-                        v-else-if="field.type === FieldType.Rollup"
-                      >
-                        <span class="card-field-text">{{
-                          record.values[field.id] ?? ''
-                        }}</span>
-                      </template>
-
-                      <!-- 默认 -->
-                      <template v-else>
-                        <FieldIcon
-                          :type="field.type"
-                          :size="11"
-                          class="card-field-icon"
-                        />
-                        <span class="card-field-text">{{
-                          record.values[field.id]
-                        }}</span>
-                      </template>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </div>
-            <div v-if="colVirtualInfo[col.id]?.bottomPad" :style="{ height: (colVirtualInfo[col.id]?.bottomPad ?? 0) + 'px', flexShrink: '0' }" />
-            </template>
-          </div>
-
-          <!-- 底部添加按钮 -->
-          <div
-            class="column-add-btn"
-            @click="addRecordToColumn(col.id)"
-          >
-            <Plus class="add-icon" />
-            <span>{{ t('kanban.addCard') }}</span>
-          </div>
-        </template>
-      </div>
-    </div>
-
-    <RecordDetailDrawer
-      v-model:visible="showDetail"
-      v-model:record-id="detailRecordId"
-    />
-  </div>
-</template>
-
-<style scoped>
-.kanban-empty-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--el-text-color-secondary);
-  font-size: 14px;
-}
-
-.kanban-root {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-/* ===== 工具栏 ===== */
-.kanban-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--el-border-color-lighter);
-  flex-shrink: 0;
-}
-
-.toolbar-info {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-}
-
-.group-label {
-  color: var(--el-text-color-secondary);
-}
-
-.group-value {
-  color: var(--el-text-color-primary);
-  font-weight: 500;
-}
-
-.btn-icon {
-  width: 14px;
-  height: 14px;
-  margin-right: 4px;
-}
-
-/* ===== 字段设置弹出层 ===== */
-.field-settings {
-  padding: 4px;
-}
-
-.field-settings-title {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--el-text-color-secondary);
-  padding: 4px 8px 8px;
-}
-
-.field-settings-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.field-settings-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.field-settings-icon {
-  opacity: 0.5;
-}
-
-.field-settings-name {
-  font-size: 12px;
-  color: var(--el-text-color-primary);
-}
-
-/* ===== 列区域 ===== */
-.kanban-columns {
-  display: flex;
-  gap: 12px;
-  padding: 16px;
-  height: 100%;
-  overflow-x: auto;
-  align-items: flex-start;
-}
-
-/* ===== 列 ===== */
-.kanban-column {
-  flex-shrink: 0;
-  width: 280px;
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  border-radius: 8px;
-  background: var(--el-fill-color-lighter);
-  transition: box-shadow 0.2s;
-}
-
-.kanban-column.is-collapsed {
-  width: 40px;
-  cursor: pointer;
-}
-
-.kanban-column.is-drag-over {
-  box-shadow: 0 0 0 2px var(--el-color-primary);
-}
-
-/* ===== 折叠列 ===== */
-.collapsed-column {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 8px;
-  cursor: pointer;
-  min-height: 120px;
-}
-
-.collapse-icon {
-  width: 14px;
-  height: 14px;
-  color: var(--el-text-color-placeholder);
-}
-
-.collapsed-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.collapsed-label {
-  writing-mode: vertical-rl;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  letter-spacing: 2px;
-}
-
-.collapsed-count {
-  font-size: 11px;
-  color: var(--el-text-color-secondary);
-  background: var(--el-fill-color);
-  padding: 1px 5px;
-  border-radius: 8px;
-}
-
-/* ===== 列头 ===== */
-.column-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  flex-shrink: 0;
-}
-
-.collapse-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.15s;
-  flex-shrink: 0;
-}
-
-.collapse-btn:hover {
-  background: var(--el-fill-color);
-}
-
-.column-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.column-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.column-count {
-  font-size: 11px;
-  color: var(--el-text-color-secondary);
-  background: var(--el-fill-color);
-  padding: 1px 6px;
-  border-radius: 8px;
-  flex-shrink: 0;
-}
-
-/* ===== 列内容 ===== */
-.column-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 8px 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-height: 40px;
-}
-
-.column-empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 24px 0;
-  font-size: 12px;
-  color: var(--el-text-color-placeholder);
-}
-
-/* ===== 卡片 ===== */
-.kanban-card {
-  display: flex;
-  border-radius: 6px;
-  overflow: hidden;
-  cursor: grab;
-  user-select: none;
-  background: var(--el-bg-color);
-  box-shadow: 0 1px 2px rgb(0 0 0 / 6%);
-  transition: box-shadow 0.15s, transform 0.1s, opacity 0.15s;
-}
-
-.kanban-card:hover {
-  box-shadow: 0 3px 8px rgb(0 0 0 / 10%);
-  transform: translateY(-1px);
-}
-
-.kanban-card:active {
-  cursor: grabbing;
-}
-
-.kanban-card.is-dragging {
-  opacity: 0.4;
-}
-
-.kanban-card.is-drag-target {
-  box-shadow: 0 0 0 2px var(--el-color-primary);
-}
-
-/* 左侧色条 */
-.card-accent {
-  width: 3px;
-  flex-shrink: 0;
-}
-
-.card-content {
-  flex: 1;
-  padding: 10px 12px;
-  min-width: 0;
-}
-
-.card-title {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--el-text-color-primary);
-  line-height: 1.5;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-.card-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-top: 8px;
-}
-
-.card-field-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
-.card-tag {
-  border: none !important;
-  color: #fff !important;
-  font-size: 11px !important;
-}
-
-.card-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  color: #fff;
-  font-size: 10px;
-  font-weight: 500;
-  flex-shrink: 0;
-}
-
-.card-field-icon {
-  opacity: 0.4;
-  flex-shrink: 0;
-}
-
-.card-field-text {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.card-progress {
-  flex: 1;
-  min-width: 0;
-}
-
-.card-rate {
-  height: 16px;
-}
-
-.card-rate :deep(.el-rate__icon) {
-  font-size: 14px !important;
-  margin-right: 1px;
-}
-
-/* ===== 添加卡片按钮 ===== */
-.column-add-btn {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 8px 12px;
-  font-size: 12px;
-  color: var(--el-text-color-placeholder);
-  cursor: pointer;
-  transition: color 0.15s;
-  flex-shrink: 0;
-}
-
-.column-add-btn:hover {
-  color: var(--el-color-primary);
-}
-
-.add-icon {
-  width: 14px;
-  height: 14px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/LinkRecordSelector.vue b/web/apps/web-ele/src/components/zq-smart-table/table/LinkRecordSelector.vue
deleted file mode 100644
index b501b6a..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/LinkRecordSelector.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { ElInput, ElCheckbox, ElScrollbar, ElIcon, ElTag } from 'element-plus'
-import { Search } from '@element-plus/icons-vue'
-import { searchRecordsApi, type RecordSearchResultItem } from '#/api/smart-table'
-import type { LinkedRecordItem } from '#/types/zq-smart-table/field'
-import { $t } from '@vben/locales';
-
-const props = defineProps<{
-  linkedTableId: string
-  modelValue: LinkedRecordItem[]
-}>()
-
-const emit = defineEmits<{
-  'update:modelValue': [ids: string[]]
-}>()
-
-const keyword = ref('')
-const searchResults = ref<RecordSearchResultItem[]>([])
-const loading = ref(false)
-let searchTimer: ReturnType<typeof setTimeout> | null = null
-
-const selectedIds = computed(() => new Set(props.modelValue.map((r) => r.id)))
-
-async function doSearch() {
-  if (!props.linkedTableId) return
-  loading.value = true
-  try {
-    searchResults.value = await searchRecordsApi(props.linkedTableId, keyword.value, 30)
-  } catch {
-    searchResults.value = []
-  } finally {
-    loading.value = false
-  }
-}
-
-function onKeywordChange() {
-  if (searchTimer) clearTimeout(searchTimer)
-  searchTimer = setTimeout(() => doSearch(), 300)
-}
-
-function toggleRecord(record: RecordSearchResultItem) {
-  const ids = new Set(selectedIds.value)
-  if (ids.has(record.id)) {
-    ids.delete(record.id)
-  } else {
-    ids.add(record.id)
-  }
-  emit('update:modelValue', [...ids])
-}
-
-function removeRecord(id: string) {
-  const ids = [...selectedIds.value].filter((rid) => rid !== id)
-  emit('update:modelValue', ids)
-}
-
-watch(
-  () => props.linkedTableId,
-  () => {
-    keyword.value = ''
-    doSearch()
-  },
-  { immediate: true },
-)
-</script>
-
-<template>
-  <div class="link-record-selector">
-    <div v-if="modelValue.length > 0" class="flex flex-wrap gap-1 mb-1.5">
-      <el-tag
-        v-for="item in modelValue"
-        :key="item.id"
-        size="small"
-        closable
-        round
-        type="info"
-        @close="removeRecord(item.id)"
-      >
-        {{ item.title || item.id }}
-      </el-tag>
-    </div>
-
-    <el-input
-      v-model="keyword"
-      size="small"
-      :placeholder="$t('link.searchPlaceholder')"
-      clearable
-      @input="onKeywordChange"
-    >
-      <template #prefix>
-        <el-icon><Search /></el-icon>
-      </template>
-    </el-input>
-
-    <el-scrollbar max-height="200px" class="mt-1.5">
-      <div
-        v-for="item in searchResults"
-        :key="item.id"
-        class="flex items-center gap-2 px-2 py-1.5 cursor-pointer rounded hover:bg-[var(--el-fill-color-light)] transition-colors"
-        @click="toggleRecord(item)"
-      >
-        <el-checkbox :model-value="selectedIds.has(item.id)" @click.stop @change="() => toggleRecord(item)" />
-        <span class="text-sm truncate">{{ item.title || item.id }}</span>
-      </div>
-      <div
-        v-if="!loading && searchResults.length === 0"
-        class="text-center text-xs py-4"
-        style="color: var(--zq-text-secondary);"
-      >
-        {{ $t('common.noData') }}
-      </div>
-    </el-scrollbar>
-  </div>
-</template>
-
-<style scoped>
-.link-record-selector {
-  min-width: 200px;
-  padding: 4px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/RecordDetailDrawer.vue b/web/apps/web-ele/src/components/zq-smart-table/table/RecordDetailDrawer.vue
deleted file mode 100644
index 60f6455..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/RecordDetailDrawer.vue
+++ /dev/null
@@ -1,605 +0,0 @@
-<script setup lang="ts">
-import { computed, defineAsyncComponent, ref, watch, nextTick } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FieldType, FIELD_TYPE_LABELS } from '#/types/zq-smart-table/field'
-import type { FieldConfig } from '#/types/zq-smart-table/field'
-import type { Record as TableRecord, CellValue } from '#/types/zq-smart-table/table'
-import { ElButton, ElIcon, ElMessageBox, ElTooltip, ElMessage } from 'element-plus'
-import ZqDrawer from '#/components/zq-drawer/zq-drawer.vue'
-import CellRenderer from './CellRenderer.vue'
-import FieldIcon from '#/components/zq-smart-table/icons/FieldIcon.vue'
-import { UserAvatar } from '#/components/user-avatar'
-import { MentionDropdown } from '#/components/mention-dropdown'
-import { Clock, Delete, ArrowLeft, ArrowRight, InfoFilled, ChatDotRound } from '@element-plus/icons-vue'
-import {
-  getCommentsApi, createCommentApi, updateCommentApi, deleteCommentApi,
-  type CommentItem,
-} from '#/api/smart-table'
-import type { User } from '#/api/core/user'
-
-const RichTextEditor = defineAsyncComponent(() => import('#/components/zq-form/rich-text-editor/rich-text-editor.vue'))
-const UserSelector = defineAsyncComponent(() => import('#/components/zq-form/user-selector/user-selector.vue'))
-const DeptSelector = defineAsyncComponent(() => import('#/components/zq-form/dept-selector/dept-selector.vue'))
-const RegionSelector = defineAsyncComponent(() => import('#/components/zq-form/region-selector/region-selector.vue'))
-const ImageSelector = defineAsyncComponent(() => import('#/components/zq-form/image-selector/image-selector.vue'))
-const FileSelector = defineAsyncComponent(() => import('#/components/zq-form/file-selector/file-selector.vue'))
-
-const props = defineProps<{
-  visible: boolean
-  recordId: string | null
-}>()
-
-const emit = defineEmits<{
-  'update:visible': [val: boolean]
-  'update:recordId': [val: string | null]
-}>()
-
-const { t } = useI18n()
-
-const REGION_LEVEL_MAP: Record<string, number> = { province: 1, city: 2, district: 3 }
-function toRegionLevel(level?: string): number {
-  return REGION_LEVEL_MAP[level ?? 'district'] ?? 3
-}
-const tableStore = useTableStore()
-
-const allRecords = computed(() => tableStore.getFilteredRecords())
-
-const record = computed<TableRecord | undefined>(() => {
-  if (!props.recordId || !tableStore.activeTable) return undefined
-  return tableStore.activeTable.records.find((r) => r.id === props.recordId)
-})
-
-const currentIndex = computed(() => {
-  if (!props.recordId) return -1
-  return allRecords.value.findIndex((r) => r.id === props.recordId)
-})
-
-const hasPrev = computed(() => currentIndex.value > 0)
-const hasNext = computed(() => currentIndex.value >= 0 && currentIndex.value < allRecords.value.length - 1)
-
-const fields = computed<FieldConfig[]>(() => {
-  return tableStore.activeTable?.fields ?? []
-})
-
-const title = computed(() => {
-  if (!record.value) return ''
-  const titleField = fields.value.find((f) => f.type === FieldType.Text)
-  if (!titleField) return props.recordId ?? ''
-  return String(record.value.values[titleField.id] ?? '') || t('table.noTitle')
-})
-
-const commentPanelOpen = ref(false)
-
-const drawerSize = computed(() => commentPanelOpen.value ? '920px' : '520px')
-
-function toggleCommentPanel() {
-  commentPanelOpen.value = !commentPanelOpen.value
-  if (commentPanelOpen.value && props.recordId) {
-    loadComments(props.recordId)
-  }
-}
-
-function handleUpdate(fieldId: string, value: CellValue) {
-  if (!props.recordId) return
-  tableStore.updateCellValue(props.recordId, fieldId, value)
-}
-
-function handleClose() {
-  emit('update:visible', false)
-}
-
-function goPrev() {
-  if (!hasPrev.value) return
-  emit('update:recordId', allRecords.value[currentIndex.value - 1].id)
-}
-
-function goNext() {
-  if (!hasNext.value) return
-  emit('update:recordId', allRecords.value[currentIndex.value + 1].id)
-}
-
-function handleDelete() {
-  if (!props.recordId) return
-  ElMessageBox.confirm(
-    t('table.deleteRecordConfirm'),
-    { type: 'warning', confirmButtonText: t('common.confirm'), cancelButtonText: t('common.cancel') },
-  ).then(() => {
-    const rid = props.recordId!
-    if (hasNext.value) {
-      emit('update:recordId', allRecords.value[currentIndex.value + 1].id)
-    } else if (hasPrev.value) {
-      emit('update:recordId', allRecords.value[currentIndex.value - 1].id)
-    } else {
-      emit('update:visible', false)
-    }
-    tableStore.deleteRecord(rid)
-  }).catch(() => {})
-}
-
-// ==================== Comment ====================
-
-const comments = ref<CommentItem[]>([])
-const commentLoading = ref(false)
-const commentText = ref('')
-const commentMentions = ref<string[]>([])
-const replyTo = ref<CommentItem | null>(null)
-const editingComment = ref<CommentItem | null>(null)
-const editText = ref('')
-const editMentions = ref<string[]>([])
-const commentInputRef = ref<HTMLTextAreaElement | null>(null)
-
-// @mention
-const mentionVisible = ref(false)
-const mentionQuery = ref('')
-let mentionStartIdx = -1
-const mentionRef = ref<InstanceType<typeof MentionDropdown> | null>(null)
-
-const commentCount = computed(() => {
-  let count = comments.value.length
-  for (const c of comments.value) count += c.replies?.length ?? 0
-  return count
-})
-
-watch(() => props.recordId, async (rid) => {
-  comments.value = []
-  replyTo.value = null
-  editingComment.value = null
-  if (!rid) return
-  if (commentPanelOpen.value) await loadComments(rid)
-})
-
-watch(() => props.visible, (v) => {
-  if (v && props.recordId && commentPanelOpen.value) loadComments(props.recordId)
-  if (!v) commentPanelOpen.value = false
-})
-
-async function loadComments(recordId: string) {
-  commentLoading.value = true
-  try {
-    comments.value = await getCommentsApi(recordId)
-  } catch { /* ignore */ }
-  commentLoading.value = false
-}
-
-async function submitComment() {
-  const rid = props.recordId
-  if (!rid || !commentText.value.trim()) return
-
-  try {
-    const newComment = await createCommentApi(rid, {
-      content: commentText.value.trim(),
-      mentions: commentMentions.value,
-      parent_id: replyTo.value?.id,
-    })
-
-    if (replyTo.value) {
-      const parent = comments.value.find(c => c.id === replyTo.value!.id)
-        || comments.value.find(c => c.id === replyTo.value!.parent_id)
-      if (parent) {
-        if (!parent.replies) parent.replies = []
-        parent.replies.push(newComment)
-      } else {
-        comments.value.push(newComment)
-      }
-    } else {
-      comments.value.push(newComment)
-    }
-
-    commentText.value = ''
-    commentMentions.value = []
-    replyTo.value = null
-  } catch {
-    ElMessage.error(t('comment.postFailed'))
-  }
-}
-
-function startReply(comment: CommentItem) {
-  replyTo.value = comment
-  nextTick(() => commentInputRef.value?.focus())
-}
-
-function cancelReply() {
-  replyTo.value = null
-}
-
-function startEdit(comment: CommentItem) {
-  editingComment.value = comment
-  editText.value = comment.content
-  editMentions.value = [...(comment.mentions || [])]
-}
-
-function cancelEdit() {
-  editingComment.value = null
-  editText.value = ''
-  editMentions.value = []
-}
-
-async function saveEdit() {
-  if (!editingComment.value || !editText.value.trim()) return
-  try {
-    const updated = await updateCommentApi(editingComment.value.id, {
-      content: editText.value.trim(),
-      mentions: editMentions.value,
-    })
-    const target = findComment(editingComment.value.id)
-    if (target) {
-      target.content = updated.content
-      target.mentions = updated.mentions
-    }
-    cancelEdit()
-  } catch {
-    ElMessage.error(t('comment.updateFailed'))
-  }
-}
-
-async function deleteComment(comment: CommentItem) {
-  try {
-    await ElMessageBox.confirm(t('comment.deleteConfirm'), {
-      type: 'warning',
-      confirmButtonText: t('common.confirm'),
-      cancelButtonText: t('common.cancel'),
-    })
-  } catch { return }
-
-  try {
-    await deleteCommentApi(comment.id)
-    if (comment.parent_id) {
-      const parent = comments.value.find(c => c.id === comment.parent_id)
-      if (parent) {
-        parent.replies = parent.replies.filter(r => r.id !== comment.id)
-      }
-    } else {
-      comments.value = comments.value.filter(c => c.id !== comment.id)
-    }
-  } catch {
-    ElMessage.error(t('comment.deleteFailed'))
-  }
-}
-
-function findComment(id: string): CommentItem | undefined {
-  for (const c of comments.value) {
-    if (c.id === id) return c
-    for (const r of (c.replies || [])) {
-      if (r.id === id) return r
-    }
-  }
-  return undefined
-}
-
-function formatTimeAgo(dateStr?: string): string {
-  if (!dateStr) return ''
-  const now = Date.now()
-  const d = new Date(dateStr).getTime()
-  const diff = Math.floor((now - d) / 1000)
-  if (diff < 60) return t('comment.justNow')
-  if (diff < 3600) return t('comment.minutesAgo', { n: Math.floor(diff / 60) })
-  if (diff < 86400) return t('comment.hoursAgo', { n: Math.floor(diff / 3600) })
-  return t('comment.daysAgo', { n: Math.floor(diff / 86400) })
-}
-
-// @mention handlers
-function handleCommentInput(e: Event) {
-  const textarea = e.target as HTMLTextAreaElement
-  const val = textarea.value
-  const cursor = textarea.selectionStart ?? 0
-  const before = val.substring(0, cursor)
-  const atIdx = before.lastIndexOf('@')
-
-  if (atIdx >= 0 && (atIdx === 0 || /\s/.test(before[atIdx - 1]!))) {
-    const query = before.substring(atIdx + 1)
-    if (query.length <= 20 && !/\s/.test(query)) {
-      mentionStartIdx = atIdx
-      mentionQuery.value = query
-      mentionVisible.value = true
-      return
-    }
-  }
-  mentionVisible.value = false
-}
-
-function handleCommentKeydown(e: KeyboardEvent) {
-  if (mentionVisible.value && mentionRef.value?.handleKeydown(e)) {
-    return
-  }
-  if (e.key === 'Enter' && !e.shiftKey) {
-    e.preventDefault()
-    submitComment()
-  }
-}
-
-function handleCommentBlur() {
-  setTimeout(() => { mentionVisible.value = false }, 200)
-}
-
-function handleMentionSelect(user: User) {
-  const name = user.name || user.username
-  const before = commentText.value.substring(0, mentionStartIdx)
-  const cursorPos = commentInputRef.value?.selectionStart ?? mentionStartIdx
-  const after = commentText.value.substring(cursorPos)
-  commentText.value = `${before}@${name} ${after}`
-  if (!commentMentions.value.includes(user.id)) {
-    commentMentions.value.push(user.id)
-  }
-  nextTick(() => {
-    const pos = before.length + name.length + 2
-    commentInputRef.value?.setSelectionRange(pos, pos)
-    commentInputRef.value?.focus()
-  })
-}
-</script>
-
-<template>
-  <ZqDrawer
-    :model-value="visible"
-    :title="title"
-    :size="drawerSize"
-    :show-footer="false"
-    :show-fullscreen-button="true"
-    :close-on-click-modal="true"
-    @update:model-value="(val: boolean) => !val && handleClose()"
-  >
-    <template #header-extra>
-      <div class="flex items-center gap-1 flex-shrink-0 mr-2">
-        <span class="text-[11px] mr-1" style="color: var(--zq-text-placeholder);">
-          {{ currentIndex + 1 }} / {{ allRecords.length }}
-        </span>
-        <ElButton size="small" text :disabled="!hasPrev" @click="goPrev">
-          <ElIcon :size="14"><ArrowLeft /></ElIcon>
-        </ElButton>
-        <ElButton size="small" text :disabled="!hasNext" @click="goNext">
-          <ElIcon :size="14"><ArrowRight /></ElIcon>
-        </ElButton>
-        <ElButton size="small" text type="danger" @click="handleDelete">
-          <ElIcon :size="14"><Delete /></ElIcon>
-        </ElButton>
-
-        <div class="w-px h-4 mx-1" style="background: var(--zq-border-color-light);" />
-
-        <!-- Comment toggle button -->
-        <ElTooltip :content="t('comment.title')" placement="bottom">
-          <ElButton
-            size="small"
-            text
-            :type="commentPanelOpen ? 'primary' : undefined"
-            @click="toggleCommentPanel"
-          >
-            <ElIcon :size="14"><ChatDotRound /></ElIcon>
-            <span v-if="commentCount > 0" class="text-[10px] ml-0.5">{{ commentCount }}</span>
-          </ElButton>
-        </ElTooltip>
-      </div>
-    </template>
-
-    <!-- Two-column layout: fields | comments -->
-    <div class="flex" :class="commentPanelOpen ? 'zq-drawer-with-comment h-full' : ''">
-      <!-- Left: Record fields -->
-      <div class="flex-1 min-w-0 overflow-auto" :class="commentPanelOpen ? 'p-5' : ''">
-        <div v-if="record" class="space-y-1">
-          <div
-            v-for="field in fields"
-            :key="field.id"
-            class="flex rounded-lg px-3 py-3 transition-colors hover:bg-black/3 dark:hover:bg-white/3"
-          >
-            <div class="w-36 flex-shrink-0 flex items-start gap-2 pt-1">
-              <FieldIcon :type="field.type" :size="14" class="zq-drawer-field-icon mt-0.5" />
-              <div>
-                <div class="flex items-center gap-1">
-                  <span class="text-xs font-medium" style="color: var(--zq-text-secondary);">{{ field.name }}</span>
-                  <ElTooltip v-if="field.description" :content="field.description" placement="top" :show-after="300">
-                    <ElIcon :size="11" class="cursor-help opacity-50 hover:opacity-80"><InfoFilled /></ElIcon>
-                  </ElTooltip>
-                </div>
-                <div class="text-[10px] mt-0.5" style="color: var(--zq-text-placeholder);">{{ t(FIELD_TYPE_LABELS[field.type]) }}</div>
-              </div>
-            </div>
-
-            <div class="flex-1 min-w-0 flex items-center">
-              <template v-if="field.type === FieldType.CreatedTime">
-                <span class="text-xs" style="color: var(--zq-text-secondary);">{{ record.createdTime }}</span>
-              </template>
-              <template v-else-if="field.type === FieldType.ModifiedTime">
-                <span class="text-xs" style="color: var(--zq-text-secondary);">{{ record.modifiedTime }}</span>
-              </template>
-              <template v-else-if="field.type === FieldType.CreatedBy">
-                <span class="text-xs" style="color: var(--zq-text-secondary);">{{ record.createdBy ?? '' }}</span>
-              </template>
-              <template v-else-if="field.type === FieldType.ModifiedBy">
-                <span class="text-xs" style="color: var(--zq-text-secondary);">{{ record.modifiedBy ?? '' }}</span>
-              </template>
-              <template v-else-if="field.type === FieldType.AutoNumber || field.type === FieldType.Formula">
-                <CellRenderer :field="field" :value="record.values[field.id]" :record-id="record.id" :editing="false" @update="(val) => handleUpdate(field.id, val)" @start-edit="() => {}" @end-edit="() => {}" />
-              </template>
-              <template v-else-if="field.type === FieldType.RichText">
-                <div class="w-full">
-                  <RichTextEditor :model-value="String(record.values[field.id] ?? '')" :placeholder="field.name" min-height="100" max-height="300" @update:model-value="(v: string) => handleUpdate(field.id, v)" />
-                </div>
-              </template>
-              <template v-else-if="field.type === FieldType.User">
-                <div class="w-full">
-                  <UserSelector :model-value="record.values[field.id] as string | string[] | undefined" :multiple="field.multiple" :placeholder="field.name" display-mode="select" @update:model-value="(v: any) => handleUpdate(field.id, v)" />
-                </div>
-              </template>
-              <template v-else-if="field.type === FieldType.Department">
-                <div class="w-full">
-                  <DeptSelector :model-value="record.values[field.id] as string | string[] | undefined" :multiple="field.multiple" :placeholder="field.name" @update:model-value="(v: any) => handleUpdate(field.id, v)" />
-                </div>
-              </template>
-              <template v-else-if="field.type === FieldType.Region">
-                <div class="w-full">
-                  <RegionSelector :model-value="record.values[field.id] as string[] | undefined" :level="toRegionLevel(field.regionLevel)" :placeholder="field.name" @update:model-value="(v: any) => handleUpdate(field.id, v)" />
-                </div>
-              </template>
-              <template v-else-if="field.type === FieldType.Image">
-                <div class="w-full">
-                  <ImageSelector :model-value="record.values[field.id] as string | string[] | undefined" multiple :placeholder="field.name" source="smart-table" @update:model-value="(v: any) => handleUpdate(field.id, v)" />
-                </div>
-              </template>
-              <template v-else-if="field.type === FieldType.Attachment">
-                <div class="w-full">
-                  <FileSelector :model-value="record.values[field.id] as string | string[] | undefined" multiple :placeholder="field.name" show-size show-icon source="smart-table" @update:model-value="(v: any) => handleUpdate(field.id, v)" />
-                </div>
-              </template>
-              <template v-else-if="field.type === FieldType.Checkbox || field.type === FieldType.Rating">
-                <CellRenderer :field="field" :value="record.values[field.id]" :record-id="record.id" :editing="false" @update="(val) => handleUpdate(field.id, val)" @start-edit="() => {}" @end-edit="() => {}" />
-              </template>
-              <template v-else-if="field.type === FieldType.Progress">
-                <CellRenderer :field="field" :value="record.values[field.id]" :record-id="record.id" :editing="true" @update="(val) => handleUpdate(field.id, val)" @start-edit="() => {}" @end-edit="() => {}" />
-              </template>
-              <template v-else>
-                <CellRenderer :field="field" :value="record.values[field.id]" :record-id="record.id" :editing="true" @update="(val) => handleUpdate(field.id, val)" @start-edit="() => {}" @end-edit="() => {}" />
-              </template>
-            </div>
-          </div>
-
-          <!-- Timestamps -->
-          <div class="border-t mt-4 pt-4 px-3 space-y-2" style="border-color: var(--zq-border-color-light);">
-            <div class="flex items-center text-xs gap-1" style="color: var(--zq-text-placeholder);">
-              <ElIcon :size="12"><Clock /></ElIcon>
-              <span class="w-32">{{ t('field.createdTime') }}</span>
-              <span>{{ record.createdTime }}</span>
-            </div>
-            <div class="flex items-center text-xs gap-1" style="color: var(--zq-text-placeholder);">
-              <ElIcon :size="12"><Clock /></ElIcon>
-              <span class="w-32">{{ t('field.modifiedTime') }}</span>
-              <span>{{ record.modifiedTime }}</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Right: Comment panel (Feishu style) -->
-      <div
-        v-if="commentPanelOpen"
-        class="zq-comment-panel flex flex-col"
-        style="width: 380px; flex-shrink: 0; border-left: 1px solid var(--zq-border-color-light); background: var(--zq-bg-primary);"
-      >
-        <!-- Comment panel header -->
-        <div class="flex items-center gap-2 px-4 py-3 flex-shrink-0" style="border-bottom: 1px solid var(--zq-border-color-light);">
-          <span class="text-sm font-medium" style="color: var(--zq-text-primary);">{{ t('comment.title') }}</span>
-          <span v-if="commentCount > 0" class="text-xs" style="color: var(--zq-text-placeholder);">({{ commentCount }})</span>
-        </div>
-
-        <!-- Comment list (scrollable) -->
-        <div class="flex-1 overflow-auto px-4 py-3">
-          <div v-if="comments.length === 0 && !commentLoading" class="flex flex-col items-center justify-center py-12">
-            <ElIcon :size="32" style="color: var(--zq-text-placeholder); opacity: 0.4;"><ChatDotRound /></ElIcon>
-            <div class="text-xs mt-2" style="color: var(--zq-text-placeholder);">{{ t('comment.noComments') }}</div>
-          </div>
-
-          <div v-else class="space-y-4">
-            <template v-for="comment in comments" :key="comment.id">
-              <div class="group/comment">
-                <div class="flex items-center gap-1.5">
-                  <UserAvatar :user-id="comment.user_id" :size="28" :font-size="12" :shadow="false" :show-popover="true" show-info hide-username info-position="right" auto-load />
-                  <span class="text-[11px] flex-shrink-0" style="color: var(--zq-text-placeholder);">{{ formatTimeAgo(comment.sys_create_datetime) }}</span>
-                </div>
-                <div class="pl-9 mt-1">
-                  <template v-if="editingComment?.id === comment.id">
-                    <textarea
-                      v-model="editText"
-                      class="w-full p-2 text-[13px] rounded-lg border resize-none outline-none"
-                      style="background: var(--zq-bg-secondary); border-color: var(--zq-border-color); color: var(--zq-text-primary);"
-                      rows="2"
-                    />
-                    <div class="flex gap-1.5 mt-1.5">
-                      <ElButton size="small" type="primary" @click="saveEdit">{{ t('comment.saveEdit') }}</ElButton>
-                      <ElButton size="small" @click="cancelEdit">{{ t('comment.cancelEdit') }}</ElButton>
-                    </div>
-                  </template>
-                  <template v-else>
-                    <div class="text-[13px] whitespace-pre-wrap break-words leading-relaxed" style="color: var(--zq-text-primary);">{{ comment.content }}</div>
-                    <div class="flex items-center gap-3 mt-1.5 opacity-0 group-hover/comment:opacity-100 transition-opacity">
-                      <span class="text-[11px] cursor-pointer hover:underline" style="color: var(--zq-brand-color);" @click="startReply(comment)">{{ t('comment.reply') }}</span>
-                      <span class="text-[11px] cursor-pointer hover:underline" style="color: var(--zq-text-placeholder);" @click="startEdit(comment)">{{ t('comment.edit') }}</span>
-                      <span class="text-[11px] cursor-pointer hover:underline" style="color: var(--zq-danger-color, var(--el-color-danger));" @click="deleteComment(comment)">{{ t('comment.delete') }}</span>
-                    </div>
-                  </template>
-                </div>
-
-                <!-- Replies -->
-                <div v-if="comment.replies && comment.replies.length > 0" class="ml-9 mt-3 space-y-3 pl-3" style="border-left: 2px solid var(--zq-border-color-light);">
-                  <div v-for="reply in comment.replies" :key="reply.id" class="group/reply">
-                    <div class="flex items-center gap-1.5">
-                      <UserAvatar :user-id="reply.user_id" :size="22" :font-size="9" :shadow="false" :show-popover="true" show-info hide-username info-position="right" auto-load />
-                      <span class="text-[10px] flex-shrink-0" style="color: var(--zq-text-placeholder);">{{ formatTimeAgo(reply.sys_create_datetime) }}</span>
-                    </div>
-                    <div class="pl-[30px] mt-0.5">
-                      <template v-if="editingComment?.id === reply.id">
-                        <textarea
-                          v-model="editText"
-                          class="w-full p-2 text-xs rounded-lg border resize-none outline-none"
-                          style="background: var(--zq-bg-secondary); border-color: var(--zq-border-color); color: var(--zq-text-primary);"
-                          rows="2"
-                        />
-                        <div class="flex gap-1 mt-1">
-                          <ElButton size="small" type="primary" @click="saveEdit">{{ t('comment.saveEdit') }}</ElButton>
-                          <ElButton size="small" @click="cancelEdit">{{ t('comment.cancelEdit') }}</ElButton>
-                        </div>
-                      </template>
-                      <template v-else>
-                        <div class="text-xs whitespace-pre-wrap break-words" style="color: var(--zq-text-primary);">{{ reply.content }}</div>
-                        <div class="flex items-center gap-3 mt-1 opacity-0 group-hover/reply:opacity-100 transition-opacity">
-                          <span class="text-[10px] cursor-pointer hover:underline" style="color: var(--zq-brand-color);" @click="startReply(comment)">{{ t('comment.reply') }}</span>
-                          <span class="text-[10px] cursor-pointer hover:underline" style="color: var(--zq-text-placeholder);" @click="startEdit(reply)">{{ t('comment.edit') }}</span>
-                          <span class="text-[10px] cursor-pointer hover:underline" style="color: var(--zq-danger-color, var(--el-color-danger));" @click="deleteComment(reply)">{{ t('comment.delete') }}</span>
-                        </div>
-                      </template>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </div>
-        </div>
-
-        <!-- Comment input (chat style) -->
-        <div class="flex-shrink-0 px-4 py-3" style="border-top: 1px solid var(--zq-border-color-light);">
-          <div v-if="replyTo" class="flex items-center gap-1.5 mb-2 px-1">
-            <span class="text-[11px]" style="color: var(--zq-brand-color);">{{ t('comment.reply') }}</span>
-            <UserAvatar :user-id="replyTo.user_id" :size="16" :font-size="7" :shadow="false" :show-popover="false" show-info hide-username info-position="right" auto-load />
-            <span class="text-[11px] cursor-pointer hover:opacity-70" style="color: var(--zq-text-placeholder);" @click="cancelReply">&times;</span>
-          </div>
-          <div
-            class="zq-comment-input-wrap flex items-end rounded-2xl px-3 py-1.5 transition-colors"
-            style="background: var(--zq-bg-secondary); border: 1px solid var(--zq-border-color);"
-          >
-            <textarea
-              ref="commentInputRef"
-              v-model="commentText"
-              class="flex-1 text-[13px] resize-none outline-none bg-transparent py-1 leading-5"
-              style="color: var(--zq-text-primary); max-height: 120px;"
-              :placeholder="t('comment.placeholder')"
-              rows="1"
-              @input="handleCommentInput"
-              @keydown="handleCommentKeydown"
-              @blur="handleCommentBlur"
-            />
-            <button
-              class="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-full ml-1 transition-colors"
-              :class="commentText.trim() ? 'cursor-pointer' : 'cursor-not-allowed opacity-40'"
-              :style="commentText.trim() ? 'background: var(--zq-brand-color); color: #fff;' : 'background: var(--zq-border-color-light); color: var(--zq-text-placeholder);'"
-              :disabled="!commentText.trim()"
-              @click="submitComment"
-            >
-              <ElIcon :size="14"><ArrowRight /></ElIcon>
-            </button>
-          </div>
-          <div class="text-[10px] mt-1 px-1" style="color: var(--zq-text-placeholder);">
-            Enter {{ t('comment.send') }}，Shift+Enter {{ t('common.newLine') }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- @mention dropdown -->
-    <MentionDropdown
-      ref="mentionRef"
-      v-model:visible="mentionVisible"
-      :query="mentionQuery"
-      :anchor-el="commentInputRef"
-      placement="top"
-      @select="handleMentionSelect"
-    />
-  </ZqDrawer>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/TableGrid.vue b/web/apps/web-ele/src/components/zq-smart-table/table/TableGrid.vue
deleted file mode 100644
index c4f3b31..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/TableGrid.vue
+++ /dev/null
@@ -1,1952 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
-import { useVirtualizer } from '@tanstack/vue-virtual'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FieldType, type FieldConfig } from '#/types/zq-smart-table/field'
-import type { SummaryAggregation } from '#/types/zq-smart-table/table'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { reorderRecordsApi } from '#/api/smart-table'
-import CellRenderer from './CellRenderer.vue'
-import RecordDetailDrawer from './RecordDetailDrawer.vue'
-import FieldConfigPopover from './FieldConfigPopover.vue'
-import FieldIcon from '#/components/zq-smart-table/icons/FieldIcon.vue'
-import {
-  Plus, Delete, Expand, ArrowLeft, ArrowRight, ArrowDown,
-  CopyDocument, Hide, Edit, Filter, SortDown, SortUp, RemoveFilled,
-  DocumentCopy, Top, Bottom, Rank, Lock, Unlock,
-  Loading, CaretRight, InfoFilled,
-} from '@element-plus/icons-vue'
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-const editingCell = ref<{ recordId: string; fieldId: string } | null>(null)
-const hoveredRow = ref<string | null>(null)
-const selectedRows = ref<Set<string>>(new Set())
-const detailRecordId = ref<string | null>(null)
-const showDetail = ref(false)
-const resizingField = ref<string | null>(null)
-const resizeStartX = ref(0)
-const resizeStartWidth = ref(0)
-const tableRef = ref<HTMLElement | null>(null)
-const summaryRowRef = ref<HTMLElement | null>(null)
-const showShortcutHelp = ref(false)
-const renamingFieldId = ref<string | null>(null)
-const cellErrors = ref<Record<string, string>>({})  // "recordId:fieldId" -> error message
-const renamingFieldValue = ref('')
-const renameInputRef = ref<HTMLInputElement | null>(null)
-
-// Row height from view config
-const rowHeightMap: Record<string, number> = { short: 28, medium: 36, tall: 48, extraTall: 64 }
-
-// Add/Edit field popover
-const showAddFieldPopover = ref(false)
-const editingField = ref<FieldConfig | null>(null)
-const addFieldAnchor = ref<string | null>(null)
-const addFieldPosition = ref<'left' | 'right'>('right')
-const addFieldBtnRef = ref<HTMLElement | null>(null)
-const fieldPopoverPos = ref({ top: '50px', left: '12px', maxHeight: 'calc(100vh - 100px)' })
-
-// Header context menu state
-const contextMenuField = ref<FieldConfig | null>(null)
-const contextMenuVisible = ref(false)
-const contextMenuPos = ref({ x: 0, y: 0 })
-
-// Row context menu state
-const rowContextMenuRecord = ref<string | null>(null)
-const rowContextMenuVisible = ref(false)
-const rowContextMenuPos = ref({ x: 0, y: 0 })
-
-// Focused cell for keyboard navigation (not editing, just focused)
-const focusedCell = ref<{ recordId: string; fieldId: string } | null>(null)
-
-// ==================== Region Selection ====================
-const selectionAnchor = ref<{ rowIndex: number; colIndex: number } | null>(null)
-const selectionEnd = ref<{ rowIndex: number; colIndex: number } | null>(null)
-const isSelecting = ref(false)
-
-const selectionRange = computed(() => {
-  if (!selectionAnchor.value || !selectionEnd.value) return null
-  return {
-    startRow: Math.min(selectionAnchor.value.rowIndex, selectionEnd.value.rowIndex),
-    endRow: Math.max(selectionAnchor.value.rowIndex, selectionEnd.value.rowIndex),
-    startCol: Math.min(selectionAnchor.value.colIndex, selectionEnd.value.colIndex),
-    endCol: Math.max(selectionAnchor.value.colIndex, selectionEnd.value.colIndex),
-  }
-})
-
-const hasMultiCellSelection = computed(() => {
-  const r = selectionRange.value
-  return r !== null && (r.startRow !== r.endRow || r.startCol !== r.endCol)
-})
-
-function isCellInSelection(rowIndex: number, colIndex: number): boolean {
-  const r = selectionRange.value
-  if (!r) return false
-  return rowIndex >= r.startRow && rowIndex <= r.endRow && colIndex >= r.startCol && colIndex <= r.endCol
-}
-
-function clearSelection() {
-  selectionAnchor.value = null
-  selectionEnd.value = null
-  isSelecting.value = false
-}
-
-function getCellRowIndex(recordId: string): number {
-  return records.value.findIndex(r => r.id === recordId)
-}
-
-function getCellColIndex(fieldId: string): number {
-  return visibleFields.value.findIndex(f => f.id === fieldId)
-}
-
-function getSelectionBorderClasses(rowIndex: number, colIndex: number): Record<string, boolean> {
-  const r = selectionRange.value
-  if (!r || !isCellInSelection(rowIndex, colIndex)) return {}
-  return {
-    'zq-sel-top': rowIndex === r.startRow,
-    'zq-sel-bottom': rowIndex === r.endRow,
-    'zq-sel-left': colIndex === r.startCol,
-    'zq-sel-right': colIndex === r.endCol,
-  }
-}
-
-// Column drag reorder
-const draggingFieldId = ref<string | null>(null)
-const dragOverFieldId = ref<string | null>(null)
-
-// Row drag reorder
-const draggingRowId = ref<string | null>(null)
-const dragOverRowId = ref<string | null>(null)
-
-const records = computed(() => tableStore.getFilteredRecords())
-const groupedRecords = computed(() => tableStore.getGroupedRecords())
-const hasGroups = computed(() => {
-  const v = tableStore.activeView
-  return v && v.groups.length > 0
-})
-
-const groupGlobalOffsets = computed(() => {
-  const offsets: number[] = []
-  let sum = 0
-  for (const g of groupedRecords.value) {
-    offsets.push(sum)
-    sum += g.records.length
-  }
-  return offsets
-})
-
-function fieldHasFilter(fieldId: string): boolean {
-  const view = tableStore.activeView
-  return !!view?.filters?.some((f) => f.fieldId === fieldId)
-}
-
-function quickFilterField(e: MouseEvent, field: FieldConfig) {
-  e.stopPropagation()
-  const view = tableStore.activeView
-  if (!view) return
-  if (fieldHasFilter(field.id)) {
-    view.filters = view.filters.filter((f) => f.fieldId !== field.id)
-  } else {
-    view.filters.push({ fieldId: field.id, operator: 'isNotEmpty' as any, value: '' })
-  }
-}
-
-const visibleFields = computed(() => {
-  const table = tableStore.activeTable
-  const view = tableStore.activeView
-  if (!table || !view) return []
-  return view.visibleFieldIds
-    .map((id) => table.fields.find((f) => f.id === id))
-    .filter((f) => f && f.visible) as FieldConfig[]
-})
-
-const allSelected = computed(() => {
-  if (records.value.length === 0) return false
-  return records.value.every((r) => selectedRows.value.has(r.id))
-})
-
-// Conditional formatting
-import { FilterOperator, type ConditionalFormatRule } from '#/types/zq-smart-table/table'
-
-function evalCondition(rule: ConditionalFormatRule, record: import('#/types/zq-smart-table/table').Record): boolean {
-  const val = record.values[rule.fieldId]
-  switch (rule.operator) {
-    case FilterOperator.Equals: return val === rule.value
-    case FilterOperator.NotEquals: return val !== rule.value
-    case FilterOperator.Contains: return String(val ?? '').includes(String(rule.value ?? ''))
-    case FilterOperator.NotContains: return !String(val ?? '').includes(String(rule.value ?? ''))
-    case FilterOperator.IsEmpty: return val === null || val === undefined || val === ''
-    case FilterOperator.IsNotEmpty: return val !== null && val !== undefined && val !== ''
-    case FilterOperator.GreaterThan: return Number(val) > Number(rule.value)
-    case FilterOperator.LessThan: return Number(val) < Number(rule.value)
-    default: return false
-  }
-}
-
-function getRowConditionalStyle(record: import('#/types/zq-smart-table/table').Record): { background?: string; color?: string } {
-  const view = tableStore.activeView
-  if (!view?.conditionalFormats?.length) return {}
-  for (const rule of view.conditionalFormats) {
-    if (rule.applyToRow && evalCondition(rule, record)) {
-      return { background: rule.bgColor, color: rule.textColor }
-    }
-  }
-  return {}
-}
-
-function getCellConditionalStyle(record: import('#/types/zq-smart-table/table').Record, fieldId: string): { background?: string; color?: string } {
-  const view = tableStore.activeView
-  if (!view?.conditionalFormats?.length) return {}
-  for (const rule of view.conditionalFormats) {
-    if (!rule.applyToRow && rule.fieldId === fieldId && evalCondition(rule, record)) {
-      return { background: rule.bgColor, color: rule.textColor }
-    }
-  }
-  return {}
-}
-
-function cellMatchesSearch(recordId: string, fieldId: string): boolean {
-  const kw = tableStore.searchText?.trim().toLowerCase()
-  if (!kw) return false
-  const table = tableStore.activeTable
-  if (!table) return false
-  const record = table.records.find((r) => r.id === recordId)
-  if (!record) return false
-  const val = record.values[fieldId]
-  if (val == null) return false
-  return String(val).toLowerCase().includes(kw)
-}
-
-function isFrozenField(fieldId: string): boolean {
-  const view = tableStore.activeView
-  if (!view?.frozenFieldId) return false
-  const frozenIdx = visibleFields.value.findIndex(f => f.id === view.frozenFieldId)
-  if (frozenIdx < 0) return false
-  const fieldIdx = visibleFields.value.findIndex(f => f.id === fieldId)
-  return fieldIdx >= 0 && fieldIdx <= frozenIdx
-}
-
-function isLastFrozenField(fieldId: string): boolean {
-  const view = tableStore.activeView
-  return view?.frozenFieldId === fieldId
-}
-
-function getFrozenLeft(fieldId: string): number {
-  const fieldIdx = visibleFields.value.findIndex(f => f.id === fieldId)
-  if (fieldIdx < 0) return 52
-  let left = 52 // row index column width
-  for (let i = 0; i < fieldIdx; i++) {
-    left += visibleFields.value[i].width
-  }
-  return left
-}
-
-function isTitleField(field: FieldConfig): boolean {
-  return field.type === FieldType.Text && visibleFields.value.length > 0 && visibleFields.value[0].id === field.id
-}
-
-// ==================== Summary Row ====================
-const NUMERIC_FIELD_TYPES = new Set([FieldType.Number, FieldType.Currency, FieldType.Progress, FieldType.Rating])
-
-const SUMMARY_OPTIONS_NUMERIC: { value: SummaryAggregation; labelKey: string }[] = [
-  { value: 'SUM', labelKey: 'summary.sum' },
-  { value: 'AVG', labelKey: 'summary.avg' },
-  { value: 'MIN', labelKey: 'summary.min' },
-  { value: 'MAX', labelKey: 'summary.max' },
-  { value: 'COUNT', labelKey: 'summary.count' },
-  { value: 'COUNTA', labelKey: 'summary.counta' },
-  { value: 'COUNT_EMPTY', labelKey: 'summary.countEmpty' },
-  { value: 'PERCENT_EMPTY', labelKey: 'summary.percentEmpty' },
-  { value: 'PERCENT_FILLED', labelKey: 'summary.percentFilled' },
-]
-
-const SUMMARY_OPTIONS_GENERAL: { value: SummaryAggregation; labelKey: string }[] = [
-  { value: 'COUNT', labelKey: 'summary.count' },
-  { value: 'COUNTA', labelKey: 'summary.counta' },
-  { value: 'COUNT_EMPTY', labelKey: 'summary.countEmpty' },
-  { value: 'PERCENT_EMPTY', labelKey: 'summary.percentEmpty' },
-  { value: 'PERCENT_FILLED', labelKey: 'summary.percentFilled' },
-]
-
-const summaryPopoverFieldId = ref<string | null>(null)
-const summaryPopoverPos = ref<{ top: number; left: number }>({ top: 0, left: 0 })
-
-const hasSummaryConfig = computed(() => {
-  const cfg = tableStore.activeView?.summaryConfig
-  return cfg && Object.keys(cfg).length > 0
-})
-
-const showSummaryRow = computed(() => {
-  return hasSummaryConfig.value || true
-})
-
-function getSummaryOptions(field?: FieldConfig | null) {
-  if (!field) return SUMMARY_OPTIONS_GENERAL
-  return NUMERIC_FIELD_TYPES.has(field.type) ? SUMMARY_OPTIONS_NUMERIC : SUMMARY_OPTIONS_GENERAL
-}
-
-function getFieldSummaryAgg(fieldId: string): SummaryAggregation | null {
-  return tableStore.activeView?.summaryConfig?.[fieldId] ?? null
-}
-
-function summaryLabel(fieldId: string): string {
-  const agg = getFieldSummaryAgg(fieldId)
-  if (!agg) return ''
-  const opt = [...SUMMARY_OPTIONS_NUMERIC].find((o) => o.value === agg)
-  return opt ? t(opt.labelKey) : agg
-}
-
-function formatSummaryValue(fieldId: string): string {
-  const val = tableStore.summaryData[fieldId]
-  if (val === null || val === undefined) return '-'
-  const agg = getFieldSummaryAgg(fieldId)
-  if (agg === 'PERCENT_EMPTY' || agg === 'PERCENT_FILLED') return `${val}%`
-  if (typeof val === 'number') {
-    return Number.isInteger(val) ? String(val) : val.toFixed(2)
-  }
-  return String(val)
-}
-
-function formatGroupSubtotalValue(val: any, fieldId: string): string {
-  if (val === null || val === undefined) return '-'
-  const agg = getFieldSummaryAgg(fieldId)
-  if (agg === 'PERCENT_EMPTY' || agg === 'PERCENT_FILLED') return `${val}%`
-  if (typeof val === 'number') {
-    return Number.isInteger(val) ? String(val) : val.toFixed(2)
-  }
-  return String(val)
-}
-
-function toggleSummaryPopover(fieldId: string, event?: MouseEvent) {
-  if (summaryPopoverFieldId.value === fieldId) {
-    summaryPopoverFieldId.value = null
-    return
-  }
-  summaryPopoverFieldId.value = fieldId
-  if (event) {
-    const td = (event.currentTarget as HTMLElement)
-    const rect = td.getBoundingClientRect()
-    summaryPopoverPos.value = {
-      top: rect.top,
-      left: rect.left,
-    }
-  }
-}
-
-function selectSummaryAgg(fieldId: string, agg: SummaryAggregation | null) {
-  tableStore.updateSummaryConfig(fieldId, agg)
-  summaryPopoverFieldId.value = null
-}
-
-
-const scrollShadow = ref('')
-
-// Computed row height in px (declared before virtualizer so estimateSize can reference it)
-const currentRowHeight = computed(() => rowHeightMap[tableStore.activeView?.rowHeight ?? 'medium'])
-
-// ==================== Virtual Scrolling (TanStack) ====================
-const rowVirtualizer = useVirtualizer(computed(() => ({
-  count: hasGroups.value ? 0 : records.value.length,
-  getScrollElement: () => tableRef.value ?? null,
-  estimateSize: () => currentRowHeight.value || 36,
-  overscan: 10,
-})))
-
-const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
-const beforeVirtualHeight = computed(() => virtualRows.value[0]?.start ?? 0)
-const afterVirtualHeight = computed(() => {
-  const items = virtualRows.value
-  if (items.length === 0) return 0
-  return rowVirtualizer.value.getTotalSize() - items[items.length - 1].end
-})
-
-const virtualRecordRows = computed(() => {
-  const recs = records.value
-  return virtualRows.value
-    .filter(vr => vr.index < recs.length)
-    .map(vr => ({ record: recs[vr.index], index: vr.index }))
-})
-
-// ==================== Grouped Virtual Scrolling (TanStack) ====================
-const groupFlatItems = computed(() => {
-  const items: Array<{
-    type: 'header' | 'data' | 'subtotal'
-    key: string
-    groupIdx: number
-    group: any
-    record?: any
-    recordLocalIdx?: number
-  }> = []
-  if (!hasGroups.value) return items
-  groupedRecords.value.forEach((group, gIdx) => {
-    items.push({ type: 'header', key: `h-${group.key}`, groupIdx: gIdx, group })
-    if (!tableStore.isGroupCollapsed(group.key)) {
-      group.records.forEach((record: any, rIdx: number) => {
-        items.push({ type: 'data', key: `d-${record.id}`, groupIdx: gIdx, group, record, recordLocalIdx: rIdx })
-      })
-      if (hasSummaryConfig.value) {
-        items.push({ type: 'subtotal', key: `s-${group.key}`, groupIdx: gIdx, group })
-      }
-    }
-  })
-  return items
-})
-
-const groupVirtualizer = useVirtualizer(computed(() => ({
-  count: hasGroups.value ? groupFlatItems.value.length : 0,
-  getScrollElement: () => tableRef.value ?? null,
-  estimateSize: (index: number) => {
-    const item = groupFlatItems.value[index]
-    if (!item) return 36
-    if (item.type === 'header') return 36
-    if (item.type === 'subtotal') return 30
-    return currentRowHeight.value || 36
-  },
-  overscan: 10,
-})))
-
-const groupVirtualRows = computed(() => groupVirtualizer.value.getVirtualItems())
-const beforeGroupHeight = computed(() => groupVirtualRows.value[0]?.start ?? 0)
-const afterGroupHeight = computed(() => {
-  const items = groupVirtualRows.value
-  if (items.length === 0) return 0
-  return groupVirtualizer.value.getTotalSize() - items[items.length - 1].end
-})
-const virtualGroupItems = computed(() => {
-  const flat = groupFlatItems.value
-  return groupVirtualRows.value
-    .filter(vr => vr.index < flat.length)
-    .map(vr => flat[vr.index]!)
-})
-
-const LOAD_MORE_THRESHOLD = 300
-
-function handleTableScroll() {
-  const el = tableRef.value
-  if (!el) return
-
-  if (summaryRowRef.value) {
-    summaryRowRef.value.scrollLeft = el.scrollLeft
-  }
-
-  const left = el.scrollLeft > 0
-  const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1
-  if (left && right) scrollShadow.value = 'zq-scroll-shadow-both'
-  else if (left) scrollShadow.value = 'zq-scroll-shadow-left'
-  else if (right) scrollShadow.value = 'zq-scroll-shadow-right'
-  else scrollShadow.value = ''
-
-  // Infinite scroll: load more when near bottom
-  const distanceToBottom = el.scrollHeight - el.scrollTop - el.clientHeight
-  if (distanceToBottom < LOAD_MORE_THRESHOLD && !tableStore.loadingMore) {
-    tableStore.loadMoreRecords()
-  }
-}
-
-function toggleSelectAll() {
-  if (allSelected.value) {
-    selectedRows.value.clear()
-  } else {
-    records.value.forEach((r) => selectedRows.value.add(r.id))
-  }
-}
-
-const lastSelectedRowId = ref<string | null>(null)
-
-function toggleSelect(id: string, event?: Event) {
-  const e = event as MouseEvent | undefined
-  if (e?.shiftKey && lastSelectedRowId.value) {
-    // Range select
-    const recs = records.value
-    const startIdx = recs.findIndex((r) => r.id === lastSelectedRowId.value)
-    const endIdx = recs.findIndex((r) => r.id === id)
-    if (startIdx !== -1 && endIdx !== -1) {
-      const [from, to] = startIdx < endIdx ? [startIdx, endIdx] : [endIdx, startIdx]
-      for (let i = from; i <= to; i++) {
-        selectedRows.value.add(recs[i].id)
-      }
-    }
-  } else {
-    if (selectedRows.value.has(id)) {
-      selectedRows.value.delete(id)
-    } else {
-      selectedRows.value.add(id)
-    }
-  }
-  lastSelectedRowId.value = id
-}
-
-function batchDelete() {
-  selectedRows.value.forEach((id) => tableStore.deleteRecord(id))
-  selectedRows.value.clear()
-}
-
-function batchDuplicate() {
-  selectedRows.value.forEach((id) => tableStore.duplicateRecord(id))
-  selectedRows.value.clear()
-}
-
-function isEditing(recordId: string, fieldId: string) {
-  return editingCell.value?.recordId === recordId && editingCell.value?.fieldId === fieldId
-}
-
-const READONLY_FIELD_TYPES = new Set([
-  FieldType.CreatedTime, FieldType.ModifiedTime,
-  FieldType.CreatedBy, FieldType.ModifiedBy,
-  FieldType.AutoNumber, FieldType.Formula,
-])
-
-function startEdit(recordId: string, fieldId: string) {
-  const field = tableStore.activeTable?.fields.find((f) => f.id === fieldId)
-  if (field && READONLY_FIELD_TYPES.has(field.type)) return
-  editingCell.value = { recordId, fieldId }
-}
-
-function endEdit() {
-  editingCell.value = null
-}
-
-const VALIDATION_I18N_MAP: Record<string, string> = {
-  required: 'validation.required',
-  min: 'validation.minError',
-  max: 'validation.maxError',
-  minLength: 'validation.minLengthError',
-  maxLength: 'validation.maxLengthError',
-  pattern: 'validation.patternError',
-}
-
-function handleCellUpdate(recordId: string, fieldId: string, value: unknown) {
-  const field = tableStore.activeTable?.fields.find((f) => f.id === fieldId)
-  const errKey = `${recordId}:${fieldId}`
-  if (field) {
-    const result = tableStore.validateCell(field, value)
-    if (result) {
-      const i18nKey = VALIDATION_I18N_MAP[result.rule] || `validation.${result.rule}`
-      const msg = result.message || t(i18nKey, result.params)
-      cellErrors.value[errKey] = msg
-      ElMessage.warning(msg)
-      return
-    }
-  }
-  delete cellErrors.value[errKey]
-  tableStore.updateCellValue(recordId, fieldId, value)
-}
-
-function handleCellClick(e: MouseEvent, recordId: string, fieldId: string) {
-  e.stopPropagation()
-}
-
-function handleCellDblClick(e: MouseEvent, recordId: string, fieldId: string) {
-  e.stopPropagation()
-  if (!isEditing(recordId, fieldId)) {
-    startEdit(recordId, fieldId)
-    focusedCell.value = null
-    clearSelection()
-  }
-}
-
-function handleCellMouseDown(e: MouseEvent, recordId: string, fieldId: string) {
-  if (e.button !== 0) return
-  // Don't interfere if clicking inside the currently editing cell's interactive elements
-  if (isEditing(recordId, fieldId)) return
-  const target = e.target as HTMLElement
-  if (target.closest('.el-select') || target.closest('.el-input') || target.closest('.el-checkbox') || target.closest('.el-rate') || target.closest('.el-slider') || target.closest('.el-date-editor')) return
-
-  const ri = getCellRowIndex(recordId)
-  const ci = getCellColIndex(fieldId)
-  if (ri === -1 || ci === -1) return
-
-  if (editingCell.value) {
-    endEdit()
-  }
-
-  if (e.shiftKey && selectionAnchor.value) {
-    selectionEnd.value = { rowIndex: ri, colIndex: ci }
-    focusedCell.value = { recordId, fieldId }
-  } else {
-    selectionAnchor.value = { rowIndex: ri, colIndex: ci }
-    selectionEnd.value = { rowIndex: ri, colIndex: ci }
-    focusedCell.value = { recordId, fieldId }
-    isSelecting.value = true
-  }
-}
-
-const fieldIdSet = computed(() => new Set(visibleFields.value.map(f => f.id)))
-
-function parseCellKey(cellKey: string): { recordId: string; fieldId: string } | null {
-  const fids = fieldIdSet.value
-  for (const f of fids) {
-    const suffix = '-' + f
-    if (cellKey.endsWith(suffix)) {
-      const recordId = cellKey.substring(0, cellKey.length - suffix.length)
-      return { recordId, fieldId: f }
-    }
-  }
-  return null
-}
-
-function handleTableMouseMove(e: MouseEvent) {
-  if (!isSelecting.value || !tableRef.value) return
-
-  const target = document.elementFromPoint(e.clientX, e.clientY) as HTMLElement | null
-  if (!target) return
-  const td = target.closest('td[data-cell]') as HTMLElement | null
-  if (!td) return
-
-  const cellKey = td.getAttribute('data-cell')
-  if (!cellKey) return
-  const parsed = parseCellKey(cellKey)
-  if (!parsed) return
-
-  const ri = getCellRowIndex(parsed.recordId)
-  const ci = getCellColIndex(parsed.fieldId)
-  if (ri === -1 || ci === -1) return
-
-  selectionEnd.value = { rowIndex: ri, colIndex: ci }
-  focusedCell.value = { recordId: parsed.recordId, fieldId: parsed.fieldId }
-}
-
-function handleDocumentMouseUp() {
-  if (isSelecting.value) {
-    isSelecting.value = false
-  }
-}
-
-function openDetail(recordId: string) {
-  detailRecordId.value = recordId
-  showDetail.value = true
-}
-
-function startResize(e: MouseEvent, field: FieldConfig) {
-  e.preventDefault()
-  e.stopPropagation()
-  resizingField.value = field.id
-  resizeStartX.value = e.clientX
-  resizeStartWidth.value = field.width
-
-  const onMouseMove = (ev: MouseEvent) => {
-    const delta = ev.clientX - resizeStartX.value
-    const f = tableStore.activeTable?.fields.find((ff) => ff.id === resizingField.value)
-    if (f) f.width = Math.max(60, resizeStartWidth.value + delta)
-  }
-  const onMouseUp = () => {
-    resizingField.value = null
-    document.removeEventListener('mousemove', onMouseMove)
-    document.removeEventListener('mouseup', onMouseUp)
-  }
-  document.addEventListener('mousemove', onMouseMove)
-  document.addEventListener('mouseup', onMouseUp)
-}
-
-function autoFitColumnWidth(field: FieldConfig) {
-  const table = tableStore.activeTable
-  if (!table) return
-  const recs = records.value
-  // Measure the widest content
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d')
-  if (!ctx) return
-  ctx.font = '12px system-ui, -apple-system, sans-serif'
-  let maxW = ctx.measureText(field.name).width + 40 // header with icon and padding
-  for (const r of recs) {
-    const val = r.values[field.id]
-    if (val != null) {
-      const w = ctx.measureText(String(val)).width + 32
-      if (w > maxW) maxW = w
-    }
-  }
-  field.width = Math.max(80, Math.min(500, Math.ceil(maxW)))
-}
-
-// Column drag reorder handlers
-function handleColDragStart(e: DragEvent, fieldId: string) {
-  draggingFieldId.value = fieldId
-  if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', fieldId)
-  }
-}
-
-function handleColDragOver(e: DragEvent, fieldId: string) {
-  e.preventDefault()
-  if (draggingFieldId.value && draggingFieldId.value !== fieldId) {
-    dragOverFieldId.value = fieldId
-  }
-}
-
-function handleColDrop(e: DragEvent, targetFieldId: string) {
-  e.preventDefault()
-  const srcId = draggingFieldId.value
-  if (!srcId || srcId === targetFieldId) {
-    draggingFieldId.value = null
-    dragOverFieldId.value = null
-    return
-  }
-  const view = tableStore.activeView
-  if (!view) return
-  const ids = [...view.visibleFieldIds]
-  const srcIdx = ids.indexOf(srcId)
-  const tgtIdx = ids.indexOf(targetFieldId)
-  if (srcIdx === -1 || tgtIdx === -1) return
-  ids.splice(srcIdx, 1)
-  ids.splice(tgtIdx, 0, srcId)
-  view.visibleFieldIds = ids
-  draggingFieldId.value = null
-  dragOverFieldId.value = null
-  tableStore.saveActiveViewConfig()
-}
-
-function handleColDragEnd() {
-  draggingFieldId.value = null
-  dragOverFieldId.value = null
-}
-
-// Row drag reorder handlers
-function handleRowDragStart(e: DragEvent, recordId: string) {
-  draggingRowId.value = recordId
-  if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', recordId)
-  }
-}
-
-function handleRowDragOver(e: DragEvent, recordId: string) {
-  e.preventDefault()
-  if (draggingRowId.value && draggingRowId.value !== recordId) {
-    dragOverRowId.value = recordId
-  }
-}
-
-function handleRowDrop(e: DragEvent, targetId: string) {
-  e.preventDefault()
-  const srcId = draggingRowId.value
-  if (!srcId || srcId === targetId) {
-    draggingRowId.value = null
-    dragOverRowId.value = null
-    return
-  }
-  const table = tableStore.activeTable
-  if (!table) return
-  const recs = table.records
-  const srcIdx = recs.findIndex((r) => r.id === srcId)
-  const tgtIdx = recs.findIndex((r) => r.id === targetId)
-  if (srcIdx === -1 || tgtIdx === -1) return
-  const [moved] = recs.splice(srcIdx, 1)
-  recs.splice(tgtIdx, 0, moved)
-  draggingRowId.value = null
-  dragOverRowId.value = null
-
-  const orderedIds = recs.map((r) => r.id)
-  reorderRecordsApi(table.id, orderedIds).catch((err) =>
-    console.error('[SmartTable] Failed to persist row order', err),
-  )
-}
-
-function handleRowDragEnd() {
-  draggingRowId.value = null
-  dragOverRowId.value = null
-}
-
-function handleClickOutside(e: MouseEvent) {
-  const target = e.target as HTMLElement
-  // Close header context menu
-  if (contextMenuVisible.value && !target.closest('.zq-header-context-menu')) {
-    contextMenuVisible.value = false
-  }
-  // Close row context menu
-  if (rowContextMenuVisible.value && !target.closest('.zq-row-context-menu')) {
-    rowContextMenuVisible.value = false
-  }
-  // Close summary popover
-  if (summaryPopoverFieldId.value && !target.closest('.zq-summary-row') && !target.closest('.zq-summary-popover')) {
-    summaryPopoverFieldId.value = null
-  }
-  // Close editing cell
-  if (!editingCell.value) return
-  if (
-    target.closest('.el-popper') ||
-    target.closest('.el-select-dropdown') ||
-    target.closest('.el-picker-panel') ||
-    target.closest('.el-date-picker') ||
-    target.closest('.el-select__popper') ||
-    target.closest('.zq-field-config-popover') ||
-    target.closest('.el-dialog') ||
-    target.closest('.el-overlay') ||
-    target.closest('.el-dialog__wrapper') ||
-    target.closest('.zq-dialog') ||
-    target.closest('.el-cascader-panel') ||
-    target.closest('.el-cascader__dropdown') ||
-    target.closest('.el-image-viewer__wrapper')
-  ) {
-    return
-  }
-  if (tableRef.value && !tableRef.value.contains(target)) {
-    editingCell.value = null
-    focusedCell.value = null
-    clearSelection()
-  }
-}
-
-// Header right-click context menu
-function handleHeaderContextMenu(e: MouseEvent, field: FieldConfig) {
-  e.preventDefault()
-  e.stopPropagation()
-  contextMenuField.value = field
-  contextMenuPos.value = { x: e.clientX, y: e.clientY }
-  contextMenuVisible.value = true
-}
-
-// Header arrow click — reuse the same context menu, positioned below the arrow
-function handleHeaderArrowClick(e: MouseEvent, field: FieldConfig) {
-  const el = e.currentTarget as HTMLElement
-  const rect = el.getBoundingClientRect()
-  contextMenuField.value = field
-  contextMenuPos.value = { x: rect.right - 180, y: rect.bottom + 4 }
-  contextMenuVisible.value = true
-}
-
-function handleHeaderCommand(cmd: string, field: FieldConfig) {
-  contextMenuVisible.value = false
-  const view = tableStore.activeView
-  if (!view) return
-
-  switch (cmd) {
-    case 'sortAsc':
-      view.sorts = [{ fieldId: field.id, direction: 'asc' }]
-      break
-    case 'sortDesc':
-      view.sorts = [{ fieldId: field.id, direction: 'desc' }]
-      break
-    case 'clearSort':
-      view.sorts = view.sorts.filter((s) => s.fieldId !== field.id)
-      break
-    case 'filterByField':
-      view.filters.push({ fieldId: field.id, operator: 'isNotEmpty' as any, value: '' })
-      break
-    case 'hide':
-      field.visible = false
-      break
-    case 'rename':
-      renamingFieldId.value = field.id
-      renamingFieldValue.value = field.name
-      nextTick(() => renameInputRef.value?.focus())
-      break
-    case 'editField': {
-      editingField.value = field
-      const thEl = tableRef.value?.querySelector(`th[data-field-id="${field.id}"]`) as HTMLElement | null
-      if (thEl) fieldPopoverPos.value = calcPopoverPos(thEl.getBoundingClientRect())
-      showAddFieldPopover.value = true
-      break
-    }
-    case 'duplicate':
-      tableStore.duplicateField(field.id)
-      break
-    case 'insertLeft': {
-      addFieldAnchor.value = field.id
-      addFieldPosition.value = 'left'
-      editingField.value = null
-      const thL = tableRef.value?.querySelector(`th[data-field-id="${field.id}"]`) as HTMLElement | null
-      if (thL) fieldPopoverPos.value = calcPopoverPos(thL.getBoundingClientRect())
-      showAddFieldPopover.value = true
-      break
-    }
-    case 'insertRight': {
-      addFieldAnchor.value = field.id
-      addFieldPosition.value = 'right'
-      editingField.value = null
-      const thR = tableRef.value?.querySelector(`th[data-field-id="${field.id}"]`) as HTMLElement | null
-      if (thR) fieldPopoverPos.value = calcPopoverPos(thR.getBoundingClientRect(), 'right')
-      showAddFieldPopover.value = true
-      break
-    }
-    case 'delete':
-      ElMessageBox.confirm(
-        `${t('table.deleteField')}: ${field.name}?`,
-        { type: 'warning', confirmButtonText: t('common.confirm'), cancelButtonText: t('common.cancel') },
-      ).then(() => tableStore.deleteField(field.id)).catch(() => {})
-      break
-    case 'freeze':
-      view.frozenFieldId = field.id
-      break
-    case 'unfreeze':
-      view.frozenFieldId = undefined
-      break
-    default:
-      if (cmd.startsWith('filterByValue:')) {
-        const optId = cmd.slice('filterByValue:'.length)
-        view.filters = [{ fieldId: field.id, operator: 'equals' as any, value: optId }]
-      }
-      break
-  }
-}
-
-const POPOVER_WIDTH = 320
-const POPOVER_MARGIN = 12
-
-function calcPopoverPos(rect: DOMRect, anchorSide: 'left' | 'right' = 'left') {
-  const topPx = rect.bottom + 4
-  let leftPx = anchorSide === 'right' ? rect.right : rect.left
-  const maxLeft = window.innerWidth - POPOVER_WIDTH - POPOVER_MARGIN
-  if (leftPx > maxLeft) leftPx = maxLeft
-  if (leftPx < POPOVER_MARGIN) leftPx = POPOVER_MARGIN
-  const availableHeight = window.innerHeight - topPx - 20
-  const maxH = Math.max(300, availableHeight)
-  return { top: topPx + 'px', left: leftPx + 'px', maxHeight: maxH + 'px' }
-}
-
-function openAddFieldPopover() {
-  editingField.value = null
-  addFieldAnchor.value = null
-  if (addFieldBtnRef.value) {
-    const rect = addFieldBtnRef.value.getBoundingClientRect()
-    fieldPopoverPos.value = calcPopoverPos(rect)
-  }
-  showAddFieldPopover.value = true
-}
-
-function closeFieldPopover() {
-  showAddFieldPopover.value = false
-  editingField.value = null
-  addFieldAnchor.value = null
-}
-
-function confirmRename() {
-  if (renamingFieldId.value && renamingFieldValue.value.trim()) {
-    tableStore.renameField(renamingFieldId.value, renamingFieldValue.value.trim())
-  }
-  renamingFieldId.value = null
-  renamingFieldValue.value = ''
-}
-
-function cancelRename() {
-  renamingFieldId.value = null
-  renamingFieldValue.value = ''
-}
-
-// Row context menu
-function handleRowContextMenu(e: MouseEvent, recordId: string) {
-  e.preventDefault()
-  e.stopPropagation()
-  rowContextMenuRecord.value = recordId
-  rowContextMenuPos.value = { x: e.clientX, y: e.clientY }
-  rowContextMenuVisible.value = true
-}
-
-function handleRowCommand(cmd: string) {
-  const recordId = rowContextMenuRecord.value
-  rowContextMenuVisible.value = false
-  if (!recordId) return
-
-  switch (cmd) {
-    case 'expand':
-      openDetail(recordId)
-      break
-    case 'insertAbove':
-      tableStore.insertRecord(recordId, 'above')
-      break
-    case 'insertBelow':
-      tableStore.insertRecord(recordId, 'below')
-      break
-    case 'duplicate':
-      tableStore.duplicateRecord(recordId)
-      break
-    case 'delete':
-      ElMessageBox.confirm(
-        t('table.deleteRecordConfirm'),
-        { type: 'warning', confirmButtonText: t('common.confirm'), cancelButtonText: t('common.cancel') },
-      ).then(() => {
-        tableStore.deleteRecord(recordId)
-        selectedRows.value.delete(recordId)
-      }).catch(() => {})
-      break
-    case 'copy':
-      copyRecordToClipboard(recordId)
-      break
-  }
-}
-
-function copyRecordToClipboard(recordId: string) {
-  const table = tableStore.activeTable
-  if (!table) return
-  const record = table.records.find((r) => r.id === recordId)
-  if (!record) return
-  const text = visibleFields.value
-    .map((f) => `${f.name}: ${record.values[f.id] ?? ''}`)
-    .join('\n')
-  navigator.clipboard.writeText(text).then(() => {
-    ElMessage.success(t('table.copiedToClipboard'))
-  }).catch(() => {})
-}
-
-// ==================== Cell value <-> text conversion ====================
-function cellValueToText(val: unknown, field: FieldConfig): string {
-  if (val == null) return ''
-  if (field.type === FieldType.SingleSelect) {
-    const opt = field.options?.find(o => o.id === val)
-    return opt?.label ?? String(val)
-  }
-  if (field.type === FieldType.MultiSelect) {
-    if (Array.isArray(val)) {
-      return val.map(v => {
-        const opt = field.options?.find(o => o.id === v)
-        return opt?.label ?? String(v)
-      }).join(',')
-    }
-    return String(val)
-  }
-  if (field.type === FieldType.Checkbox) return val ? 'TRUE' : 'FALSE'
-  if (Array.isArray(val)) return val.join(',')
-  return String(val)
-}
-
-function parseTextToValue(text: string, field: FieldConfig): unknown {
-  const trimmed = text.trim()
-  if (trimmed === '') return null
-  switch (field.type) {
-    case FieldType.Number:
-    case FieldType.Progress:
-    case FieldType.Rating:
-    case FieldType.Currency: {
-      const num = Number(trimmed)
-      return isNaN(num) ? null : num
-    }
-    case FieldType.Checkbox:
-      return trimmed.toLowerCase() === 'true' || trimmed === '1'
-    case FieldType.SingleSelect: {
-      const opt = field.options?.find(o => o.label === trimmed || o.id === trimmed)
-      return opt?.id ?? null
-    }
-    case FieldType.MultiSelect: {
-      const labels = trimmed.split(',').map(s => s.trim()).filter(Boolean)
-      return labels.map(label => {
-        const opt = field.options?.find(o => o.label === label || o.id === label)
-        return opt?.id ?? label
-      })
-    }
-    default:
-      return trimmed
-  }
-}
-
-// ==================== Copy / Paste / Clear range ====================
-function copySelectionToClipboard() {
-  const range = selectionRange.value
-  if (!range) {
-    if (focusedCell.value) {
-      const ri = getCellRowIndex(focusedCell.value.recordId)
-      const ci = getCellColIndex(focusedCell.value.fieldId)
-      if (ri === -1 || ci === -1) return
-      const val = records.value[ri]?.values[visibleFields.value[ci].id]
-      const text = cellValueToText(val, visibleFields.value[ci])
-      navigator.clipboard.writeText(text).then(() => {
-        ElMessage.success(t('table.copiedToClipboard'))
-      }).catch(() => {})
-    }
-    return
-  }
-  const recs = records.value
-  const fields = visibleFields.value
-  const lines: string[] = []
-  for (let r = range.startRow; r <= range.endRow; r++) {
-    if (r >= recs.length) break
-    const row: string[] = []
-    for (let c = range.startCol; c <= range.endCol; c++) {
-      if (c >= fields.length) break
-      row.push(cellValueToText(recs[r].values[fields[c].id], fields[c]))
-    }
-    lines.push(row.join('\t'))
-  }
-  const text = lines.join('\n')
-  navigator.clipboard.writeText(text).then(() => {
-    const rowCount = range.endRow - range.startRow + 1
-    const colCount = range.endCol - range.startCol + 1
-    ElMessage.success(t('toolbar.copiedRowCol', { rows: rowCount, cols: colCount }))
-  }).catch(() => {})
-}
-
-function pasteFromClipboard() {
-  const anchor = selectionAnchor.value ?? (focusedCell.value ? { rowIndex: getCellRowIndex(focusedCell.value.recordId), colIndex: getCellColIndex(focusedCell.value.fieldId) } : null)
-  if (!anchor || anchor.rowIndex === -1 || anchor.colIndex === -1) return
-
-  navigator.clipboard.readText().then((text) => {
-    if (!text.trim()) return
-    const recs = records.value
-    const fields = visibleFields.value
-    const rows = text.split('\n').filter(line => line.length > 0)
-    const data = rows.map(row => row.split('\t'))
-
-    let pastedRows = 0
-    let pastedCols = 0
-    for (let r = 0; r < data.length; r++) {
-      const targetRowIdx = anchor.rowIndex + r
-      if (targetRowIdx >= recs.length) break
-      for (let c = 0; c < data[r].length; c++) {
-        const targetColIdx = anchor.colIndex + c
-        if (targetColIdx >= fields.length) break
-        const field = fields[targetColIdx]
-        if (READONLY_FIELD_TYPES.has(field.type)) continue
-        const parsed = parseTextToValue(data[r][c], field)
-        tableStore.updateCellValue(recs[targetRowIdx].id, field.id, parsed)
-        if (c + 1 > pastedCols) pastedCols = c + 1
-      }
-      pastedRows++
-    }
-
-    if (pastedRows > 0) {
-      selectionAnchor.value = { rowIndex: anchor.rowIndex, colIndex: anchor.colIndex }
-      selectionEnd.value = {
-        rowIndex: Math.min(anchor.rowIndex + pastedRows - 1, recs.length - 1),
-        colIndex: Math.min(anchor.colIndex + pastedCols - 1, fields.length - 1),
-      }
-      ElMessage.success(t('toolbar.pastedRowCol', { rows: pastedRows, cols: pastedCols }))
-    }
-  }).catch(() => {})
-}
-
-function clearSelectionValues() {
-  const range = selectionRange.value
-  if (!range) {
-    if (focusedCell.value) {
-      const field = visibleFields.value.find(f => f.id === focusedCell.value!.fieldId)
-      if (field && !READONLY_FIELD_TYPES.has(field.type)) {
-        tableStore.updateCellValue(focusedCell.value.recordId, focusedCell.value.fieldId, null)
-      }
-    }
-    return
-  }
-  const recs = records.value
-  const fields = visibleFields.value
-  for (let r = range.startRow; r <= range.endRow; r++) {
-    if (r >= recs.length) break
-    for (let c = range.startCol; c <= range.endCol; c++) {
-      if (c >= fields.length) break
-      if (READONLY_FIELD_TYPES.has(fields[c].type)) continue
-      tableStore.updateCellValue(recs[r].id, fields[c].id, null)
-    }
-  }
-}
-
-// Keyboard navigation
-function handleKeyDown(e: KeyboardEvent) {
-  const target = e.target as HTMLElement
-  if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) return
-
-  if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
-    e.preventDefault()
-    if (e.shiftKey) tableStore.redo()
-    else tableStore.undo()
-    return
-  }
-
-  if ((e.ctrlKey || e.metaKey) && e.key === '/') {
-    e.preventDefault()
-    showShortcutHelp.value = !showShortcutHelp.value
-    return
-  }
-
-  // Ctrl+A: select all cells
-  if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
-    e.preventDefault()
-    const recs = records.value
-    const fields = visibleFields.value
-    if (recs.length > 0 && fields.length > 0) {
-      selectionAnchor.value = { rowIndex: 0, colIndex: 0 }
-      selectionEnd.value = { rowIndex: recs.length - 1, colIndex: fields.length - 1 }
-      focusedCell.value = { recordId: recs[0].id, fieldId: fields[0].id }
-    }
-    return
-  }
-
-  const recs = records.value
-  const fields = visibleFields.value
-  if (recs.length === 0 || fields.length === 0) return
-
-  const current = focusedCell.value || editingCell.value
-  if (!current) return
-
-  const ri = recs.findIndex((r) => r.id === current.recordId)
-  const fi = fields.findIndex((f) => f.id === current.fieldId)
-  if (ri === -1 || fi === -1) return
-
-  let newRi = ri
-  let newFi = fi
-  let handled = false
-
-  switch (e.key) {
-    case 'ArrowUp':
-      if (!editingCell.value) { newRi = Math.max(0, ri - 1); handled = true }
-      break
-    case 'ArrowDown':
-      if (!editingCell.value) { newRi = Math.min(recs.length - 1, ri + 1); handled = true }
-      break
-    case 'ArrowLeft':
-      if (!editingCell.value) { newFi = Math.max(0, fi - 1); handled = true }
-      break
-    case 'ArrowRight':
-      if (!editingCell.value) { newFi = Math.min(fields.length - 1, fi + 1); handled = true }
-      break
-    case 'Tab':
-      e.preventDefault()
-      if (e.shiftKey) {
-        if (fi > 0) { newFi = fi - 1 }
-        else if (ri > 0) { newRi = ri - 1; newFi = fields.length - 1 }
-      } else {
-        if (fi < fields.length - 1) { newFi = fi + 1 }
-        else if (ri < recs.length - 1) { newRi = ri + 1; newFi = 0 }
-      }
-      handled = true
-      break
-    case 'Enter':
-      if (editingCell.value) {
-        endEdit()
-        focusedCell.value = { recordId: current.recordId, fieldId: current.fieldId }
-      } else if (focusedCell.value) {
-        startEdit(focusedCell.value.recordId, focusedCell.value.fieldId)
-        focusedCell.value = null
-        clearSelection()
-      }
-      handled = true
-      break
-    case 'Escape':
-      if (editingCell.value) {
-        focusedCell.value = { recordId: current.recordId, fieldId: current.fieldId }
-        endEdit()
-      } else if (hasMultiCellSelection.value) {
-        clearSelection()
-        focusedCell.value = { recordId: current.recordId, fieldId: current.fieldId }
-      } else if (focusedCell.value) {
-        focusedCell.value = null
-        clearSelection()
-      }
-      if (selectedRows.value.size > 0) selectedRows.value.clear()
-      handled = true
-      break
-    case 'c':
-      if ((e.ctrlKey || e.metaKey) && !editingCell.value) {
-        copySelectionToClipboard()
-        handled = true
-      }
-      break
-    case 'v':
-      if ((e.ctrlKey || e.metaKey) && !editingCell.value) {
-        pasteFromClipboard()
-        handled = true
-      }
-      break
-    case 'Delete':
-    case 'Backspace':
-      if (!editingCell.value) {
-        clearSelectionValues()
-        handled = true
-      }
-      break
-    default:
-      if (!editingCell.value && focusedCell.value && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-        const field = fields.find((f) => f.id === focusedCell.value!.fieldId)
-        if (field && (field.type === FieldType.Text || field.type === FieldType.Number || field.type === FieldType.URL || field.type === FieldType.Email || field.type === FieldType.Phone || field.type === FieldType.Currency || field.type === FieldType.Location)) {
-          tableStore.updateCellValue(focusedCell.value.recordId, focusedCell.value.fieldId, e.key)
-          startEdit(focusedCell.value.recordId, focusedCell.value.fieldId)
-          focusedCell.value = null
-          clearSelection()
-          handled = true
-        }
-      }
-      if (!handled) return
-  }
-
-  if (handled) {
-    e.preventDefault()
-    if (newRi !== ri || newFi !== fi) {
-      const newRecordId = recs[newRi].id
-      const newFieldId = fields[newFi].id
-      if (editingCell.value) endEdit()
-      focusedCell.value = { recordId: newRecordId, fieldId: newFieldId }
-
-      // Shift+Arrow: extend selection; otherwise reset to single cell
-      if (e.shiftKey && (e.key.startsWith('Arrow'))) {
-        if (!selectionAnchor.value) {
-          selectionAnchor.value = { rowIndex: ri, colIndex: fi }
-        }
-        selectionEnd.value = { rowIndex: newRi, colIndex: newFi }
-      } else {
-        selectionAnchor.value = { rowIndex: newRi, colIndex: newFi }
-        selectionEnd.value = { rowIndex: newRi, colIndex: newFi }
-      }
-
-      if (!hasGroups.value) {
-        rowVirtualizer.value.scrollToIndex(newRi, { align: 'auto' })
-      } else {
-        const flatIdx = groupFlatItems.value.findIndex(
-          item => item.type === 'data' && item.record?.id === newRecordId,
-        )
-        if (flatIdx !== -1) {
-          groupVirtualizer.value.scrollToIndex(flatIdx, { align: 'auto' })
-        }
-      }
-      nextTick(() => {
-        const td = tableRef.value?.querySelector(`td[data-cell="${newRecordId}-${newFieldId}"]`) as HTMLElement | null
-        td?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
-      })
-    }
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('mousedown', handleClickOutside, true)
-  document.addEventListener('keydown', handleKeyDown, true)
-  document.addEventListener('mouseup', handleDocumentMouseUp)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('mousedown', handleClickOutside, true)
-  document.removeEventListener('keydown', handleKeyDown, true)
-  document.removeEventListener('mouseup', handleDocumentMouseUp)
-})
-</script>
-
-<template>
-  <div v-if="tableStore.activeTable" class="h-full flex flex-col overflow-hidden">
-    <!-- Batch action bar -->
-    <div
-      v-if="selectedRows.size > 0"
-      class="flex items-center gap-3 px-4 py-2"
-      style="background: var(--zq-brand-color-light); border-bottom: 1px solid var(--zq-border-color-light);"
-    >
-      <el-checkbox :model-value="allSelected" @change="toggleSelectAll" size="small" />
-      <span class="text-xs font-medium" style="color: var(--zq-brand-color);">
-        {{ t('table.selectedCount', { count: selectedRows.size }) }}
-      </span>
-      <el-button size="small" plain @click="selectedRows.clear()">
-        {{ t('common.cancel') }}
-      </el-button>
-      <el-button size="small" plain @click="batchDuplicate">
-        <el-icon class="mr-1"><DocumentCopy /></el-icon>
-        {{ t('common.duplicate') }}
-      </el-button>
-      <el-button size="small" type="danger" plain @click="batchDelete">
-        <el-icon class="mr-1"><Delete /></el-icon>
-        {{ t('table.batchDelete') }}
-      </el-button>
-    </div>
-
-    <div ref="tableRef" class="flex-1 overflow-auto zq-table-scroll" :class="scrollShadow" tabindex="0" @scroll="handleTableScroll">
-      <!-- Empty state -->
-      <div v-if="records.length === 0 && !hasGroups && !tableStore.loading" class="flex flex-col items-center justify-center py-20 px-4">
-        <div class="w-48 h-48 mb-6 flex items-center justify-center rounded-full" style="background: var(--zq-bg-secondary);">
-          <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <rect x="16" y="24" width="64" height="48" rx="4" stroke="var(--zq-border-color)" stroke-width="2" fill="none"/>
-            <line x1="16" y1="38" x2="80" y2="38" stroke="var(--zq-border-color)" stroke-width="2"/>
-            <line x1="40" y1="24" x2="40" y2="72" stroke="var(--zq-border-color-light)" stroke-width="1.5"/>
-            <line x1="60" y1="24" x2="60" y2="72" stroke="var(--zq-border-color-light)" stroke-width="1.5"/>
-            <line x1="16" y1="52" x2="80" y2="52" stroke="var(--zq-border-color-light)" stroke-width="1.5"/>
-            <circle cx="48" cy="72" r="12" fill="var(--zq-brand-color)" opacity="0.15"/>
-            <line x1="44" y1="72" x2="52" y2="72" stroke="var(--zq-brand-color)" stroke-width="2" stroke-linecap="round"/>
-            <line x1="48" y1="68" x2="48" y2="76" stroke="var(--zq-brand-color)" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-        </div>
-        <div class="text-sm font-medium mb-2" style="color: var(--zq-text-primary);">{{ t('table.emptyTable') }}</div>
-        <div class="text-xs mb-6" style="color: var(--zq-text-placeholder);">{{ t('table.addRecord') }}</div>
-        <el-button type="primary" @click="tableStore.addRecord()">
-          <el-icon class="mr-1"><Plus /></el-icon>
-          {{ t('table.addRecord') }}
-        </el-button>
-      </div>
-
-      <table v-else :class="{ 'zq-table-zebra': tableStore.activeView?.zebra }" style="min-width: max-content; border-collapse: separate; border-spacing: 0; user-select: none;" @mousemove="handleTableMouseMove">
-        <!-- Header -->
-        <thead>
-          <tr>
-            <!-- Row index column header (shows checkbox for select all) -->
-            <th
-              class="sticky top-0 left-0 z-20 px-2 py-2 text-center text-xs font-medium select-none"
-              style="background: var(--zq-bg-header); border-bottom: 1px solid var(--zq-border-color); border-right: 1px solid var(--zq-border-color-light); width: 52px; min-width: 52px;"
-            >
-              <el-checkbox :model-value="allSelected" @change="toggleSelectAll" size="small" />
-            </th>
-            <!-- Field columns -->
-            <th
-              v-for="field in visibleFields"
-              :key="field.id"
-              :data-field-id="field.id"
-              draggable="true"
-              class="sticky top-0 z-10 px-3 py-2 text-left text-xs font-medium whitespace-nowrap select-none relative group/th"
-              :class="{
-                'zq-frozen-col': isFrozenField(field.id),
-                'zq-frozen-col-last': isLastFrozenField(field.id),
-                'opacity-50': draggingFieldId === field.id,
-                'zq-col-drag-over': dragOverFieldId === field.id && draggingFieldId !== field.id,
-              }"
-              :style="{
-                background: 'var(--zq-bg-header)',
-                borderBottom: '1px solid var(--zq-border-color)',
-                borderRight: '1px solid var(--zq-border-color-light)',
-                color: 'var(--zq-text-secondary)',
-                width: field.width + 'px',
-                minWidth: field.width + 'px',
-                ...(isFrozenField(field.id) ? { left: getFrozenLeft(field.id) + 'px', zIndex: 21 } : {}),
-              }"
-              @contextmenu="handleHeaderContextMenu($event, field)"
-              @dragstart="handleColDragStart($event, field.id)"
-              @dragover="handleColDragOver($event, field.id)"
-              @drop="handleColDrop($event, field.id)"
-              @dragend="handleColDragEnd"
-            >
-              <!-- Field name or rename input with dropdown arrow -->
-              <div class="flex items-center justify-between gap-2 pr-2 flex-1 min-w-0">
-                <div class="flex items-center gap-1.5 min-w-0 flex-1">
-                  <FieldIcon :type="field.type" :size="13" class="opacity-60 flex-shrink-0" />
-                  <template v-if="renamingFieldId === field.id">
-                    <input
-                      ref="renameInputRef"
-                      v-model="renamingFieldValue"
-                      class="text-xs font-medium outline-none border-b border-[var(--zq-brand-color)] bg-transparent w-full py-0.5"
-                      :style="{ color: 'var(--zq-text-primary)' }"
-                      @blur="confirmRename"
-                      @keyup.enter="confirmRename"
-                      @keyup.escape="cancelRename"
-                    />
-                  </template>
-                  <template v-else>
-                    <span class="truncate">{{ field.name }}</span>
-                    <el-tooltip v-if="field.description" :content="field.description" placement="bottom" :show-after="300">
-                      <el-icon :size="11" class="flex-shrink-0 opacity-40 hover:opacity-80 cursor-help"><InfoFilled /></el-icon>
-                    </el-tooltip>
-                  </template>
-                </div>
-
-                <div class="flex items-center gap-0.5 flex-shrink-0">
-                  <!-- Filter shortcut (visible on hover or when active) -->
-                  <el-tooltip :content="fieldHasFilter(field.id) ? t('table.clearFilter') : t('table.filterByField')" placement="bottom" :show-after="400">
-                    <span
-                      class="zq-header-filter w-5 h-5 flex items-center justify-center rounded cursor-pointer transition-opacity"
-                      :class="fieldHasFilter(field.id) ? 'opacity-100' : 'opacity-0 group-hover/th:opacity-100'"
-                      :style="{ color: fieldHasFilter(field.id) ? 'var(--zq-brand-color)' : 'var(--zq-text-secondary)' }"
-                      @click.stop="quickFilterField($event, field)"
-                    >
-                      <el-icon :size="12"><Filter /></el-icon>
-                    </span>
-                  </el-tooltip>
-                  <!-- Dropdown arrow button (visible on hover) - opens same context menu -->
-                  <span
-                    class="zq-header-arrow w-5 h-5 flex items-center justify-center rounded opacity-0 group-hover/th:opacity-100 cursor-pointer transition-opacity"
-                    @click.stop="handleHeaderArrowClick($event, field)"
-                  >
-                    <el-icon :size="12" style="color: var(--zq-text-secondary);"><ArrowDown /></el-icon>
-                  </span>
-                </div>
-              </div>
-
-              <!-- Resize handle -->
-              <div
-                class="absolute right-0 top-0 h-full w-1 cursor-col-resize opacity-0 group-hover/th:opacity-100 hover:!opacity-100"
-                style="background: var(--zq-brand-color);"
-                @mousedown="startResize($event, field)"
-                @dblclick.stop="autoFitColumnWidth(field)"
-              />
-            </th>
-            <!-- Add field column -->
-            <th
-              ref="addFieldBtnRef"
-              class="sticky top-0 z-10 px-3 py-2 text-center select-none relative"
-              style="background: var(--zq-bg-header); border-bottom: 1px solid var(--zq-border-color); color: var(--zq-text-placeholder); width: 48px;"
-            >
-              <div class="cursor-pointer hover:opacity-70" @click="openAddFieldPopover">
-                <el-icon :size="14"><Plus /></el-icon>
-              </div>
-            </th>
-          </tr>
-        </thead>
-
-        <!-- Grouped body with virtual scrolling -->
-        <template v-if="hasGroups">
-          <tbody>
-            <tr v-if="beforeGroupHeight > 0" aria-hidden="true">
-              <td :colspan="visibleFields.length + 2" :style="{ height: beforeGroupHeight + 'px', padding: 0, border: 'none' }" />
-            </tr>
-            <template v-for="item in virtualGroupItems" :key="item.key">
-              <!-- Group header row -->
-              <tr v-if="item.type === 'header'" class="zq-group-header" @click="tableStore.toggleGroupCollapse(item.group.key)">
-                <td
-                  :colspan="visibleFields.length + 2"
-                  class="px-3 py-2 text-xs font-semibold sticky left-0 cursor-pointer select-none"
-                  style="background: var(--zq-bg-secondary); color: var(--zq-text-primary); border-bottom: 1px solid var(--zq-border-color-light);"
-                >
-                  <div class="flex items-center gap-1.5">
-                    <el-icon :size="14" class="zq-group-chevron transition-transform" :class="{ 'rotate-90': !tableStore.isGroupCollapsed(item.group.key) }">
-                      <CaretRight />
-                    </el-icon>
-                    <span>{{ item.group.label || t('kanban.uncategorized') }}</span>
-                    <span class="font-normal" style="color: var(--zq-text-placeholder);">({{ item.group.records.length }})</span>
-                    <template v-if="item.groupIdx === 0">
-                      <span class="ml-auto text-[10px] font-normal px-2 py-0.5 rounded cursor-pointer hover:bg-black/5 dark:hover:bg-white/10 transition-colors" style="color: var(--zq-text-placeholder);" @click.stop="tableStore.collapsedGroups.size === groupedRecords.length ? tableStore.expandAllGroups() : tableStore.collapseAllGroups()">
-                        {{ tableStore.collapsedGroups.size === groupedRecords.length ? t('toolbar.expandAll') : t('toolbar.collapseAll') }}
-                      </span>
-                    </template>
-                  </div>
-                </td>
-              </tr>
-              <!-- Group data row -->
-              <tr
-                v-else-if="item.type === 'data'"
-                class="transition-colors group/row zq-row-indicator"
-                :class="{ 'zq-row-selected': selectedRows.has(item.record.id) }"
-                :style="{ ...getRowConditionalStyle(item.record), background: getRowConditionalStyle(item.record).background ?? (hoveredRow === item.record.id ? 'var(--zq-bg-cell-hover)' : selectedRows.has(item.record.id) ? 'var(--zq-brand-color-light)' : 'var(--zq-bg-cell)') }"
-                @mouseenter="hoveredRow = item.record.id"
-                @mouseleave="hoveredRow = null"
-                @contextmenu="handleRowContextMenu($event, item.record.id)"
-              >
-                <td
-                  draggable="true"
-                  class="zq-sticky-col zq-row-num-cell px-1 py-0 text-xs text-center cursor-grab active:cursor-grabbing"
-                  :style="{ left: '0px', borderBottom: '1px solid var(--zq-border-color-light)', borderRight: '1px solid var(--zq-border-color-light)', color: 'var(--zq-text-placeholder)', width: '52px', background: selectedRows.has(item.record.id) ? 'var(--zq-brand-color-light)' : hoveredRow === item.record.id ? 'var(--zq-bg-cell-hover)' : 'var(--zq-bg-cell)' }"
-                  @dragstart="handleRowDragStart($event, item.record.id)"
-                  @dblclick="openDetail(item.record.id)"
-                >
-                  <div class="flex items-center justify-center h-full">
-                    <span class="zq-row-num">{{ groupGlobalOffsets[item.groupIdx] + item.recordLocalIdx + 1 }}</span>
-                    <div class="zq-row-actions">
-                      <el-icon :size="12" class="opacity-60 flex-shrink-0 cursor-grab"><Rank /></el-icon>
-                      <el-checkbox :model-value="selectedRows.has(item.record.id)" @click.native.stop="(e: Event) => toggleSelect(item.record.id, e)" size="small" />
-                    </div>
-                  </div>
-                </td>
-                <td
-                  v-for="(field, fIdx) in visibleFields"
-                  :key="field.id"
-                  :data-cell="`${item.record.id}-${field.id}`"
-                  class="p-0 text-xs cursor-default"
-                  :class="[
-                    { 'zq-cell-editing': isEditing(item.record.id, field.id) },
-                    { 'zq-cell-title': isTitleField(field) && !isEditing(item.record.id, field.id) },
-                    { 'zq-cell-focused': focusedCell?.recordId === item.record.id && focusedCell?.fieldId === field.id },
-                    { 'zq-frozen-col': isFrozenField(field.id) },
-                    { 'zq-frozen-col-last': isLastFrozenField(field.id) },
-                    { 'zq-cell-search-hit': cellMatchesSearch(item.record.id, field.id) },
-                    { 'zq-cell-in-selection': isCellInSelection(getCellRowIndex(item.record.id), fIdx) },
-                    { 'zq-cell-error': !!cellErrors[`${item.record.id}:${field.id}`] },
-                    getSelectionBorderClasses(getCellRowIndex(item.record.id), fIdx),
-                  ]"
-                  :style="{ borderBottom: '1px solid var(--zq-border-color-light)', borderRight: '1px solid var(--zq-border-color-light)', color: 'var(--zq-text-primary)', width: field.width + 'px', maxWidth: field.width + 'px', height: currentRowHeight + 'px', ...(isFrozenField(field.id) ? { left: getFrozenLeft(field.id) + 'px' } : {}) }"
-                  @click="handleCellClick($event, item.record.id, field.id)"
-                  @dblclick="handleCellDblClick($event, item.record.id, field.id)"
-                  @mousedown="handleCellMouseDown($event, item.record.id, field.id)"
-                >
-                  <div class="w-full h-full px-2 flex items-center">
-                    <CellRenderer :field="field" :value="item.record.values[field.id]" :record-id="item.record.id" :editing="isEditing(item.record.id, field.id)" @update="(val) => handleCellUpdate(item.record.id, field.id, val)" @start-edit="startEdit(item.record.id, field.id)" @end-edit="endEdit" />
-                  </div>
-                </td>
-                <td style="border-bottom: 1px solid var(--zq-border-color-light);" />
-              </tr>
-              <!-- Group subtotal row -->
-              <tr v-else-if="item.type === 'subtotal'" class="zq-group-subtotal">
-                <td
-                  class="zq-sticky-col px-1 py-0 text-[10px] text-center"
-                  :style="{ left: '0px', width: '52px', borderBottom: '2px solid var(--zq-border-color-light)', borderRight: '1px solid var(--zq-border-color-light)', background: 'var(--zq-bg-secondary)', color: 'var(--zq-text-placeholder)' }"
-                >
-                  &Sigma;
-                </td>
-                <td
-                  v-for="field in visibleFields"
-                  :key="'gsub-' + field.id"
-                  class="p-0 text-[11px]"
-                  :style="{ borderBottom: '2px solid var(--zq-border-color-light)', borderRight: '1px solid var(--zq-border-color-light)', width: field.width + 'px', maxWidth: field.width + 'px', height: '28px', background: 'var(--zq-bg-secondary)' }"
-                >
-                  <div v-if="getFieldSummaryAgg(field.id)" class="flex items-center h-full px-2 truncate">
-                    <span class="mr-1" style="color: var(--zq-text-placeholder);">{{ summaryLabel(field.id) }}</span>
-                    <span class="font-medium" style="color: var(--zq-text-primary);">{{ formatGroupSubtotalValue(item.group.subtotals[field.id], field.id) }}</span>
-                  </div>
-                </td>
-                <td :style="{ borderBottom: '2px solid var(--zq-border-color-light)', background: 'var(--zq-bg-secondary)' }" />
-              </tr>
-            </template>
-            <tr v-if="afterGroupHeight > 0" aria-hidden="true">
-              <td :colspan="visibleFields.length + 2" :style="{ height: afterGroupHeight + 'px', padding: 0, border: 'none' }" />
-            </tr>
-          </tbody>
-        </template>
-
-        <!-- Ungrouped body with virtual scrolling -->
-        <tbody v-else>
-          <!-- Top spacer for virtual scroll -->
-          <tr v-if="beforeVirtualHeight > 0" aria-hidden="true">
-            <td :colspan="visibleFields.length + 2" :style="{ height: beforeVirtualHeight + 'px', padding: 0, border: 'none' }" />
-          </tr>
-
-          <tr
-            v-for="{ record, index } in virtualRecordRows"
-            :key="record.id"
-            class="transition-colors group/row zq-row-indicator"
-            :class="{
-              'opacity-50': draggingRowId === record.id,
-              'zq-row-drag-over': dragOverRowId === record.id && draggingRowId !== record.id,
-              'zq-row-selected': selectedRows.has(record.id),
-            }"
-            :style="{ ...getRowConditionalStyle(record), background: getRowConditionalStyle(record).background ?? (hoveredRow === record.id ? 'var(--zq-bg-cell-hover)' : selectedRows.has(record.id) ? 'var(--zq-brand-color-light)' : 'var(--zq-bg-cell)') }"
-            @mouseenter="hoveredRow = record.id"
-            @mouseleave="hoveredRow = null"
-            @contextmenu="handleRowContextMenu($event, record.id)"
-            @dragover="handleRowDragOver($event, record.id)"
-            @drop="handleRowDrop($event, record.id)"
-            @dragend="handleRowDragEnd"
-          >
-            <td
-              draggable="true"
-              class="zq-sticky-col zq-row-num-cell px-1 py-0 text-xs text-center cursor-grab active:cursor-grabbing"
-              :style="{ left: '0px', borderBottom: '1px solid var(--zq-border-color-light)', borderRight: '1px solid var(--zq-border-color-light)', color: 'var(--zq-text-placeholder)', width: '52px', background: selectedRows.has(record.id) ? 'var(--zq-brand-color-light)' : hoveredRow === record.id ? 'var(--zq-bg-cell-hover)' : 'var(--zq-bg-cell)' }"
-              @dragstart="handleRowDragStart($event, record.id)"
-              @dblclick="openDetail(record.id)"
-            >
-              <div class="flex items-center justify-center h-full">
-                <span class="zq-row-num">{{ index + 1 }}</span>
-                <div class="zq-row-actions">
-                  <el-icon :size="12" class="opacity-60 flex-shrink-0 cursor-grab"><Rank /></el-icon>
-                  <el-checkbox :model-value="selectedRows.has(record.id)" @click.native.stop="(e: Event) => toggleSelect(record.id, e)" size="small" />
-                </div>
-              </div>
-            </td>
-            <td
-              v-for="(field, fIdx) in visibleFields"
-              :key="field.id"
-              :data-cell="`${record.id}-${field.id}`"
-              class="p-0 text-xs cursor-default"
-              :class="[
-                { 'zq-cell-editing': isEditing(record.id, field.id) },
-                { 'zq-cell-title': isTitleField(field) && !isEditing(record.id, field.id) },
-                { 'zq-cell-focused': focusedCell?.recordId === record.id && focusedCell?.fieldId === field.id },
-                { 'zq-frozen-col': isFrozenField(field.id) },
-                { 'zq-frozen-col-last': isLastFrozenField(field.id) },
-                { 'zq-cell-search-hit': cellMatchesSearch(record.id, field.id) },
-                { 'zq-cell-in-selection': isCellInSelection(index, fIdx) },
-                { 'zq-cell-error': !!cellErrors[`${record.id}:${field.id}`] },
-                getSelectionBorderClasses(index, fIdx),
-              ]"
-              :style="{
-                borderBottom: '1px solid var(--zq-border-color-light)',
-                borderRight: '1px solid var(--zq-border-color-light)',
-                color: 'var(--zq-text-primary)',
-                width: field.width + 'px',
-                maxWidth: field.width + 'px',
-                height: currentRowHeight + 'px',
-                ...(isFrozenField(field.id) ? { left: getFrozenLeft(field.id) + 'px' } : {}),
-              }"
-              @click="handleCellClick($event, record.id, field.id)"
-              @dblclick="handleCellDblClick($event, record.id, field.id)"
-              @mousedown="handleCellMouseDown($event, record.id, field.id)"
-            >
-              <div class="w-full h-full px-2 flex items-center">
-                <CellRenderer
-                  :field="field"
-                  :value="record.values[field.id]"
-                  :record-id="record.id"
-                  :editing="isEditing(record.id, field.id)"
-                  @update="(val) => handleCellUpdate(record.id, field.id, val)"
-                  @start-edit="startEdit(record.id, field.id)"
-                  @end-edit="endEdit"
-                />
-              </div>
-            </td>
-            <td style="border-bottom: 1px solid var(--zq-border-color-light);" />
-          </tr>
-
-          <!-- Bottom spacer for virtual scroll -->
-          <tr v-if="afterVirtualHeight > 0" aria-hidden="true">
-            <td :colspan="visibleFields.length + 2" :style="{ height: afterVirtualHeight + 'px', padding: 0, border: 'none' }" />
-          </tr>
-
-          <!-- Loading more indicator -->
-          <tr v-if="tableStore.loadingMore" class="zq-loading-more">
-            <td :colspan="visibleFields.length + 2" class="text-center py-3 text-xs" style="color: var(--zq-text-placeholder); border-bottom: 1px solid var(--zq-border-color-light);">
-              <el-icon class="is-loading mr-1"><Loading /></el-icon>
-              {{ t('common.loading') }}
-            </td>
-          </tr>
-
-          <!-- Add row -->
-          <tr class="zq-add-row group/add">
-            <td
-              class="zq-sticky-col px-2 py-0 text-center"
-              style="left: 0; border-bottom: 1px solid var(--zq-border-color-light); border-right: 1px solid var(--zq-border-color-light); width: 52px; height: 36px; background: var(--zq-bg-cell);"
-            >
-              <el-icon
-                :size="14"
-                class="cursor-pointer text-[var(--zq-brand-color)] opacity-60 group-hover/add:opacity-100 transition-opacity"
-                @click="tableStore.addRecord()"
-              ><Plus /></el-icon>
-            </td>
-            <td
-              :colspan="visibleFields.length + 1"
-              class="px-3 py-0 text-xs cursor-pointer select-none"
-              style="border-bottom: 1px solid var(--zq-border-color-light); color: var(--zq-text-placeholder); height: 36px;"
-              @click="tableStore.addRecord()"
-            >
-              <span class="opacity-0 group-hover/add:opacity-100 transition-opacity">{{ t('table.addRecord') }}</span>
-            </td>
-          </tr>
-
-        </tbody>
-      </table>
-    </div>
-
-    <!-- Summary Row (fixed at bottom, syncs horizontal scroll) -->
-    <div v-if="showSummaryRow" ref="summaryRowRef" class="zq-summary-row flex-shrink-0 overflow-hidden" style="background: var(--zq-bg-header); border-top: 1px solid var(--zq-border-color);">
-      <table style="min-width: max-content; border-collapse: separate; border-spacing: 0;">
-        <tr>
-          <td
-            class="zq-summary-sticky-col px-2 py-0 text-center text-xs font-semibold"
-            style="position: sticky; left: 0; z-index: 3; width: 52px; min-width: 52px; height: 32px; background: var(--zq-bg-header); border-right: 1px solid var(--zq-border-color-light); color: var(--zq-text-placeholder);"
-          >
-            &Sigma;
-          </td>
-          <td
-            v-for="field in visibleFields"
-            :key="'sum-' + field.id"
-            class="px-2 py-0 text-xs cursor-pointer select-none relative group/sum"
-            :class="{
-              'zq-frozen-col': isFrozenField(field.id),
-              'zq-frozen-col-last': isLastFrozenField(field.id),
-            }"
-            :style="{
-              width: field.width + 'px',
-              minWidth: field.width + 'px',
-              height: '32px',
-              borderRight: '1px solid var(--zq-border-color-light)',
-              color: 'var(--zq-text-secondary)',
-              background: 'var(--zq-bg-header)',
-              ...(isFrozenField(field.id) ? { position: 'sticky', left: getFrozenLeft(field.id) + 'px', zIndex: 3 } : {}),
-            }"
-            @click="toggleSummaryPopover(field.id, $event)"
-          >
-            <div class="flex items-center h-full truncate">
-              <template v-if="getFieldSummaryAgg(field.id)">
-                <span class="text-[var(--zq-text-placeholder)] mr-1">{{ summaryLabel(field.id) }}</span>
-                <span class="font-medium" style="color: var(--zq-text-primary);">{{ formatSummaryValue(field.id) }}</span>
-              </template>
-              <span v-else class="text-[var(--zq-text-placeholder)] opacity-30 group-hover/sum:opacity-70 transition-opacity text-xs">
-                {{ t('summary.clickToAdd') }}
-              </span>
-            </div>
-          </td>
-          <td />
-        </tr>
-      </table>
-    </div>
-
-    <!-- Summary popover (teleported to body to avoid overflow clipping) -->
-    <Teleport to="body">
-      <div
-        v-if="summaryPopoverFieldId"
-        class="zq-summary-popover fixed z-[9999] rounded-lg shadow-lg py-1"
-        :style="{
-          top: (summaryPopoverPos.top - 8) + 'px',
-          left: summaryPopoverPos.left + 'px',
-          transform: 'translateY(-100%)',
-          background: 'var(--zq-bg-primary)',
-          border: '1px solid var(--zq-border-color-light)',
-          minWidth: '160px',
-        }"
-        @click.stop
-      >
-        <div
-          class="px-3 py-1.5 text-xs cursor-pointer hover:bg-[var(--zq-bg-cell-hover)] transition-colors"
-          :class="{ 'font-semibold': !getFieldSummaryAgg(summaryPopoverFieldId) }"
-          style="color: var(--zq-text-secondary);"
-          @click="selectSummaryAgg(summaryPopoverFieldId!, null)"
-        >
-          {{ t('summary.none') }}
-        </div>
-        <div style="border-top: 1px solid var(--zq-border-color-light); margin: 2px 0;" />
-        <div
-          v-for="opt in getSummaryOptions(visibleFields.find(f => f.id === summaryPopoverFieldId))"
-          :key="opt.value"
-          class="px-3 py-1.5 text-xs cursor-pointer hover:bg-[var(--zq-bg-cell-hover)] transition-colors"
-          :class="{ 'font-semibold': getFieldSummaryAgg(summaryPopoverFieldId!) === opt.value }"
-          :style="{ color: getFieldSummaryAgg(summaryPopoverFieldId!) === opt.value ? 'var(--zq-brand-color)' : 'var(--zq-text-primary)' }"
-          @click="selectSummaryAgg(summaryPopoverFieldId!, opt.value)"
-        >
-          {{ t(opt.labelKey) }}
-        </div>
-      </div>
-    </Teleport>
-
-    <!-- Footer -->
-    <div class="flex items-center gap-4 px-4 py-2 text-xs flex-shrink-0" style="background: var(--zq-bg-header); border-top: 1px solid var(--zq-border-color); color: var(--zq-text-secondary);">
-      <span>
-        {{ t('table.rowCount', { count: records.length }) }}
-        <template v-if="tableStore.activePagination && tableStore.activePagination.total > records.length">
-          / {{ tableStore.activePagination.total }}
-        </template>
-      </span>
-      <span style="color: var(--zq-text-placeholder);">{{ visibleFields.length }} {{ t('toolbar.fields') }}</span>
-      <span v-if="selectedRows.size > 0" style="color: var(--zq-brand-color);">{{ t('table.selectedCount', { count: selectedRows.size }) }}</span>
-      <span class="ml-auto flex items-center gap-2" style="color: var(--zq-text-placeholder);">
-        <span>⌘Z {{ t('toolbar.undo') }} · ⌘C {{ t('toolbar.copy') }}</span>
-        <span class="cursor-pointer hover:text-[var(--zq-brand-color)] transition-colors" @click="showShortcutHelp = true">⌘/ {{ t('table.keyboardShortcuts') }}</span>
-      </span>
-    </div>
-
-    <!-- Right-click context menu (teleported) -->
-    <Teleport to="body">
-      <div
-        v-if="contextMenuVisible && contextMenuField"
-        class="zq-header-context-menu fixed z-[9999] py-1 rounded-lg shadow-lg"
-        style="background: var(--zq-bg-primary); border: 1px solid var(--zq-border-color-light); min-width: 180px;"
-        :style="{ left: contextMenuPos.x + 'px', top: contextMenuPos.y + 'px' }"
-      >
-        <div class="zq-ctx-item" @click="handleHeaderCommand('editField', contextMenuField!)">
-          <el-icon :size="14"><Edit /></el-icon> {{ t('table.editField') }}
-        </div>
-        <div class="zq-ctx-item" @click="handleHeaderCommand('rename', contextMenuField!)">
-          <el-icon :size="14"><Edit /></el-icon> {{ t('table.renameField') }}
-        </div>
-
-        <div class="zq-ctx-divider" />
-        <div class="zq-ctx-item" @click="handleHeaderCommand('sortAsc', contextMenuField!)">
-          <el-icon :size="14"><SortUp /></el-icon> {{ t('table.sortAsc') }}
-        </div>
-        <div class="zq-ctx-item" @click="handleHeaderCommand('sortDesc', contextMenuField!)">
-          <el-icon :size="14"><SortDown /></el-icon> {{ t('table.sortDesc') }}
-        </div>
-        <div class="zq-ctx-item" @click="handleHeaderCommand('clearSort', contextMenuField!)">
-          <el-icon :size="14"><RemoveFilled /></el-icon> {{ t('table.clearSort') }}
-        </div>
-
-        <div class="zq-ctx-divider" />
-        <div class="zq-ctx-item" @click="handleHeaderCommand('filterByField', contextMenuField!)">
-          <el-icon :size="14"><Filter /></el-icon> {{ t('table.filterByField') }}
-        </div>
-        <template v-if="contextMenuField!.options && contextMenuField!.options.length > 0">
-          <div
-            v-for="opt in contextMenuField!.options"
-            :key="opt.id"
-            class="zq-ctx-item"
-            @click="handleHeaderCommand(`filterByValue:${opt.id}`, contextMenuField!)"
-          >
-            <span class="w-2 h-2 rounded-full inline-block" :style="{ background: opt.color }" />
-            {{ opt.label }}
-          </div>
-        </template>
-
-        <div class="zq-ctx-divider" />
-        <div class="zq-ctx-item" @click="handleHeaderCommand('insertLeft', contextMenuField!)">
-          <el-icon :size="14"><ArrowLeft /></el-icon> {{ t('table.insertLeft') }}
-        </div>
-        <div class="zq-ctx-item" @click="handleHeaderCommand('insertRight', contextMenuField!)">
-          <el-icon :size="14"><ArrowRight /></el-icon> {{ t('table.insertRight') }}
-        </div>
-
-        <div class="zq-ctx-divider" />
-        <div class="zq-ctx-item" @click="handleHeaderCommand('duplicate', contextMenuField!)">
-          <el-icon :size="14"><CopyDocument /></el-icon> {{ t('table.duplicateField') }}
-        </div>
-        <div class="zq-ctx-item" @click="handleHeaderCommand('hide', contextMenuField!)">
-          <el-icon :size="14"><Hide /></el-icon> {{ t('table.hideField') }}
-        </div>
-        <div v-if="!isFrozenField(contextMenuField!.id) || !isLastFrozenField(contextMenuField!.id)" class="zq-ctx-item" @click="handleHeaderCommand('freeze', contextMenuField!)">
-          <el-icon :size="14"><Lock /></el-icon> {{ t('table.frozenField') }}
-        </div>
-        <div v-if="tableStore.activeView?.frozenFieldId" class="zq-ctx-item" @click="handleHeaderCommand('unfreeze', contextMenuField!)">
-          <el-icon :size="14"><Unlock /></el-icon> {{ t('table.unfreezeField') }}
-        </div>
-
-        <div class="zq-ctx-divider" />
-        <div class="zq-ctx-item zq-ctx-danger" @click="handleHeaderCommand('delete', contextMenuField!)">
-          <el-icon :size="14"><Delete /></el-icon> {{ t('table.deleteField') }}
-        </div>
-      </div>
-    </Teleport>
-
-    <!-- Row right-click context menu (teleported) -->
-    <Teleport to="body">
-      <div
-        v-if="rowContextMenuVisible && rowContextMenuRecord"
-        class="zq-row-context-menu fixed z-[9999] py-1 rounded-lg shadow-lg"
-        style="background: var(--zq-bg-primary); border: 1px solid var(--zq-border-color-light); min-width: 180px;"
-        :style="{ left: rowContextMenuPos.x + 'px', top: rowContextMenuPos.y + 'px' }"
-      >
-        <div class="zq-ctx-item" @click="handleRowCommand('expand')">
-          <el-icon :size="14"><Expand /></el-icon> {{ t('table.expandRecord') }}
-        </div>
-        <div class="zq-ctx-divider" />
-        <div class="zq-ctx-item" @click="handleRowCommand('insertAbove')">
-          <el-icon :size="14"><Top /></el-icon> {{ t('table.insertAbove') }}
-        </div>
-        <div class="zq-ctx-item" @click="handleRowCommand('insertBelow')">
-          <el-icon :size="14"><Bottom /></el-icon> {{ t('table.insertBelow') }}
-        </div>
-        <div class="zq-ctx-divider" />
-        <div class="zq-ctx-item" @click="handleRowCommand('duplicate')">
-          <el-icon :size="14"><DocumentCopy /></el-icon> {{ t('common.duplicate') }}
-        </div>
-        <div class="zq-ctx-item" @click="handleRowCommand('copy')">
-          <el-icon :size="14"><CopyDocument /></el-icon> {{ t('table.copyRecord') }}
-        </div>
-        <div class="zq-ctx-divider" />
-        <div class="zq-ctx-item zq-ctx-danger" @click="handleRowCommand('delete')">
-          <el-icon :size="14"><Delete /></el-icon> {{ t('table.deleteRecord') }}
-        </div>
-      </div>
-    </Teleport>
-
-    <!-- Field config floating panel (add / edit field) -->
-    <Teleport to="body">
-      <div
-        v-if="showAddFieldPopover"
-        class="fixed inset-0 z-[9998]"
-        @click.self="closeFieldPopover"
-      >
-        <div
-          class="zq-field-config-popover fixed z-[9999] rounded-lg shadow-lg overflow-auto"
-          :style="{
-            background: 'var(--zq-bg-primary)',
-            border: '1px solid var(--zq-border-color-light)',
-            top: fieldPopoverPos.top,
-            left: fieldPopoverPos.left,
-            width: POPOVER_WIDTH + 'px',
-            maxHeight: fieldPopoverPos.maxHeight,
-          }"
-        >
-          <FieldConfigPopover
-            :field="editingField"
-            :anchor-field-id="addFieldAnchor"
-            :insert-position="addFieldPosition"
-            @close="closeFieldPopover"
-            @saved="closeFieldPopover"
-          />
-        </div>
-      </div>
-    </Teleport>
-
-    <RecordDetailDrawer v-model:visible="showDetail" v-model:record-id="detailRecordId" />
-
-    <!-- Keyboard shortcut help dialog -->
-    <Teleport to="body">
-      <div
-        v-if="showShortcutHelp"
-        class="fixed inset-0 z-[9998] flex items-center justify-center"
-        style="background: rgba(0,0,0,0.3);"
-        @click.self="showShortcutHelp = false"
-      >
-        <div class="rounded-xl shadow-2xl p-6 w-[420px] max-h-[80vh] overflow-auto" style="background: var(--zq-bg-primary);">
-          <div class="flex items-center justify-between mb-4">
-            <span class="text-base font-semibold" style="color: var(--zq-text-primary);">{{ t('table.keyboardShortcuts') }}</span>
-            <el-icon class="cursor-pointer" style="color: var(--zq-text-placeholder);" @click="showShortcutHelp = false"><Delete /></el-icon>
-          </div>
-          <div class="space-y-2 text-xs" style="color: var(--zq-text-secondary);">
-            <div class="flex justify-between py-1.5" style="border-bottom: 1px solid var(--zq-border-color-light);"><span>{{ t('toolbar.copy') }}</span><kbd class="zq-kbd">Ctrl + C</kbd></div>
-            <div class="flex justify-between py-1.5" style="border-bottom: 1px solid var(--zq-border-color-light);"><span>{{ t('table.paste') }}</span><kbd class="zq-kbd">Ctrl + V</kbd></div>
-            <div class="flex justify-between py-1.5" style="border-bottom: 1px solid var(--zq-border-color-light);"><span>{{ t('toolbar.undo') }}</span><kbd class="zq-kbd">Ctrl + Z</kbd></div>
-            <div class="flex justify-between py-1.5" style="border-bottom: 1px solid var(--zq-border-color-light);"><span>{{ t('table.redo') }}</span><kbd class="zq-kbd">Ctrl + Shift + Z</kbd></div>
-            <div class="flex justify-between py-1.5" style="border-bottom: 1px solid var(--zq-border-color-light);"><span>{{ t('table.selectAll') }}</span><kbd class="zq-kbd">Ctrl + A</kbd></div>
-            <div class="flex justify-between py-1.5" style="border-bottom: 1px solid var(--zq-border-color-light);"><span>{{ t('table.clearCell') }}</span><kbd class="zq-kbd">Delete</kbd></div>
-            <div class="flex justify-between py-1.5" style="border-bottom: 1px solid var(--zq-border-color-light);"><span>{{ t('table.editCell') }}</span><kbd class="zq-kbd">Enter</kbd></div>
-            <div class="flex justify-between py-1.5" style="border-bottom: 1px solid var(--zq-border-color-light);"><span>{{ t('table.cancelEdit') }}</span><kbd class="zq-kbd">Escape</kbd></div>
-            <div class="flex justify-between py-1.5" style="border-bottom: 1px solid var(--zq-border-color-light);"><span>{{ t('table.navigate') }}</span><kbd class="zq-kbd">Arrow Keys</kbd></div>
-            <div class="flex justify-between py-1.5"><span>{{ t('table.nextCell') }}</span><kbd class="zq-kbd">Tab / Shift + Tab</kbd></div>
-          </div>
-        </div>
-      </div>
-    </Teleport>
-  </div>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/TableSkeleton.vue b/web/apps/web-ele/src/components/zq-smart-table/table/TableSkeleton.vue
deleted file mode 100644
index 195c20f..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/TableSkeleton.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div class="w-full h-full animate-pulse">
-    <!-- Header skeleton -->
-    <div class="flex items-center gap-2 px-4 py-3" style="background: var(--zq-bg-header); border-bottom: 1px solid var(--zq-border-color);">
-      <div class="w-[52px] h-4 rounded" style="background: var(--zq-border-color-light);" />
-      <div v-for="i in cols" :key="i" class="h-4 rounded" :style="{ background: 'var(--zq-border-color-light)', width: colWidths[i - 1] + 'px' }" />
-    </div>
-    <!-- Row skeletons -->
-    <div v-for="r in rows" :key="r" class="flex items-center gap-2 px-4 py-2.5" :style="{ borderBottom: '1px solid var(--zq-border-color-light)' }">
-      <div class="w-[52px] h-3.5 rounded" :style="{ background: 'var(--zq-border-color-light)', opacity: 0.5 }" />
-      <div v-for="c in cols" :key="c" class="h-3.5 rounded" :style="{ background: 'var(--zq-border-color-light)', opacity: cellOpacities[(r - 1) * cols + (c - 1)] ?? 0.4, width: cellWidths[(r - 1) * cols + (c - 1)] + 'px' }" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = withDefaults(defineProps<{
-  rows?: number
-  cols?: number
-}>(), {
-  rows: 12,
-  cols: 6,
-})
-
-function seededRandom(seed: number): number {
-  const x = Math.sin(seed * 9301 + 49297) * 233280
-  return x - Math.floor(x)
-}
-
-const colWidths = computed(() =>
-  Array.from({ length: props.cols }, (_, i) => 100 + Math.floor(seededRandom(i + 1) * 80)),
-)
-
-const cellWidths = computed(() =>
-  Array.from({ length: props.rows * props.cols }, (_, i) => 60 + Math.floor(seededRandom(i + 100) * 120)),
-)
-
-const cellOpacities = computed(() =>
-  Array.from({ length: props.rows * props.cols }, (_, i) => +(0.3 + seededRandom(i + 500) * 0.35).toFixed(2)),
-)
-</script>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/table/TrashDrawer.vue b/web/apps/web-ele/src/components/zq-smart-table/table/TrashDrawer.vue
deleted file mode 100644
index 4011d37..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/table/TrashDrawer.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { Trash2, RotateCcw } from '@vben/icons'
-import ZqDrawer from '#/components/zq-drawer/zq-drawer.vue'
-import {
-  ElButton, ElCheckbox, ElEmpty,
-  ElPagination, ElMessageBox, ElMessage,
-} from 'element-plus'
-import {
-  getTrashRecordsApi,
-  restoreTrashRecordsApi,
-  permanentDeleteTrashRecordApi,
-  emptyTrashApi,
-  type TrashRecordItem,
-} from '#/api/smart-table'
-import dayjs from 'dayjs'
-
-const props = defineProps<{
-  visible: boolean
-}>()
-const emit = defineEmits<{
-  (e: 'update:visible', val: boolean): void
-}>()
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-const loading = ref(false)
-const records = ref<TrashRecordItem[]>([])
-const total = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
-const selectedIds = ref<string[]>([])
-
-const tableId = computed(() => tableStore.activeTableId)
-
-const titleField = computed(() => {
-  const table = tableStore.activeTable
-  if (!table) return null
-  return table.fields.find((f) => f.type === 'text') || table.fields[0]
-})
-
-function getRecordTitle(record: TrashRecordItem): string {
-  if (!titleField.value) return record.id.slice(0, 8)
-  return String(record.values[titleField.value.id] ?? '') || t('table.noTitle')
-}
-
-function formatTime(dt?: string): string {
-  if (!dt) return '-'
-  return dayjs(dt).format('YYYY-MM-DD HH:mm')
-}
-
-async function loadTrash() {
-  if (!tableId.value) return
-  loading.value = true
-  try {
-    const raw = await getTrashRecordsApi(tableId.value, page.value, pageSize.value)
-    const data = (raw as any)?.data ?? raw
-    records.value = data.items ?? []
-    total.value = data.total ?? 0
-  } catch {
-    records.value = []
-    total.value = 0
-  } finally {
-    loading.value = false
-  }
-}
-
-watch(() => props.visible, (val) => {
-  if (val) {
-    page.value = 1
-    selectedIds.value = []
-    loadTrash()
-  }
-})
-
-function handlePageChange(p: number) {
-  page.value = p
-  selectedIds.value = []
-  loadTrash()
-}
-
-function toggleSelect(id: string) {
-  const idx = selectedIds.value.indexOf(id)
-  if (idx > -1) selectedIds.value.splice(idx, 1)
-  else selectedIds.value.push(id)
-}
-
-function toggleSelectAll() {
-  if (selectedIds.value.length === records.value.length) {
-    selectedIds.value = []
-  } else {
-    selectedIds.value = records.value.map((r) => r.id)
-  }
-}
-
-async function handleRestore(ids: string[]) {
-  if (!tableId.value || ids.length === 0) return
-  try {
-    await restoreTrashRecordsApi(tableId.value, ids)
-    ElMessage.success(t('trash.restoreSuccess'))
-    selectedIds.value = selectedIds.value.filter((id) => !ids.includes(id))
-    await loadTrash()
-    tableStore.reloadRecords()
-  } catch {
-    // silent
-  }
-}
-
-async function handlePermanentDelete(id: string) {
-  if (!tableId.value) return
-  try {
-    await ElMessageBox.confirm(
-      t('trash.permanentDeleteConfirm'),
-      t('trash.permanentDelete'),
-      { type: 'warning', confirmButtonText: t('common.confirm'), cancelButtonText: t('common.cancel') },
-    )
-    await permanentDeleteTrashRecordApi(tableId.value, id)
-    ElMessage.success(t('trash.deleteSuccess'))
-    selectedIds.value = selectedIds.value.filter((sid) => sid !== id)
-    await loadTrash()
-  } catch {
-    // cancelled or error
-  }
-}
-
-async function handleEmptyTrash() {
-  if (!tableId.value) return
-  try {
-    await ElMessageBox.confirm(
-      t('trash.emptyTrashConfirm'),
-      t('trash.emptyTrash'),
-      { type: 'warning', confirmButtonText: t('common.confirm'), cancelButtonText: t('common.cancel') },
-    )
-    await emptyTrashApi(tableId.value)
-    ElMessage.success(t('trash.emptySuccess'))
-    selectedIds.value = []
-    await loadTrash()
-  } catch {
-    // cancelled or error
-  }
-}
-
-function handleClose() {
-  emit('update:visible', false)
-}
-</script>
-
-<template>
-  <ZqDrawer
-    :model-value="visible"
-    :title="t('trash.title')"
-    size="640px"
-    :show-footer="false"
-    :close-on-click-modal="true"
-    @update:model-value="(val: boolean) => !val && handleClose()"
-  >
-    <template #header-extra>
-      <div class="flex items-center gap-2 mr-2">
-        <ElButton
-          v-if="selectedIds.length > 0"
-          size="small"
-          type="primary"
-          @click="handleRestore(selectedIds)"
-        >
-          <RotateCcw class="w-3.5 h-3.5 mr-1" />
-          {{ t('trash.batchRestore') }} ({{ selectedIds.length }})
-        </ElButton>
-        <ElButton
-          v-if="total > 0"
-          size="small"
-          type="danger"
-          plain
-          @click="handleEmptyTrash"
-        >
-          <Trash2 class="w-3.5 h-3.5 mr-1" />
-          {{ t('trash.emptyTrash') }}
-        </ElButton>
-      </div>
-    </template>
-
-    <div v-if="records.length === 0 && !loading" class="flex items-center justify-center py-16">
-      <ElEmpty :description="t('trash.empty')" />
-    </div>
-
-    <div v-else class="flex flex-col h-full">
-      <!-- Header with select all -->
-      <div
-        v-if="records.length > 0"
-        class="flex items-center gap-2 px-3 py-2 text-xs"
-        style="color: var(--el-text-color-secondary); border-bottom: 1px solid var(--el-border-color-lighter);"
-      >
-        <ElCheckbox
-          :model-value="selectedIds.length === records.length && records.length > 0"
-          :indeterminate="selectedIds.length > 0 && selectedIds.length < records.length"
-          @change="toggleSelectAll"
-        />
-        <span>{{ t('trash.recordCount', { count: total }) }}</span>
-      </div>
-
-      <!-- Records list -->
-      <div class="flex-1 overflow-y-auto">
-        <div
-          v-for="record in records"
-          :key="record.id"
-          class="trash-item flex items-center gap-3 px-3 py-2.5 transition-colors cursor-default"
-          style="border-bottom: 1px solid var(--el-border-color-extra-light);"
-        >
-          <ElCheckbox
-            :model-value="selectedIds.includes(record.id)"
-            @change="toggleSelect(record.id)"
-          />
-          <div class="flex-1 min-w-0">
-            <div class="text-sm truncate" style="color: var(--el-text-color-primary);">
-              {{ getRecordTitle(record) }}
-            </div>
-            <div class="text-xs mt-0.5" style="color: var(--el-text-color-secondary);">
-              {{ t('trash.deletedAt') }}: {{ formatTime(record.sys_update_datetime) }}
-            </div>
-          </div>
-          <div class="flex items-center gap-1 flex-shrink-0">
-            <ElButton
-              size="small"
-              text
-              type="primary"
-              @click="handleRestore([record.id])"
-            >
-              <RotateCcw class="w-3.5 h-3.5" />
-            </ElButton>
-            <ElButton
-              size="small"
-              text
-              type="danger"
-              @click="handlePermanentDelete(record.id)"
-            >
-              <Trash2 class="w-3.5 h-3.5" />
-            </ElButton>
-          </div>
-        </div>
-      </div>
-
-      <!-- Pagination -->
-      <div
-        v-if="total > pageSize"
-        class="flex justify-center py-3 flex-shrink-0"
-        style="border-top: 1px solid var(--el-border-color-lighter);"
-      >
-        <ElPagination
-          :current-page="page"
-          :page-size="pageSize"
-          :total="total"
-          layout="prev, pager, next"
-          small
-          @current-change="handlePageChange"
-        />
-      </div>
-    </div>
-  </ZqDrawer>
-</template>
-
-<style scoped>
-.trash-item:hover {
-  background: var(--el-fill-color-light);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/templates/document-templates.ts b/web/apps/web-ele/src/components/zq-smart-table/templates/document-templates.ts
deleted file mode 100644
index b828e04..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/templates/document-templates.ts
+++ /dev/null
@@ -1,564 +0,0 @@
-export interface DocumentTemplate {
-  id: string
-  name: string
-  category: string
-  icon: string
-  description: string
-  content: Record<string, any>
-}
-
-export interface DocTemplateCategory {
-  id: string
-  label: string
-  icon: string
-}
-
-export const DOC_TEMPLATE_CATEGORIES: DocTemplateCategory[] = [
-  { id: 'all', label: '全部模板', icon: 'FileText' },
-  { id: 'work', label: '工作文档', icon: 'Briefcase' },
-  { id: 'meeting', label: '会议记录', icon: 'CalendarCheck' },
-  { id: 'product', label: '产品设计', icon: 'Lightbulb' },
-  { id: 'knowledge', label: '知识沉淀', icon: 'BookOpen' },
-  { id: 'personal', label: '个人效率', icon: 'Target' },
-]
-
-function heading(level: number, text: string) {
-  return {
-    type: 'heading',
-    attrs: { level },
-    content: [{ type: 'text', text }],
-  }
-}
-
-function paragraph(text: string) {
-  if (!text) return { type: 'paragraph' }
-  return {
-    type: 'paragraph',
-    content: [{ type: 'text', text }],
-  }
-}
-
-function bold(text: string) {
-  return { type: 'text', text, marks: [{ type: 'bold' }] }
-}
-
-function bulletList(...items: string[]) {
-  return {
-    type: 'bulletList',
-    content: items.map((t) => ({
-      type: 'listItem',
-      content: [{ type: 'paragraph', content: [{ type: 'text', text: t }] }],
-    })),
-  }
-}
-
-function orderedList(...items: string[]) {
-  return {
-    type: 'orderedList',
-    content: items.map((t) => ({
-      type: 'listItem',
-      content: [{ type: 'paragraph', content: [{ type: 'text', text: t }] }],
-    })),
-  }
-}
-
-function taskList(...items: Array<{ text: string; checked?: boolean }>) {
-  return {
-    type: 'taskList',
-    content: items.map((it) => ({
-      type: 'taskItem',
-      attrs: { checked: it.checked ?? false },
-      content: [{ type: 'paragraph', content: [{ type: 'text', text: it.text }] }],
-    })),
-  }
-}
-
-function blockquote(text: string) {
-  return {
-    type: 'blockquote',
-    content: [paragraph(text)],
-  }
-}
-
-function divider() {
-  return { type: 'horizontalRule' }
-}
-
-function table(headers: string[], rows: string[][]) {
-  const headerRow = {
-    type: 'tableRow',
-    content: headers.map((h) => ({
-      type: 'tableHeader',
-      content: [{ type: 'paragraph', content: [bold(h)] }],
-    })),
-  }
-  const dataRows = rows.map((row) => ({
-    type: 'tableRow',
-    content: row.map((cell) => ({
-      type: 'tableCell',
-      content: [paragraph(cell)],
-    })),
-  }))
-  return { type: 'table', content: [headerRow, ...dataRows] }
-}
-
-export const DOCUMENT_TEMPLATES: DocumentTemplate[] = [
-  // ==================== 空白文档 ====================
-  {
-    id: 'blank',
-    name: '空白文档',
-    category: 'all',
-    icon: 'FilePlus',
-    description: '从零开始创建',
-    content: {
-      type: 'doc',
-      content: [paragraph('')],
-    },
-  },
-
-  // ==================== 工作文档 ====================
-  {
-    id: 'weekly-report',
-    name: '周报',
-    category: 'work',
-    icon: 'ScrollText',
-    description: '记录本周工作与下周计划',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '周报'),
-        heading(2, '本周完成'),
-        orderedList('完成 XX 功能开发与测试', '修复 XX 模块若干 Bug', '参与 XX 项目需求评审'),
-        heading(2, '下周计划'),
-        orderedList('推进 XX 功能上线', '完成 XX 模块性能优化', '编写 XX 技术文档'),
-        heading(2, '需要协助'),
-        bulletList('需要设计同学支持 XX 页面设计', '需要后端同学配合 XX 接口联调'),
-        heading(2, '总结与思考'),
-        paragraph(''),
-      ],
-    },
-  },
-  {
-    id: 'work-plan',
-    name: '工作计划',
-    category: 'work',
-    icon: 'CalendarDays',
-    description: '制定阶段性工作计划',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '工作计划'),
-        heading(2, '目标'),
-        paragraph('明确本阶段的核心目标和预期成果。'),
-        heading(2, '任务分解'),
-        table(
-          ['任务', '负责人', '截止日期', '状态'],
-          [
-            ['任务一', '', '', '未开始'],
-            ['任务二', '', '', '未开始'],
-            ['任务三', '', '', '未开始'],
-          ],
-        ),
-        heading(2, '里程碑'),
-        bulletList('第一阶段：需求确认', '第二阶段：开发实现', '第三阶段：测试上线'),
-        heading(2, '风险与应对'),
-        paragraph(''),
-      ],
-    },
-  },
-  {
-    id: 'project-summary',
-    name: '项目总结',
-    category: 'work',
-    icon: 'Flag',
-    description: '项目复盘与经验总结',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '项目总结'),
-        heading(2, '项目概述'),
-        paragraph('简要描述项目背景、目标和范围。'),
-        heading(2, '完成情况'),
-        table(
-          ['目标', '完成度', '说明'],
-          [
-            ['目标一', '100%', '按时完成'],
-            ['目标二', '80%', '部分延期'],
-          ],
-        ),
-        heading(2, '亮点与成果'),
-        bulletList('成果一', '成果二'),
-        heading(2, '问题与改进'),
-        bulletList('问题一：原因分析及改进措施', '问题二：原因分析及改进措施'),
-        heading(2, '经验教训'),
-        paragraph(''),
-      ],
-    },
-  },
-
-  // ==================== 会议记录 ====================
-  {
-    id: 'meeting-notes',
-    name: '会议纪要',
-    category: 'meeting',
-    icon: 'CalendarCheck',
-    description: '记录会议要点与行动项',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '会议纪要'),
-        table(
-          ['项目', '内容'],
-          [
-            ['会议主题', ''],
-            ['会议时间', ''],
-            ['参会人员', ''],
-            ['会议地点', ''],
-          ],
-        ),
-        divider(),
-        heading(2, '会议议题'),
-        orderedList('议题一', '议题二', '议题三'),
-        heading(2, '讨论要点'),
-        paragraph(''),
-        heading(2, '决议事项'),
-        bulletList('决议一', '决议二'),
-        heading(2, '待办事项'),
-        taskList(
-          { text: '待办一（负责人：XX，截止：XX）' },
-          { text: '待办二（负责人：XX，截止：XX）' },
-          { text: '待办三（负责人：XX，截止：XX）' },
-        ),
-      ],
-    },
-  },
-  {
-    id: 'brainstorm',
-    name: '头脑风暴',
-    category: 'meeting',
-    icon: 'Lightbulb',
-    description: '记录创意讨论与灵感',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '头脑风暴'),
-        heading(2, '主题'),
-        paragraph('本次头脑风暴的核心议题。'),
-        heading(2, '背景'),
-        paragraph('简述讨论背景和目标。'),
-        heading(2, '创意收集'),
-        bulletList('创意 1：描述...', '创意 2：描述...', '创意 3：描述...'),
-        heading(2, '评估与筛选'),
-        table(
-          ['创意', '可行性', '影响力', '优先级'],
-          [
-            ['创意 1', '高', '高', 'P0'],
-            ['创意 2', '中', '高', 'P1'],
-          ],
-        ),
-        heading(2, '下一步行动'),
-        taskList(
-          { text: '行动一' },
-          { text: '行动二' },
-        ),
-      ],
-    },
-  },
-
-  // ==================== 产品设计 ====================
-  {
-    id: 'prd',
-    name: '产品需求文档',
-    category: 'product',
-    icon: 'Rocket',
-    description: 'PRD 标准模板',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '产品需求文档 (PRD)'),
-        heading(2, '1. 文档信息'),
-        table(
-          ['项目', '内容'],
-          [
-            ['产品名称', ''],
-            ['版本号', 'v1.0'],
-            ['作者', ''],
-            ['日期', ''],
-          ],
-        ),
-        heading(2, '2. 背景与目标'),
-        heading(3, '2.1 背景'),
-        paragraph('描述当前问题和业务背景。'),
-        heading(3, '2.2 目标'),
-        bulletList('目标一', '目标二'),
-        heading(2, '3. 用户故事'),
-        blockquote('作为 [角色]，我希望 [功能]，以便 [价值]。'),
-        heading(2, '4. 功能需求'),
-        heading(3, '4.1 功能一'),
-        paragraph('详细描述功能需求、交互逻辑和边界条件。'),
-        heading(3, '4.2 功能二'),
-        paragraph(''),
-        heading(2, '5. 非功能需求'),
-        bulletList('性能要求', '安全要求', '兼容性要求'),
-        heading(2, '6. 数据埋点'),
-        table(
-          ['事件名称', '触发条件', '参数'],
-          [['', '', '']],
-        ),
-        heading(2, '7. 排期计划'),
-        paragraph(''),
-      ],
-    },
-  },
-  {
-    id: 'tech-design',
-    name: '技术方案',
-    category: 'product',
-    icon: 'Monitor',
-    description: '技术设计与架构方案',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '技术方案'),
-        heading(2, '1. 背景'),
-        paragraph('描述技术需求的背景和动机。'),
-        heading(2, '2. 目标'),
-        bulletList('目标一', '目标二'),
-        heading(2, '3. 方案设计'),
-        heading(3, '3.1 整体架构'),
-        paragraph('描述系统整体架构设计。'),
-        heading(3, '3.2 核心流程'),
-        paragraph('描述核心业务流程。'),
-        heading(3, '3.3 数据模型'),
-        paragraph('描述数据表结构和关系。'),
-        heading(2, '4. 接口设计'),
-        table(
-          ['接口', '方法', '路径', '说明'],
-          [['', 'GET/POST', '', '']],
-        ),
-        heading(2, '5. 风险评估'),
-        bulletList('风险一：影响及应对措施', '风险二：影响及应对措施'),
-        heading(2, '6. 排期'),
-        paragraph(''),
-      ],
-    },
-  },
-  {
-    id: 'api-doc',
-    name: 'API 文档',
-    category: 'product',
-    icon: 'ScrollText',
-    description: '接口文档模板',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, 'API 文档'),
-        heading(2, '接口概述'),
-        table(
-          ['项目', '内容'],
-          [
-            ['接口名称', ''],
-            ['请求方式', 'POST'],
-            ['接口路径', '/api/v1/xxx'],
-            ['Content-Type', 'application/json'],
-          ],
-        ),
-        heading(2, '请求参数'),
-        table(
-          ['参数名', '类型', '必填', '说明'],
-          [
-            ['id', 'string', '是', '唯一标识'],
-            ['name', 'string', '否', '名称'],
-          ],
-        ),
-        heading(2, '响应参数'),
-        table(
-          ['参数名', '类型', '说明'],
-          [
-            ['code', 'number', '状态码'],
-            ['message', 'string', '提示信息'],
-            ['data', 'object', '业务数据'],
-          ],
-        ),
-        heading(2, '请求示例'),
-        paragraph(''),
-        heading(2, '响应示例'),
-        paragraph(''),
-        heading(2, '错误码'),
-        table(
-          ['错误码', '说明'],
-          [
-            ['400', '参数错误'],
-            ['401', '未授权'],
-            ['500', '服务器错误'],
-          ],
-        ),
-      ],
-    },
-  },
-
-  // ==================== 知识沉淀 ====================
-  {
-    id: 'knowledge-base',
-    name: '知识库文章',
-    category: 'knowledge',
-    icon: 'BookOpen',
-    description: '结构化知识沉淀',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '知识库文章标题'),
-        blockquote('一句话摘要：简要描述本文核心内容。'),
-        heading(2, '概述'),
-        paragraph('介绍主题的背景和重要性。'),
-        heading(2, '详细内容'),
-        heading(3, '要点一'),
-        paragraph(''),
-        heading(3, '要点二'),
-        paragraph(''),
-        heading(2, '最佳实践'),
-        bulletList('实践一', '实践二', '实践三'),
-        heading(2, '常见问题'),
-        heading(3, 'Q: 问题一？'),
-        paragraph('A: 回答一。'),
-        heading(3, 'Q: 问题二？'),
-        paragraph('A: 回答二。'),
-        heading(2, '参考资料'),
-        bulletList('参考链接一', '参考链接二'),
-      ],
-    },
-  },
-  {
-    id: 'troubleshoot',
-    name: '故障排查手册',
-    category: 'knowledge',
-    icon: 'Bug',
-    description: '记录故障处理流程',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '故障排查手册'),
-        heading(2, '故障概述'),
-        table(
-          ['项目', '内容'],
-          [
-            ['故障名称', ''],
-            ['影响范围', ''],
-            ['严重等级', 'P0 / P1 / P2'],
-            ['发现时间', ''],
-          ],
-        ),
-        heading(2, '现象描述'),
-        paragraph('描述故障的具体表现。'),
-        heading(2, '排查步骤'),
-        orderedList('步骤一：检查...', '步骤二：确认...', '步骤三：定位...'),
-        heading(2, '根因分析'),
-        paragraph(''),
-        heading(2, '解决方案'),
-        paragraph(''),
-        heading(2, '预防措施'),
-        bulletList('措施一', '措施二'),
-      ],
-    },
-  },
-
-  // ==================== 个人效率 ====================
-  {
-    id: 'daily-journal',
-    name: '每日日志',
-    category: 'personal',
-    icon: 'NotebookPen',
-    description: '记录每日工作与反思',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '每日日志'),
-        heading(2, '今日完成'),
-        taskList(
-          { text: '任务一', checked: true },
-          { text: '任务二' },
-          { text: '任务三' },
-        ),
-        heading(2, '明日计划'),
-        taskList(
-          { text: '计划一' },
-          { text: '计划二' },
-        ),
-        heading(2, '遇到的问题'),
-        paragraph(''),
-        heading(2, '今日收获'),
-        paragraph(''),
-      ],
-    },
-  },
-  {
-    id: 'reading-notes',
-    name: '读书笔记',
-    category: 'personal',
-    icon: 'BookOpen',
-    description: '记录阅读心得与摘要',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '读书笔记'),
-        table(
-          ['项目', '内容'],
-          [
-            ['书名', ''],
-            ['作者', ''],
-            ['阅读日期', ''],
-            ['推荐指数', '★★★★☆'],
-          ],
-        ),
-        heading(2, '内容摘要'),
-        paragraph('用自己的话概括本书的核心观点。'),
-        heading(2, '精彩摘录'),
-        blockquote('摘录一'),
-        blockquote('摘录二'),
-        heading(2, '个人感悟'),
-        paragraph(''),
-        heading(2, '行动计划'),
-        taskList(
-          { text: '将 XX 理念应用到工作中' },
-          { text: '深入学习 XX 相关内容' },
-        ),
-      ],
-    },
-  },
-  {
-    id: 'goal-planning',
-    name: '目标规划',
-    category: 'personal',
-    icon: 'Target',
-    description: '制定个人目标与行动计划',
-    content: {
-      type: 'doc',
-      content: [
-        heading(1, '目标规划'),
-        heading(2, '愿景'),
-        paragraph('描述你的长期愿景。'),
-        heading(2, '目标分解'),
-        table(
-          ['目标', '关键结果', '截止日期', '状态'],
-          [
-            ['目标一', 'KR1: ...', '', '进行中'],
-            ['目标二', 'KR1: ...', '', '未开始'],
-          ],
-        ),
-        heading(2, '行动计划'),
-        heading(3, '短期（本月）'),
-        taskList(
-          { text: '行动一' },
-          { text: '行动二' },
-        ),
-        heading(3, '中期（本季度）'),
-        taskList(
-          { text: '行动一' },
-          { text: '行动二' },
-        ),
-        heading(2, '回顾与调整'),
-        paragraph('定期回顾目标进展，及时调整策略。'),
-      ],
-    },
-  },
-]
diff --git a/web/apps/web-ele/src/components/zq-smart-table/templates/table-templates.ts b/web/apps/web-ele/src/components/zq-smart-table/templates/table-templates.ts
deleted file mode 100644
index e9157b2..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/templates/table-templates.ts
+++ /dev/null
@@ -1,507 +0,0 @@
-import { FieldType } from '#/types/zq-smart-table/field'
-import { ViewType } from '#/types/zq-smart-table/table'
-
-export interface TemplateFieldDef {
-  name: string
-  type: FieldType
-  width?: number
-  options?: Array<{ label: string; color: string }>
-  multiple?: boolean
-  currencySymbol?: '¥' | '$' | '€' | '£' | '₩'
-  dateFormat?: string
-  includeTime?: boolean
-  maxRating?: number
-}
-
-export interface TableTemplate {
-  id: string
-  name: string
-  category: string
-  icon: string
-  description: string
-  fields: TemplateFieldDef[]
-  viewType: ViewType
-  viewName?: string
-  kanbanFieldName?: string
-  sampleData?: Array<Record<string, any>>
-}
-
-export interface TemplateCategory {
-  id: string
-  label: string
-  icon: string
-}
-
-export const TEMPLATE_CATEGORIES: TemplateCategory[] = [
-  { id: 'all', label: '全部模板', icon: 'ClipboardList' },
-  { id: 'project', label: '项目管理', icon: 'BarChart2' },
-  { id: 'sales', label: '销售运营', icon: 'Coins' },
-  { id: 'hr', label: '人事行政', icon: 'Users' },
-  { id: 'product', label: '产品研发', icon: 'Rocket' },
-  { id: 'office', label: '日常办公', icon: 'NotebookPen' },
-]
-
-const STATUS_COLORS = ['#4e83fd', '#ff991f', '#36b37e', '#f54a45', '#8777d9']
-const PRIORITY_COLORS = ['#f54a45', '#ff991f', '#36b37e', '#8777d9']
-
-export const TABLE_TEMPLATES: TableTemplate[] = [
-  // ==================== 空白表格 ====================
-  {
-    id: 'blank',
-    name: '空白表格',
-    category: 'all',
-    icon: 'FilePlus',
-    description: '从零开始创建',
-    fields: [
-      { name: '标题', type: FieldType.Text, width: 200 },
-    ],
-    viewType: ViewType.Grid,
-  },
-
-  // ==================== 项目管理 ====================
-  {
-    id: 'project-plan',
-    name: '项目计划',
-    category: 'project',
-    icon: 'CalendarDays',
-    description: '管理项目任务、进度和里程碑',
-    fields: [
-      { name: '任务名称', type: FieldType.Text, width: 220 },
-      {
-        name: '状态', type: FieldType.SingleSelect, width: 120,
-        options: [
-          { label: '未开始', color: STATUS_COLORS[0]! },
-          { label: '进行中', color: STATUS_COLORS[1]! },
-          { label: '已完成', color: STATUS_COLORS[2]! },
-          { label: '已延期', color: STATUS_COLORS[3]! },
-        ],
-      },
-      {
-        name: '优先级', type: FieldType.SingleSelect, width: 100,
-        options: [
-          { label: '紧急', color: PRIORITY_COLORS[0]! },
-          { label: '高', color: PRIORITY_COLORS[1]! },
-          { label: '中', color: PRIORITY_COLORS[2]! },
-          { label: '低', color: PRIORITY_COLORS[3]! },
-        ],
-      },
-      { name: '负责人', type: FieldType.User, width: 120 },
-      { name: '截止日期', type: FieldType.Date, width: 130 },
-      { name: '进度', type: FieldType.Progress, width: 150 },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '任务名称': '需求分析与评审', '状态': '已完成', '优先级': '紧急', '截止日期': '2026-04-05', '进度': 100 },
-      { '任务名称': 'UI 设计稿输出', '状态': '已完成', '优先级': '高', '截止日期': '2026-04-10', '进度': 100 },
-      { '任务名称': '后端接口开发', '状态': '进行中', '优先级': '紧急', '截止日期': '2026-04-18', '进度': 65 },
-      { '任务名称': '前端页面开发', '状态': '进行中', '优先级': '高', '截止日期': '2026-04-20', '进度': 40 },
-      { '任务名称': '联调测试', '状态': '未开始', '优先级': '中', '截止日期': '2026-04-25', '进度': 0 },
-      { '任务名称': '部署上线', '状态': '未开始', '优先级': '高', '截止日期': '2026-04-30', '进度': 0 },
-    ],
-  },
-  {
-    id: 'task-kanban',
-    name: '任务看板',
-    category: 'project',
-    icon: 'Pin',
-    description: '用看板视图管理任务流转',
-    fields: [
-      { name: '任务', type: FieldType.Text, width: 220 },
-      {
-        name: '阶段', type: FieldType.SingleSelect, width: 120,
-        options: [
-          { label: '待处理', color: STATUS_COLORS[0]! },
-          { label: '进行中', color: STATUS_COLORS[1]! },
-          { label: '测试中', color: '#00b8d9' },
-          { label: '已完成', color: STATUS_COLORS[2]! },
-        ],
-      },
-      {
-        name: '优先级', type: FieldType.SingleSelect, width: 100,
-        options: [
-          { label: 'P0', color: PRIORITY_COLORS[0]! },
-          { label: 'P1', color: PRIORITY_COLORS[1]! },
-          { label: 'P2', color: PRIORITY_COLORS[2]! },
-          { label: 'P3', color: PRIORITY_COLORS[3]! },
-        ],
-      },
-      { name: '负责人', type: FieldType.User, width: 120 },
-      { name: '截止日期', type: FieldType.Date, width: 130 },
-    ],
-    viewType: ViewType.Kanban,
-    kanbanFieldName: '阶段',
-    sampleData: [
-      { '任务': '修复登录页样式错位', '阶段': '已完成', '优先级': 'P1', '截止日期': '2026-04-02' },
-      { '任务': '优化首页加载速度', '阶段': '测试中', '优先级': 'P0', '截止日期': '2026-04-08' },
-      { '任务': '实现消息通知功能', '阶段': '进行中', '优先级': 'P1', '截止日期': '2026-04-12' },
-      { '任务': '重构用户权限模块', '阶段': '进行中', '优先级': 'P0', '截止日期': '2026-04-15' },
-      { '任务': '添加数据导出功能', '阶段': '待处理', '优先级': 'P2', '截止日期': '2026-04-20' },
-      { '任务': '编写单元测试', '阶段': '待处理', '优先级': 'P3', '截止日期': '2026-04-25' },
-      { '任务': '国际化支持', '阶段': '待处理', '优先级': 'P2', '截止日期': '2026-04-22' },
-    ],
-  },
-  {
-    id: 'milestone',
-    name: '里程碑追踪',
-    category: 'project',
-    icon: 'Flag',
-    description: '跟踪项目关键里程碑节点',
-    fields: [
-      { name: '里程碑名称', type: FieldType.Text, width: 200 },
-      {
-        name: '状态', type: FieldType.SingleSelect, width: 120,
-        options: [
-          { label: '规划中', color: STATUS_COLORS[0]! },
-          { label: '进行中', color: STATUS_COLORS[1]! },
-          { label: '已达成', color: STATUS_COLORS[2]! },
-          { label: '已延期', color: STATUS_COLORS[3]! },
-        ],
-      },
-      { name: '计划日期', type: FieldType.Date, width: 130 },
-      { name: '实际日期', type: FieldType.Date, width: 130 },
-      { name: '负责人', type: FieldType.User, width: 120 },
-      { name: '备注', type: FieldType.Text, width: 200 },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '里程碑名称': '项目启动', '状态': '已达成', '计划日期': '2026-03-01', '实际日期': '2026-03-01', '备注': '项目正式立项' },
-      { '里程碑名称': '需求冻结', '状态': '已达成', '计划日期': '2026-03-15', '实际日期': '2026-03-17', '备注': '延期2天，新增3个需求' },
-      { '里程碑名称': '设计评审通过', '状态': '进行中', '计划日期': '2026-04-01', '备注': '等待UI终稿确认' },
-      { '里程碑名称': 'Alpha 版本发布', '状态': '规划中', '计划日期': '2026-04-20', '备注': '内部测试版本' },
-      { '里程碑名称': 'Beta 版本发布', '状态': '规划中', '计划日期': '2026-05-10', '备注': '公开测试版本' },
-      { '里程碑名称': '正式上线', '状态': '规划中', '计划日期': '2026-05-30', '备注': '全量发布' },
-    ],
-  },
-
-  // ==================== 销售运营 ====================
-  {
-    id: 'crm',
-    name: '客户管理',
-    category: 'sales',
-    icon: 'HeartHandshake',
-    description: '管理客户信息与跟进记录',
-    fields: [
-      { name: '客户名称', type: FieldType.Text, width: 180 },
-      { name: '联系人', type: FieldType.Text, width: 120 },
-      { name: '手机号', type: FieldType.Phone, width: 140 },
-      { name: '邮箱', type: FieldType.Email, width: 180 },
-      {
-        name: '客户阶段', type: FieldType.SingleSelect, width: 120,
-        options: [
-          { label: '潜在客户', color: STATUS_COLORS[0]! },
-          { label: '意向客户', color: STATUS_COLORS[1]! },
-          { label: '商务谈判', color: '#00b8d9' },
-          { label: '已成交', color: STATUS_COLORS[2]! },
-          { label: '已流失', color: STATUS_COLORS[3]! },
-        ],
-      },
-      { name: '预计金额', type: FieldType.Currency, width: 130, currencySymbol: '¥' },
-      { name: '跟进人', type: FieldType.User, width: 120 },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '客户名称': '星辰科技有限公司', '联系人': '张明', '手机号': '13800138001', '邮箱': 'zhangming@xctech.com', '客户阶段': '已成交', '预计金额': 580000 },
-      { '客户名称': '蓝海网络集团', '联系人': '李娜', '手机号': '13900139002', '邮箱': 'lina@bluesea.cn', '客户阶段': '商务谈判', '预计金额': 320000 },
-      { '客户名称': '云端数据服务', '联系人': '王强', '手机号': '13700137003', '邮箱': 'wangqiang@clouddata.io', '客户阶段': '意向客户', '预计金额': 150000 },
-      { '客户名称': '绿叶生物科技', '联系人': '赵丽', '手机号': '13600136004', '邮箱': 'zhaoli@greenleaf.com', '客户阶段': '潜在客户', '预计金额': 200000 },
-      { '客户名称': '鼎盛传媒', '联系人': '陈浩', '手机号': '13500135005', '邮箱': 'chenhao@dsmedia.cn', '客户阶段': '已流失', '预计金额': 90000 },
-    ],
-  },
-  {
-    id: 'sales-funnel',
-    name: '销售漏斗',
-    category: 'sales',
-    icon: 'TrendingUp',
-    description: '管理销售商机与转化流程',
-    fields: [
-      { name: '商机名称', type: FieldType.Text, width: 200 },
-      { name: '客户', type: FieldType.Text, width: 150 },
-      {
-        name: '阶段', type: FieldType.SingleSelect, width: 120,
-        options: [
-          { label: '初步接触', color: STATUS_COLORS[0]! },
-          { label: '需求确认', color: STATUS_COLORS[1]! },
-          { label: '方案报价', color: '#00b8d9' },
-          { label: '合同签订', color: STATUS_COLORS[2]! },
-          { label: '已关闭', color: STATUS_COLORS[3]! },
-        ],
-      },
-      { name: '金额', type: FieldType.Currency, width: 130, currencySymbol: '¥' },
-      { name: '预计成交日', type: FieldType.Date, width: 130 },
-      { name: '负责人', type: FieldType.User, width: 120 },
-    ],
-    viewType: ViewType.Kanban,
-    kanbanFieldName: '阶段',
-    sampleData: [
-      { '商机名称': 'ERP系统升级项目', '客户': '星辰科技', '阶段': '合同签订', '金额': 450000, '预计成交日': '2026-04-10' },
-      { '商机名称': '数据中台建设', '客户': '蓝海网络', '阶段': '方案报价', '金额': 680000, '预计成交日': '2026-04-25' },
-      { '商机名称': 'CRM系统采购', '客户': '云端数据', '阶段': '需求确认', '金额': 220000, '预计成交日': '2026-05-15' },
-      { '商机名称': '官网改版', '客户': '绿叶生物', '阶段': '初步接触', '金额': 85000, '预计成交日': '2026-05-30' },
-      { '商机名称': '移动端App开发', '客户': '鼎盛传媒', '阶段': '已关闭', '金额': 350000, '预计成交日': '2026-03-20' },
-      { '商机名称': '智能客服系统', '客户': '星辰科技', '阶段': '需求确认', '金额': 180000, '预计成交日': '2026-05-20' },
-    ],
-  },
-
-  // ==================== 人事行政 ====================
-  {
-    id: 'recruitment',
-    name: '人员招聘',
-    category: 'hr',
-    icon: 'Briefcase',
-    description: '追踪招聘流程与候选人状态',
-    fields: [
-      { name: '职位', type: FieldType.Text, width: 180 },
-      { name: '候选人', type: FieldType.Text, width: 130 },
-      {
-        name: '状态', type: FieldType.SingleSelect, width: 120,
-        options: [
-          { label: '简历筛选', color: STATUS_COLORS[0]! },
-          { label: '面试中', color: STATUS_COLORS[1]! },
-          { label: '已录用', color: STATUS_COLORS[2]! },
-          { label: '已淘汰', color: STATUS_COLORS[3]! },
-        ],
-      },
-      { name: '面试官', type: FieldType.User, width: 120 },
-      { name: '面试日期', type: FieldType.Date, width: 130 },
-      { name: '评价', type: FieldType.Rating, width: 140, maxRating: 5 },
-      { name: '手机号', type: FieldType.Phone, width: 140 },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '职位': '高级前端工程师', '候选人': '刘洋', '状态': '已录用', '面试日期': '2026-03-20', '评价': 5, '手机号': '13811138001' },
-      { '职位': '高级前端工程师', '候选人': '周婷', '状态': '面试中', '面试日期': '2026-04-02', '评价': 4, '手机号': '13922239002' },
-      { '职位': '产品经理', '候选人': '吴磊', '状态': '面试中', '面试日期': '2026-04-05', '评价': 3, '手机号': '13733337003' },
-      { '职位': '后端工程师', '候选人': '孙悦', '状态': '简历筛选', '面试日期': '2026-04-10', '手机号': '13644436004' },
-      { '职位': 'UI 设计师', '候选人': '郑凯', '状态': '已淘汰', '面试日期': '2026-03-15', '评价': 2, '手机号': '13555535005' },
-      { '职位': '测试工程师', '候选人': '黄蕾', '状态': '简历筛选', '手机号': '13466634006' },
-    ],
-  },
-  {
-    id: 'employee-roster',
-    name: '员工花名册',
-    category: 'hr',
-    icon: 'IdCard',
-    description: '统一管理员工基本信息',
-    fields: [
-      { name: '姓名', type: FieldType.Text, width: 120 },
-      { name: '部门', type: FieldType.Department, width: 150 },
-      { name: '职位', type: FieldType.Text, width: 140 },
-      { name: '入职日期', type: FieldType.Date, width: 130 },
-      { name: '手机号', type: FieldType.Phone, width: 140 },
-      { name: '邮箱', type: FieldType.Email, width: 180 },
-      { name: '地区', type: FieldType.Region, width: 180 },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '姓名': '张伟', '职位': '技术总监', '入职日期': '2022-03-15', '手机号': '13800001001', '邮箱': 'zhangwei@company.com' },
-      { '姓名': '李芳', '职位': '产品经理', '入职日期': '2023-06-01', '手机号': '13900002002', '邮箱': 'lifang@company.com' },
-      { '姓名': '王磊', '职位': '高级前端工程师', '入职日期': '2023-09-12', '手机号': '13700003003', '邮箱': 'wanglei@company.com' },
-      { '姓名': '赵敏', '职位': 'UI 设计师', '入职日期': '2024-01-08', '手机号': '13600004004', '邮箱': 'zhaomin@company.com' },
-      { '姓名': '陈杰', '职位': '后端工程师', '入职日期': '2024-07-20', '手机号': '13500005005', '邮箱': 'chenjie@company.com' },
-      { '姓名': '孙莉', '职位': '人事专员', '入职日期': '2025-02-10', '手机号': '13400006006', '邮箱': 'sunli@company.com' },
-    ],
-  },
-
-  // ==================== 产品研发 ====================
-  {
-    id: 'requirement-pool',
-    name: '需求池',
-    category: 'product',
-    icon: 'Lightbulb',
-    description: '收集和管理产品需求',
-    fields: [
-      { name: '需求名称', type: FieldType.Text, width: 220 },
-      {
-        name: '优先级', type: FieldType.SingleSelect, width: 100,
-        options: [
-          { label: '紧急', color: PRIORITY_COLORS[0]! },
-          { label: '高', color: PRIORITY_COLORS[1]! },
-          { label: '中', color: PRIORITY_COLORS[2]! },
-          { label: '低', color: PRIORITY_COLORS[3]! },
-        ],
-      },
-      {
-        name: '状态', type: FieldType.SingleSelect, width: 120,
-        options: [
-          { label: '待评审', color: STATUS_COLORS[0]! },
-          { label: '已排期', color: STATUS_COLORS[1]! },
-          { label: '开发中', color: '#00b8d9' },
-          { label: '已上线', color: STATUS_COLORS[2]! },
-          { label: '已拒绝', color: STATUS_COLORS[3]! },
-        ],
-      },
-      { name: '负责人', type: FieldType.User, width: 120 },
-      { name: '截止日期', type: FieldType.Date, width: 130 },
-      { name: '描述', type: FieldType.RichText, width: 250 },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '需求名称': '支持深色模式', '优先级': '高', '状态': '已上线', '截止日期': '2026-03-20', '描述': '全局支持 dark/light 主题切换' },
-      { '需求名称': '数据导出为 Excel', '优先级': '紧急', '状态': '开发中', '截止日期': '2026-04-10', '描述': '支持将表格数据导出为 .xlsx 格式' },
-      { '需求名称': '多语言国际化', '优先级': '高', '状态': '开发中', '截止日期': '2026-04-15', '描述': '支持中文、英文、繁体中文' },
-      { '需求名称': '移动端适配', '优先级': '中', '状态': '已排期', '截止日期': '2026-05-01', '描述': '响应式布局适配手机和平板' },
-      { '需求名称': '批量操作功能', '优先级': '中', '状态': '待评审', '截止日期': '2026-05-15', '描述': '支持批量删除、批量修改状态' },
-      { '需求名称': '自定义仪表盘', '优先级': '低', '状态': '待评审', '截止日期': '2026-06-01', '描述': '用户可自定义首页仪表盘布局' },
-    ],
-  },
-  {
-    id: 'bug-tracker',
-    name: 'Bug 追踪',
-    category: 'product',
-    icon: 'Bug',
-    description: '记录和追踪软件缺陷',
-    fields: [
-      { name: '标题', type: FieldType.Text, width: 220 },
-      {
-        name: '严重程度', type: FieldType.SingleSelect, width: 120,
-        options: [
-          { label: '致命', color: '#f54a45' },
-          { label: '严重', color: '#ff991f' },
-          { label: '一般', color: '#4e83fd' },
-          { label: '轻微', color: '#36b37e' },
-        ],
-      },
-      {
-        name: '状态', type: FieldType.SingleSelect, width: 120,
-        options: [
-          { label: '待修复', color: STATUS_COLORS[0]! },
-          { label: '修复中', color: STATUS_COLORS[1]! },
-          { label: '已修复', color: STATUS_COLORS[2]! },
-          { label: '已关闭', color: STATUS_COLORS[3]! },
-        ],
-      },
-      { name: '指派给', type: FieldType.User, width: 120 },
-      { name: '提交日期', type: FieldType.Date, width: 130 },
-      { name: '复现步骤', type: FieldType.RichText, width: 250 },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '标题': '登录页面在 Safari 下白屏', '严重程度': '致命', '状态': '已修复', '提交日期': '2026-03-18', '复现步骤': '使用 Safari 16 打开登录页，输入账号密码后页面白屏' },
-      { '标题': '表格排序后分页数据错乱', '严重程度': '严重', '状态': '修复中', '提交日期': '2026-03-25', '复现步骤': '点击表头排序后切换到第2页，数据与第1页重复' },
-      { '标题': '导出文件名包含特殊字符时失败', '严重程度': '一般', '状态': '待修复', '提交日期': '2026-03-28', '复现步骤': '将表格命名为 "测试/数据" 后点击导出' },
-      { '标题': '头像上传后不刷新', '严重程度': '轻微', '状态': '待修复', '提交日期': '2026-04-01', '复现步骤': '个人设置中上传新头像，页面不自动刷新显示' },
-      { '标题': '深色模式下弹窗背景色异常', '严重程度': '一般', '状态': '已关闭', '提交日期': '2026-03-10', '复现步骤': '切换到深色模式，打开任意弹窗，背景色为白色' },
-    ],
-  },
-
-  // ==================== 日常办公 ====================
-  {
-    id: 'meeting-notes',
-    name: '会议记录',
-    category: 'office',
-    icon: 'CalendarCheck',
-    description: '记录会议要点与待办事项',
-    fields: [
-      { name: '会议主题', type: FieldType.Text, width: 200 },
-      { name: '会议日期', type: FieldType.Date, width: 130, includeTime: true },
-      { name: '参会人', type: FieldType.User, width: 160, multiple: true },
-      { name: '会议纪要', type: FieldType.RichText, width: 280 },
-      { name: '待办事项', type: FieldType.Text, width: 200 },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '会议主题': 'Q2 产品规划评审', '会议日期': '2026-04-01 10:00', '会议纪要': '确定Q2核心功能：数据导出、权限管理、移动端适配', '待办事项': '产品组输出PRD，4月5日前完成' },
-      { '会议主题': '技术方案讨论会', '会议日期': '2026-04-03 14:00', '会议纪要': '决定采用微服务架构重构用户模块', '待办事项': '后端组出技术方案文档' },
-      { '会议主题': '周一站会', '会议日期': '2026-04-07 09:30', '会议纪要': '各组同步本周计划，无阻塞问题', '待办事项': '各组按计划推进' },
-      { '会议主题': '客户需求对接', '会议日期': '2026-04-08 15:00', '会议纪要': '客户提出新增报表定制功能需求', '待办事项': '产品评估可行性，本周五反馈' },
-    ],
-  },
-  {
-    id: 'okr',
-    name: 'OKR 管理',
-    category: 'office',
-    icon: 'Target',
-    description: '设定目标与关键结果',
-    fields: [
-      { name: '目标', type: FieldType.Text, width: 220 },
-      { name: '关键结果', type: FieldType.Text, width: 220 },
-      { name: '负责人', type: FieldType.User, width: 120 },
-      { name: '进度', type: FieldType.Progress, width: 150 },
-      {
-        name: '季度', type: FieldType.SingleSelect, width: 100,
-        options: [
-          { label: 'Q1', color: '#4e83fd' },
-          { label: 'Q2', color: '#36b37e' },
-          { label: 'Q3', color: '#ff991f' },
-          { label: 'Q4', color: '#8777d9' },
-        ],
-      },
-      {
-        name: '状态', type: FieldType.SingleSelect, width: 100,
-        options: [
-          { label: '进行中', color: STATUS_COLORS[1]! },
-          { label: '已完成', color: STATUS_COLORS[2]! },
-          { label: '已放弃', color: STATUS_COLORS[3]! },
-        ],
-      },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '目标': '提升产品用户体验', '关键结果': '用户满意度评分达到 4.5 分以上', '进度': 80, '季度': 'Q2', '状态': '进行中' },
-      { '目标': '提升产品用户体验', '关键结果': '页面平均加载时间降至 1.5s 以内', '进度': 60, '季度': 'Q2', '状态': '进行中' },
-      { '目标': '扩大市场份额', '关键结果': '新增企业客户 50 家', '进度': 35, '季度': 'Q2', '状态': '进行中' },
-      { '目标': '扩大市场份额', '关键结果': '月活跃用户增长 30%', '进度': 20, '季度': 'Q2', '状态': '进行中' },
-      { '目标': '完善基础设施', '关键结果': '核心服务可用性达到 99.9%', '进度': 100, '季度': 'Q1', '状态': '已完成' },
-      { '目标': '完善基础设施', '关键结果': '自动化测试覆盖率达到 80%', '进度': 100, '季度': 'Q1', '状态': '已完成' },
-    ],
-  },
-  {
-    id: 'weekly-report',
-    name: '周报',
-    category: 'office',
-    icon: 'ScrollText',
-    description: '团队周报汇总',
-    fields: [
-      { name: '本周完成', type: FieldType.RichText, width: 250 },
-      { name: '下周计划', type: FieldType.RichText, width: 250 },
-      { name: '需要协助', type: FieldType.Text, width: 200 },
-      { name: '日期', type: FieldType.Date, width: 130 },
-      { name: '提交人', type: FieldType.User, width: 120 },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '本周完成': '完成用户模块重构，修复5个线上Bug', '下周计划': '开始权限管理模块开发', '需要协助': '需要设计稿支持', '日期': '2026-03-28' },
-      { '本周完成': '输出Q2产品规划文档，完成竞品分析', '下周计划': '启动数据导出功能PRD', '需要协助': '无', '日期': '2026-03-28' },
-      { '本周完成': '完成首页UI改版设计', '下周计划': '设计权限管理页面', '需要协助': '需要产品确认交互细节', '日期': '2026-03-28' },
-    ],
-  },
-  {
-    id: 'asset-mgmt',
-    name: '资产管理',
-    category: 'office',
-    icon: 'Monitor',
-    description: '登记和管理公司资产',
-    fields: [
-      { name: '资产名称', type: FieldType.Text, width: 180 },
-      {
-        name: '类型', type: FieldType.SingleSelect, width: 120,
-        options: [
-          { label: '电脑', color: '#4e83fd' },
-          { label: '显示器', color: '#36b37e' },
-          { label: '手机', color: '#ff991f' },
-          { label: '其他', color: '#8777d9' },
-        ],
-      },
-      {
-        name: '状态', type: FieldType.SingleSelect, width: 100,
-        options: [
-          { label: '在用', color: '#36b37e' },
-          { label: '闲置', color: '#ff991f' },
-          { label: '报废', color: '#f54a45' },
-        ],
-      },
-      { name: '使用人', type: FieldType.User, width: 120 },
-      { name: '购入日期', type: FieldType.Date, width: 130 },
-      { name: '编号', type: FieldType.AutoNumber, width: 100 },
-    ],
-    viewType: ViewType.Grid,
-    sampleData: [
-      { '资产名称': 'MacBook Pro 16" M3', '类型': '电脑', '状态': '在用', '购入日期': '2025-06-15' },
-      { '资产名称': 'Dell U2723QE 4K 显示器', '类型': '显示器', '状态': '在用', '购入日期': '2025-06-15' },
-      { '资产名称': 'ThinkPad X1 Carbon', '类型': '电脑', '状态': '在用', '购入日期': '2024-12-01' },
-      { '资产名称': 'iPhone 16 Pro', '类型': '手机', '状态': '在用', '购入日期': '2025-09-20' },
-      { '资产名称': 'MacBook Air M2', '类型': '电脑', '状态': '闲置', '购入日期': '2023-08-10' },
-      { '资产名称': 'Dell P2422H 显示器', '类型': '显示器', '状态': '报废', '购入日期': '2021-03-05' },
-    ],
-  },
-]
diff --git a/web/apps/web-ele/src/components/zq-smart-table/toolbar/ConditionalFormatPanel.vue b/web/apps/web-ele/src/components/zq-smart-table/toolbar/ConditionalFormatPanel.vue
deleted file mode 100644
index e947dc2..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/toolbar/ConditionalFormatPanel.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FilterOperator, type ConditionalFormatRule } from '#/types/zq-smart-table/table'
-import { Plus, Delete } from '@element-plus/icons-vue'
-
-const emit = defineEmits<{ close: [] }>()
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-const operatorOptions = [
-  { value: FilterOperator.Equals, label: () => t('filter.equals') },
-  { value: FilterOperator.NotEquals, label: () => t('filter.notEquals') },
-  { value: FilterOperator.Contains, label: () => t('filter.contains') },
-  { value: FilterOperator.IsEmpty, label: () => t('filter.isEmpty') },
-  { value: FilterOperator.IsNotEmpty, label: () => t('filter.isNotEmpty') },
-  { value: FilterOperator.GreaterThan, label: () => t('filter.greaterThan') },
-  { value: FilterOperator.LessThan, label: () => t('filter.lessThan') },
-]
-
-const bgPresets = ['#fff3cd', '#d1ecf1', '#d4edda', '#f8d7da', '#e2d9f3', '#fde2e1', '#e8f5e9', '#fff8e1']
-const textPresets = ['#1f2329', '#f54a45', '#34c724', '#4e83fd', '#ff7d00', '#8777d9', '#ffffff']
-
-function uid() {
-  return Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
-}
-
-function addRule() {
-  const view = tableStore.activeView
-  const table = tableStore.activeTable
-  if (!view || !table || table.fields.length === 0) return
-  if (!view.conditionalFormats) view.conditionalFormats = []
-  view.conditionalFormats.push({
-    id: uid(),
-    fieldId: table.fields[0].id,
-    operator: FilterOperator.IsNotEmpty,
-    value: '',
-    bgColor: '#fff3cd',
-    textColor: '#1f2329',
-    applyToRow: false,
-  })
-  tableStore.saveActiveViewConfig()
-}
-
-function removeRule(index: number) {
-  const view = tableStore.activeView
-  if (!view?.conditionalFormats) return
-  view.conditionalFormats.splice(index, 1)
-  tableStore.saveActiveViewConfig()
-}
-
-function needsValue(op: FilterOperator): boolean {
-  return op !== FilterOperator.IsEmpty && op !== FilterOperator.IsNotEmpty
-}
-</script>
-
-<template>
-  <div v-if="tableStore.activeView && tableStore.activeTable" style="min-width: 380px;">
-    <div class="text-sm font-medium mb-3" style="color: var(--zq-text-primary);">{{ t('toolbar.conditionalFormat') }}</div>
-
-    <div v-if="!tableStore.activeView.conditionalFormats?.length" class="text-xs mb-3" style="color: var(--zq-text-placeholder);">
-      {{ t('toolbar.noConditionalFormats') }}
-    </div>
-
-    <div class="space-y-4 mb-3">
-      <div
-        v-for="(rule, index) in (tableStore.activeView.conditionalFormats ?? [])"
-        :key="rule.id"
-        class="rounded-lg p-3"
-        style="background: var(--zq-bg-secondary); border: 1px solid var(--zq-border-color-light);"
-      >
-        <!-- Rule header -->
-        <div class="flex items-center justify-between mb-2">
-          <span class="text-xs font-medium" style="color: var(--zq-text-secondary);">{{ t('toolbar.rule') }} {{ index + 1 }}</span>
-          <div class="flex items-center gap-2">
-            <el-switch v-model="rule.applyToRow" size="small" />
-            <span class="text-xs" style="color: var(--zq-text-secondary);">{{ t('toolbar.applyToRow') }}</span>
-            <el-button size="small" text type="danger" @click="removeRule(index)">
-              <el-icon><Delete /></el-icon>
-            </el-button>
-          </div>
-        </div>
-
-        <!-- Condition -->
-        <div class="flex items-center gap-2 mb-2 flex-wrap">
-          <el-select v-model="rule.fieldId" size="small" style="width: 110px;">
-            <el-option v-for="f in tableStore.activeTable!.fields" :key="f.id" :label="f.name" :value="f.id" />
-          </el-select>
-          <el-select v-model="rule.operator" size="small" style="width: 110px;">
-            <el-option v-for="op in operatorOptions" :key="op.value" :label="op.label()" :value="op.value" />
-          </el-select>
-          <el-input v-if="needsValue(rule.operator)" v-model="rule.value as string" size="small" style="width: 90px;" />
-        </div>
-
-        <!-- Colors -->
-        <div class="flex items-center gap-3">
-          <div>
-            <div class="text-[10px] mb-1" style="color: var(--zq-text-placeholder);">{{ t('toolbar.bgColor') }}</div>
-            <div class="flex gap-1 flex-wrap">
-              <span
-                v-for="color in bgPresets" :key="color"
-                class="w-5 h-5 rounded cursor-pointer ring-offset-1 transition-all"
-                :style="{ background: color, outline: rule.bgColor === color ? '2px solid var(--zq-brand-color)' : 'none' }"
-                @click="rule.bgColor = color"
-              />
-              <el-color-picker v-model="rule.bgColor" size="small" />
-            </div>
-          </div>
-          <div>
-            <div class="text-[10px] mb-1" style="color: var(--zq-text-placeholder);">{{ t('toolbar.textColor') }}</div>
-            <div class="flex gap-1 flex-wrap">
-              <span
-                v-for="color in textPresets" :key="color"
-                class="w-5 h-5 rounded cursor-pointer ring-offset-1 transition-all border"
-                :style="{ background: color, outline: rule.textColor === color ? '2px solid var(--zq-brand-color)' : 'none', borderColor: 'var(--zq-border-color-light)' }"
-                @click="rule.textColor = color"
-              />
-              <el-color-picker v-model="rule.textColor" size="small" />
-            </div>
-          </div>
-        </div>
-
-        <!-- Preview -->
-        <div class="mt-2 px-2 py-1 rounded text-xs" :style="{ background: rule.bgColor, color: rule.textColor }">
-          {{ t('toolbar.preview') }}: {{ t('table.noTitle') }}
-        </div>
-      </div>
-    </div>
-
-    <el-button size="small" text type="primary" @click="addRule">
-      <el-icon class="mr-1"><Plus /></el-icon>
-      {{ t('toolbar.addRule') }}
-    </el-button>
-  </div>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/toolbar/FieldVisibilityPanel.vue b/web/apps/web-ele/src/components/zq-smart-table/toolbar/FieldVisibilityPanel.vue
deleted file mode 100644
index b12ca16..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/toolbar/FieldVisibilityPanel.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import FieldIcon from '#/components/zq-smart-table/icons/FieldIcon.vue'
-
-const emit = defineEmits<{ close: [] }>()
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-const fields = computed(() => tableStore.activeTable?.fields ?? [])
-const view = computed(() => tableStore.activeView)
-
-function isVisible(fieldId: string): boolean {
-  return !!view.value?.visibleFieldIds.includes(fieldId)
-}
-
-function toggleField(fieldId: string) {
-  const v = view.value
-  if (!v) return
-  const idx = v.visibleFieldIds.indexOf(fieldId)
-  if (idx !== -1) {
-    if (v.visibleFieldIds.length <= 1) return
-    v.visibleFieldIds.splice(idx, 1)
-    const f = fields.value.find((ff) => ff.id === fieldId)
-    if (f) f.visible = false
-  } else {
-    v.visibleFieldIds.push(fieldId)
-    const f = fields.value.find((ff) => ff.id === fieldId)
-    if (f) f.visible = true
-  }
-  tableStore.saveActiveViewConfig()
-}
-
-function showAll() {
-  const v = view.value
-  if (!v) return
-  v.visibleFieldIds = fields.value.map((f) => f.id)
-  fields.value.forEach((f) => { f.visible = true })
-  tableStore.saveActiveViewConfig()
-}
-
-function hideAll() {
-  const v = view.value
-  if (!v) return
-  if (fields.value.length > 0) {
-    v.visibleFieldIds = [fields.value[0].id]
-    fields.value.forEach((f, i) => { f.visible = i === 0 })
-  }
-  tableStore.saveActiveViewConfig()
-}
-
-const hiddenCount = computed(() => {
-  return fields.value.length - (view.value?.visibleFieldIds.length ?? 0)
-})
-</script>
-
-<template>
-  <div v-if="view">
-    <div class="flex items-center justify-between mb-3">
-      <span class="text-sm font-medium" style="color: var(--zq-text-primary);">{{ t('toolbar.fieldVisibility') }}</span>
-      <span v-if="hiddenCount > 0" class="text-[11px]" style="color: var(--zq-text-placeholder);">
-        {{ hiddenCount }} {{ t('toolbar.hideFields').toLowerCase() }}
-      </span>
-    </div>
-
-    <div class="space-y-1 max-h-[300px] overflow-auto mb-3">
-      <div
-        v-for="field in fields"
-        :key="field.id"
-        class="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer transition-colors hover:bg-black/4 dark:hover:bg-white/6"
-        @click="toggleField(field.id)"
-      >
-        <el-switch
-          :model-value="isVisible(field.id)"
-          size="small"
-          @click.stop
-          @change="toggleField(field.id)"
-        />
-        <FieldIcon :type="field.type" :size="13" class="opacity-60 flex-shrink-0" />
-        <span class="text-xs truncate" style="color: var(--zq-text-primary);">{{ field.name }}</span>
-      </div>
-    </div>
-
-    <div class="flex gap-2 border-t pt-2" style="border-color: var(--zq-border-color-light);">
-      <el-button size="small" text type="primary" @click="showAll">{{ t('toolbar.showAll') }}</el-button>
-      <el-button size="small" text @click="hideAll">{{ t('toolbar.hideAll') }}</el-button>
-    </div>
-  </div>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/toolbar/FilterPanel.vue b/web/apps/web-ele/src/components/zq-smart-table/toolbar/FilterPanel.vue
deleted file mode 100644
index a988723..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/toolbar/FilterPanel.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<script setup lang="ts">
-import { watch } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { FilterOperator } from '#/types/zq-smart-table/table'
-import { Plus, Delete } from '@element-plus/icons-vue'
-
-const emit = defineEmits<{ close: [] }>()
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-const operatorOptions = [
-  { value: FilterOperator.Contains, label: () => t('filter.contains') },
-  { value: FilterOperator.NotContains, label: () => t('filter.notContains') },
-  { value: FilterOperator.Equals, label: () => t('filter.equals') },
-  { value: FilterOperator.NotEquals, label: () => t('filter.notEquals') },
-  { value: FilterOperator.IsEmpty, label: () => t('filter.isEmpty') },
-  { value: FilterOperator.IsNotEmpty, label: () => t('filter.isNotEmpty') },
-  { value: FilterOperator.GreaterThan, label: () => t('filter.greaterThan') },
-  { value: FilterOperator.LessThan, label: () => t('filter.lessThan') },
-]
-
-function addFilter() {
-  const view = tableStore.activeView
-  const table = tableStore.activeTable
-  if (!view || !table || table.fields.length === 0) return
-  view.filters.push({
-    fieldId: table.fields[0].id,
-    operator: FilterOperator.Contains,
-    value: '',
-  })
-  tableStore.saveActiveViewConfig()
-}
-
-function removeFilter(index: number) {
-  const view = tableStore.activeView
-  if (!view) return
-  view.filters.splice(index, 1)
-  tableStore.saveActiveViewConfigAndReload()
-}
-
-function toggleLogic() {
-  const view = tableStore.activeView
-  if (!view) return
-  view.filterLogic = view.filterLogic === 'or' ? 'and' : 'or'
-  tableStore.saveActiveViewConfigAndReload()
-}
-
-watch(
-  () => tableStore.activeView?.filters.map((f) => `${f.fieldId}|${f.operator}|${f.value}`).join(','),
-  () => { tableStore.saveActiveViewConfigAndReload() },
-)
-</script>
-
-<template>
-  <div v-if="tableStore.activeView && tableStore.activeTable">
-    <div class="text-sm font-medium mb-3" style="color: var(--zq-text-primary);">{{ t('toolbar.filter') }}</div>
-
-    <div v-if="tableStore.activeView.filters.length > 0" class="space-y-2 mb-2">
-      <div
-        v-for="(filter, index) in tableStore.activeView.filters"
-        :key="index"
-        class="flex items-center gap-2"
-      >
-        <!-- AND/OR logic badge -->
-        <div class="w-10 flex-shrink-0 flex items-center justify-center">
-          <span
-            v-if="index === 0"
-            class="text-xs"
-            style="color: var(--zq-text-placeholder);"
-          >{{ t('filter.where') }}</span>
-          <button
-            v-else
-            class="text-xs font-semibold px-1.5 py-0.5 rounded cursor-pointer transition-colors"
-            :style="{ background: 'var(--zq-brand-color-light)', color: 'var(--zq-brand-color)', border: 'none' }"
-            @click="toggleLogic"
-          >
-            {{ tableStore.activeView.filterLogic === 'and' ? t('filter.and') : t('filter.or') }}
-          </button>
-        </div>
-
-        <el-select v-model="filter.fieldId" size="small" style="width: 110px;">
-          <el-option
-            v-for="field in tableStore.activeTable.fields"
-            :key="field.id"
-            :label="field.name"
-            :value="field.id"
-          />
-        </el-select>
-
-        <el-select v-model="filter.operator" size="small" style="width: 100px;">
-          <el-option
-            v-for="op in operatorOptions"
-            :key="op.value"
-            :label="op.label()"
-            :value="op.value"
-          />
-        </el-select>
-
-        <el-input
-          v-if="filter.operator !== FilterOperator.IsEmpty && filter.operator !== FilterOperator.IsNotEmpty"
-          v-model="filter.value as string"
-          size="small"
-          style="width: 90px;"
-        />
-        <div v-else style="width: 90px;" />
-
-        <el-button size="small" text type="danger" @click="removeFilter(index)">
-          <el-icon><Delete /></el-icon>
-        </el-button>
-      </div>
-    </div>
-
-    <div v-else class="text-xs mb-3" style="color: var(--zq-text-placeholder);">
-      {{ t('filter.noFilters') }}
-    </div>
-
-    <el-button size="small" text type="primary" @click="addFilter">
-      <el-icon class="mr-1"><Plus /></el-icon>
-      {{ t('toolbar.addFilter') }}
-    </el-button>
-  </div>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/toolbar/GroupPanel.vue b/web/apps/web-ele/src/components/zq-smart-table/toolbar/GroupPanel.vue
deleted file mode 100644
index 646d1a6..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/toolbar/GroupPanel.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import { watch } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { Plus, Delete } from '@element-plus/icons-vue'
-
-const emit = defineEmits<{ close: [] }>()
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-function addGroup() {
-  const view = tableStore.activeView
-  const table = tableStore.activeTable
-  if (!view || !table) return
-  const usedIds = view.groups.map((g) => g.fieldId)
-  const available = table.fields.filter((f) => !usedIds.includes(f.id))
-  if (available.length === 0) return
-  view.groups.push({ fieldId: available[0].id })
-  tableStore.saveActiveViewConfigAndReload()
-}
-
-function removeGroup(index: number) {
-  const view = tableStore.activeView
-  if (!view) return
-  view.groups.splice(index, 1)
-  tableStore.saveActiveViewConfigAndReload()
-}
-
-function clearGroups() {
-  const view = tableStore.activeView
-  if (!view) return
-  view.groups = []
-  tableStore.saveActiveViewConfigAndReload()
-}
-
-watch(
-  () => tableStore.activeView?.groups.map((g) => g.fieldId).join(','),
-  () => { tableStore.saveActiveViewConfigAndReload() },
-)
-</script>
-
-<template>
-  <div class="space-y-3">
-    <div class="flex items-center justify-between">
-      <span class="text-sm font-medium" style="color: var(--zq-text-primary);">{{ t('toolbar.group') }}</span>
-      <el-button v-if="tableStore.activeView && tableStore.activeView.groups.length > 0" text size="small" @click="clearGroups">{{ t('common.reset') }}</el-button>
-    </div>
-
-    <div
-      v-for="(group, index) in tableStore.activeView?.groups ?? []"
-      :key="index"
-      class="flex items-center gap-2"
-    >
-      <el-select
-        v-model="group.fieldId"
-        size="small"
-        style="flex: 1;"
-      >
-        <el-option
-          v-for="field in tableStore.activeTable?.fields ?? []"
-          :key="field.id"
-          :label="field.name"
-          :value="field.id"
-        />
-      </el-select>
-      <el-button text size="small" @click="removeGroup(index)">
-        <el-icon><Delete /></el-icon>
-      </el-button>
-    </div>
-
-    <el-button size="small" text type="primary" @click="addGroup">
-      <el-icon class="mr-1"><Plus /></el-icon>
-      {{ t('toolbar.addGroup') }}
-    </el-button>
-  </div>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/toolbar/SortPanel.vue b/web/apps/web-ele/src/components/zq-smart-table/toolbar/SortPanel.vue
deleted file mode 100644
index 4a0dd5a..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/toolbar/SortPanel.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import { watch } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { Plus, Delete } from '@element-plus/icons-vue'
-
-const emit = defineEmits<{ close: [] }>()
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-function addSort() {
-  const view = tableStore.activeView
-  const table = tableStore.activeTable
-  if (!view || !table || table.fields.length === 0) return
-  view.sorts.push({
-    fieldId: table.fields[0].id,
-    direction: 'asc',
-  })
-  tableStore.saveActiveViewConfig()
-}
-
-function removeSort(index: number) {
-  const view = tableStore.activeView
-  if (!view) return
-  view.sorts.splice(index, 1)
-  tableStore.saveActiveViewConfigAndReload()
-}
-
-watch(
-  () => tableStore.activeView?.sorts.map((s) => `${s.fieldId}|${s.direction}`).join(','),
-  () => { tableStore.saveActiveViewConfigAndReload() },
-)
-</script>
-
-<template>
-  <div v-if="tableStore.activeView && tableStore.activeTable">
-    <div class="text-sm font-medium mb-3" style="color: var(--zq-text-primary);">{{ t('toolbar.sort') }}</div>
-
-    <div v-for="(sort, index) in tableStore.activeView.sorts" :key="index" class="flex items-center gap-2 mb-2">
-      <el-select v-model="sort.fieldId" size="small" style="width: 140px;">
-        <el-option
-          v-for="field in tableStore.activeTable.fields"
-          :key="field.id"
-          :label="field.name"
-          :value="field.id"
-        />
-      </el-select>
-      <el-select v-model="sort.direction" size="small" style="width: 120px;">
-        <el-option :label="t('table.sortAsc')" value="asc" />
-        <el-option :label="t('table.sortDesc')" value="desc" />
-      </el-select>
-      <el-button size="small" text type="danger" @click="removeSort(index)">
-        <el-icon><Delete /></el-icon>
-      </el-button>
-    </div>
-
-    <el-button size="small" text type="primary" @click="addSort">
-      <el-icon class="mr-1"><Plus /></el-icon>
-      {{ t('toolbar.addSort') }}
-    </el-button>
-  </div>
-</template>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/toolbar/TableToolbar.vue b/web/apps/web-ele/src/components/zq-smart-table/toolbar/TableToolbar.vue
deleted file mode 100644
index c4dde40..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/toolbar/TableToolbar.vue
+++ /dev/null
@@ -1,483 +0,0 @@
-<script setup lang="ts">
-import type { RowHeight } from '#/types/zq-smart-table/table';
-
-import { computed, ref, watch } from 'vue';
-
-import { Trash2 } from '@vben/icons';
-import { useI18n } from '@vben/locales';
-
-import {
-  Check,
-  Delete,
-  Download,
-  Filter,
-  FolderOpened,
-  Grid,
-  Hide,
-  Plus,
-  Promotion,
-  Rank,
-  RefreshLeft,
-  RefreshRight,
-  Search,
-  Sort,
-  Upload,
-} from '@element-plus/icons-vue';
-import { ElMessage, ElMessageBox } from 'element-plus';
-
-import { exportTableApi, importTableApi } from '#/api/smart-table';
-import { useTableStore } from '#/store/zq-smart-table';
-
-import TrashDrawer from '../table/TrashDrawer.vue';
-import ConditionalFormatPanel from './ConditionalFormatPanel.vue';
-import FieldVisibilityPanel from './FieldVisibilityPanel.vue';
-import FilterPanel from './FilterPanel.vue';
-import GroupPanel from './GroupPanel.vue';
-import SortPanel from './SortPanel.vue';
-
-const { t } = useI18n();
-const tableStore = useTableStore();
-
-const showFilter = ref(false);
-const showSort = ref(false);
-const showGroup = ref(false);
-const showFieldVisibility = ref(false);
-const showConditionalFormat = ref(false);
-const showRowHeight = ref(false);
-const searchText = ref('');
-const showSearch = ref(false);
-
-const currentRowHeight = computed<RowHeight>({
-  get: () => tableStore.activeView?.rowHeight ?? 'medium',
-  set: (val: RowHeight) => {
-    if (tableStore.activeView) {
-      tableStore.activeView.rowHeight = val;
-      tableStore.saveActiveViewConfig();
-    }
-  },
-});
-
-watch(searchText, (val) => {
-  tableStore.searchText = val;
-  tableStore.reloadRecordsDebounced();
-});
-
-function handleAddRecord() {
-  tableStore.addRecord();
-}
-
-function handleResetData() {
-  ElMessageBox.confirm(t('toolbar.resetDataConfirm'), t('toolbar.resetData'), {
-    confirmButtonText: t('toolbar.confirmReset'),
-    cancelButtonText: t('common.cancel'),
-    type: 'warning',
-  })
-    .then(() => {
-      tableStore.clearStorage();
-    })
-    .catch(() => {});
-}
-
-const hiddenFieldCount = () => {
-  const table = tableStore.activeTable;
-  const view = tableStore.activeView;
-  if (!table || !view) return 0;
-  return table.fields.length - view.visibleFieldIds.length;
-};
-
-function toggleZebra() {
-  const view = tableStore.activeView;
-  if (view) {
-    view.zebra = !view.zebra;
-    tableStore.saveActiveViewConfig();
-  }
-}
-
-const exportLoading = ref(false);
-
-async function handleExport(format: 'csv' | 'xlsx' = 'csv') {
-  const table = tableStore.activeTable;
-  if (!table) return;
-  exportLoading.value = true;
-  try {
-    const res = await exportTableApi(table.id, format);
-    const blob = res instanceof Blob ? res : new Blob([res as any]);
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `${table.name}.${format}`;
-    a.click();
-    URL.revokeObjectURL(url);
-  } catch (error) {
-    console.error('[SmartTable] Export failed', error);
-    ElMessage.error(t('toolbar.exportFailed'));
-  } finally {
-    exportLoading.value = false;
-  }
-}
-
-const showTrash = ref(false);
-
-const importFileRef = ref<HTMLInputElement | null>(null);
-
-function triggerImport() {
-  importFileRef.value?.click();
-}
-
-async function handleFileImport(e: Event) {
-  const file = (e.target as HTMLInputElement).files?.[0];
-  if (!file) return;
-
-  const table = tableStore.activeTable;
-  if (!table) return;
-
-  try {
-    const raw = await importTableApi(table.id, file);
-    const data = (raw as any)?.data ?? raw;
-    ElMessage.success(data?.message || t('toolbar.importSuccess'));
-    await tableStore.reloadRecords();
-  } catch (error) {
-    console.error('[SmartTable] Import failed', error);
-    ElMessage.error(t('toolbar.importFailed'));
-  } finally {
-    if (importFileRef.value) importFileRef.value.value = '';
-  }
-}
-</script>
-
-<template>
-  <div
-    v-if="tableStore.activeTable && tableStore.activeView"
-    class="toolbar-bar flex items-center gap-2 px-4 py-2"
-  >
-    <!-- Filter -->
-    <el-popover
-      v-model:visible="showFilter"
-      placement="bottom-start"
-      :width="400"
-      trigger="click"
-    >
-      <template #reference>
-        <el-button
-          size="small"
-          text
-          :type="tableStore.activeView.filters.length > 0 ? 'primary' : ''"
-        >
-          <el-icon class="mr-1"><Filter /></el-icon>
-          {{ t('toolbar.filter') }}
-          <el-badge
-            v-if="tableStore.activeView.filters.length > 0"
-            :value="tableStore.activeView.filters.length"
-            class="ml-1"
-          />
-        </el-button>
-      </template>
-      <FilterPanel @close="showFilter = false" />
-    </el-popover>
-
-    <!-- Sort -->
-    <el-popover
-      v-model:visible="showSort"
-      placement="bottom-start"
-      :width="400"
-      trigger="click"
-    >
-      <template #reference>
-        <el-button
-          size="small"
-          text
-          :type="tableStore.activeView.sorts.length > 0 ? 'primary' : ''"
-        >
-          <el-icon class="mr-1"><Sort /></el-icon>
-          {{ t('toolbar.sort') }}
-          <el-badge
-            v-if="tableStore.activeView.sorts.length > 0"
-            :value="tableStore.activeView.sorts.length"
-            class="ml-1"
-          />
-        </el-button>
-      </template>
-      <SortPanel @close="showSort = false" />
-    </el-popover>
-
-    <!-- Group -->
-    <el-popover
-      v-model:visible="showGroup"
-      placement="bottom-start"
-      :width="360"
-      trigger="click"
-    >
-      <template #reference>
-        <el-button
-          size="small"
-          text
-          :type="tableStore.activeView.groups.length > 0 ? 'primary' : ''"
-        >
-          <el-icon class="mr-1"><FolderOpened /></el-icon>
-          {{ t('toolbar.group') }}
-          <el-badge
-            v-if="tableStore.activeView.groups.length > 0"
-            :value="tableStore.activeView.groups.length"
-            class="ml-1"
-          />
-        </el-button>
-      </template>
-      <GroupPanel @close="showGroup = false" />
-    </el-popover>
-
-    <!-- Hide Fields -->
-    <el-popover
-      v-model:visible="showFieldVisibility"
-      placement="bottom-start"
-      :width="280"
-      trigger="click"
-    >
-      <template #reference>
-        <el-button
-          size="small"
-          text
-          :type="hiddenFieldCount() > 0 ? 'primary' : ''"
-        >
-          <el-icon class="mr-1"><Hide /></el-icon>
-          {{ t('toolbar.hideFields') }}
-          <el-badge
-            v-if="hiddenFieldCount() > 0"
-            :value="hiddenFieldCount()"
-            class="ml-1"
-          />
-        </el-button>
-      </template>
-      <FieldVisibilityPanel @close="showFieldVisibility = false" />
-    </el-popover>
-
-    <!-- Row Height -->
-    <el-popover
-      v-model:visible="showRowHeight"
-      placement="bottom-start"
-      :width="140"
-      trigger="click"
-    >
-      <template #reference>
-        <el-button size="small" text>
-          <el-icon class="mr-1"><Rank /></el-icon>
-          {{ t('toolbar.rowHeight') }}
-        </el-button>
-      </template>
-      <div class="row-height-menu">
-        <div
-          v-for="item in [
-            { key: 'short', label: t('toolbar.rowHeightShort') },
-            { key: 'medium', label: t('toolbar.rowHeightMedium') },
-            { key: 'tall', label: t('toolbar.rowHeightTall') },
-            { key: 'extraTall', label: t('toolbar.rowHeightExtraTall') },
-          ] as const"
-          :key="item.key"
-          class="row-height-item"
-          :class="{ active: currentRowHeight === item.key }"
-          @click="
-            currentRowHeight = item.key as any;
-            showRowHeight = false;
-          "
-        >
-          <span>{{ item.label }}</span>
-          <el-icon
-            v-if="currentRowHeight === item.key"
-            class="row-height-check"
-          >
-            <Check />
-          </el-icon>
-        </div>
-      </div>
-    </el-popover>
-
-    <!-- Zebra stripes toggle -->
-    <el-button
-      size="small"
-      text
-      :type="tableStore.activeView?.zebra ? 'primary' : ''"
-      @click="toggleZebra"
-    >
-      <el-icon class="mr-1"><Grid /></el-icon>
-      {{ t('toolbar.zebra') }}
-    </el-button>
-
-    <!-- Conditional Format -->
-    <el-popover
-      v-model:visible="showConditionalFormat"
-      placement="bottom-start"
-      :width="420"
-      trigger="click"
-    >
-      <template #reference>
-        <el-button
-          size="small"
-          text
-          :type="
-            tableStore.activeView?.conditionalFormats?.length ? 'primary' : ''
-          "
-        >
-          <el-icon class="mr-1"><Promotion /></el-icon>
-          {{ t('toolbar.conditionalFormat') }}
-          <el-badge
-            v-if="tableStore.activeView?.conditionalFormats?.length"
-            :value="tableStore.activeView.conditionalFormats!.length"
-            class="ml-1"
-          />
-        </el-button>
-      </template>
-      <ConditionalFormatPanel @close="showConditionalFormat = false" />
-    </el-popover>
-
-    <div class="flex-1"></div>
-
-    <!-- Search -->
-    <div v-if="showSearch" class="flex items-center gap-1">
-      <el-input
-        v-model="searchText"
-        size="small"
-        :placeholder="t('toolbar.search')"
-        style="width: 200px"
-        clearable
-        :prefix-icon="Search"
-        @clear="
-          () => {
-            searchText = '';
-            showSearch = false;
-          }
-        "
-      />
-    </div>
-    <el-button v-else size="small" text @click="showSearch = true">
-      <el-icon><Search /></el-icon>
-    </el-button>
-
-    <!-- Undo / Redo -->
-    <el-button
-      size="small"
-      text
-      :disabled="!tableStore.canUndo"
-      @click="tableStore.undo()"
-    >
-      <el-icon><RefreshLeft /></el-icon>
-    </el-button>
-    <el-button
-      size="small"
-      text
-      :disabled="!tableStore.canRedo"
-      @click="tableStore.redo()"
-    >
-      <el-icon><RefreshRight /></el-icon>
-    </el-button>
-
-    <!-- Export -->
-    <el-dropdown
-      v-if="tableStore.canExport"
-      trigger="click"
-      @command="handleExport"
-    >
-      <el-button size="small" text :loading="exportLoading">
-        <el-icon class="mr-1"><Download /></el-icon>
-        {{ t('toolbar.export') }}
-      </el-button>
-      <template #dropdown>
-        <el-dropdown-menu>
-          <el-dropdown-item command="csv">CSV</el-dropdown-item>
-          <el-dropdown-item command="xlsx">Excel (.xlsx)</el-dropdown-item>
-        </el-dropdown-menu>
-      </template>
-    </el-dropdown>
-
-    <!-- Import -->
-    <el-tooltip
-      v-if="tableStore.canImport"
-      :content="t('toolbar.import')"
-      placement="bottom"
-    >
-      <el-button size="small" text @click="triggerImport">
-        <el-icon><Upload /></el-icon>
-      </el-button>
-    </el-tooltip>
-    <input
-      ref="importFileRef"
-      type="file"
-      accept=".csv,.xlsx,.xls"
-      style="display: none"
-      @change="handleFileImport"
-    />
-
-    <!-- Trash -->
-    <el-tooltip :content="t('trash.title')" placement="bottom">
-      <el-button size="small" text @click="showTrash = true">
-        <Trash2 class="h-4 w-4" />
-      </el-button>
-    </el-tooltip>
-
-    <!-- Reset Data -->
-    <el-tooltip
-      v-if="tableStore.canManageTable"
-      :content="t('toolbar.resetSampleData')"
-      placement="bottom"
-    >
-      <el-button size="small" text @click="handleResetData">
-        <el-icon><Delete /></el-icon>
-      </el-button>
-    </el-tooltip>
-
-    <!-- Add Record -->
-    <el-button
-      v-if="tableStore.canAddRecord"
-      size="small"
-      type="primary"
-      @click="handleAddRecord"
-    >
-      <el-icon class="mr-1"><Plus /></el-icon>
-      {{ t('table.addRecord') }}
-    </el-button>
-
-    <TrashDrawer v-model:visible="showTrash" />
-  </div>
-</template>
-
-<style scoped>
-.toolbar-bar {
-  background: var(--el-bg-color);
-  border-bottom: 1px solid var(--el-border-color-lighter);
-}
-
-.toolbar-bar :deep(.el-button.is-text:not(.el-button--primary)) {
-  color: var(--el-text-color-secondary);
-}
-</style>
-
-<style>
-.row-height-menu {
-  margin: -12px;
-  padding: 4px;
-}
-
-.row-height-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.row-height-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.row-height-item.active {
-  color: var(--el-color-primary);
-  font-weight: 500;
-}
-
-.row-height-check {
-  font-size: 14px;
-  color: var(--el-color-primary);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-smart-table/toolbar/ViewTabs.vue b/web/apps/web-ele/src/components/zq-smart-table/toolbar/ViewTabs.vue
deleted file mode 100644
index 5b8a51b..0000000
--- a/web/apps/web-ele/src/components/zq-smart-table/toolbar/ViewTabs.vue
+++ /dev/null
@@ -1,490 +0,0 @@
-<script setup lang="ts">
-import { ref, nextTick, onMounted, onUnmounted } from 'vue'
-import { useTableStore } from '#/store/zq-smart-table'
-import { useI18n } from '@vben/locales'
-import { ViewType } from '#/types/zq-smart-table/table'
-import { ElMessageBox } from 'element-plus'
-import {
-  Plus,
-  Grid,
-  LayoutGrid,
-  Image,
-  ClipboardPen,
-  Calendar,
-  BarChart2,
-  Pencil,
-  Copy,
-  Trash2,
-} from '@vben/icons'
-import type { Component } from 'vue'
-
-const { t } = useI18n()
-const tableStore = useTableStore()
-
-function uid(): string {
-  return Date.now().toString(36) + Math.random().toString(36).slice(2, 8)
-}
-
-const viewIconMap: Record<ViewType, Component> = {
-  [ViewType.Grid]: Grid,
-  [ViewType.Kanban]: LayoutGrid,
-  [ViewType.Gallery]: Image,
-  [ViewType.Form]: ClipboardPen,
-  [ViewType.Calendar]: Calendar,
-  [ViewType.Gantt]: BarChart2,
-}
-
-const viewCtxVisible = ref(false)
-const viewCtxPos = ref({ x: 0, y: 0 })
-const viewCtxId = ref<string | null>(null)
-
-const renamingViewId = ref<string | null>(null)
-const renamingViewValue = ref('')
-const renameInputRef = ref<HTMLInputElement | null>(null)
-
-const showAddMenu = ref(false)
-const addMenuPos = ref({ x: 0, y: 0 })
-const addBtnRef = ref<HTMLElement | null>(null)
-
-function handleViewContextMenu(e: MouseEvent, viewId: string) {
-  e.preventDefault()
-  e.stopPropagation()
-  viewCtxId.value = viewId
-  viewCtxPos.value = { x: e.clientX, y: e.clientY }
-  viewCtxVisible.value = true
-}
-
-function handleViewCtxCmd(cmd: string) {
-  const vid = viewCtxId.value
-  viewCtxVisible.value = false
-  if (!vid) return
-  const table = tableStore.activeTable
-  if (!table) return
-  const view = table.views.find((v) => v.id === vid)
-  if (!view) return
-
-  switch (cmd) {
-    case 'rename':
-      renamingViewId.value = vid
-      renamingViewValue.value = view.name
-      nextTick(() => renameInputRef.value?.focus())
-      break
-    case 'duplicate':
-      tableStore.duplicateView(vid)
-      break
-    case 'delete':
-      if (table.views.length <= 1) return
-      ElMessageBox.confirm(
-        t('view.deleteViewConfirm', { name: view.name }),
-        {
-          type: 'warning',
-          confirmButtonText: t('common.confirm'),
-          cancelButtonText: t('common.cancel'),
-        },
-      )
-        .then(() => tableStore.deleteView(vid))
-        .catch(() => {})
-      break
-  }
-}
-
-function confirmViewRename() {
-  if (renamingViewId.value && renamingViewValue.value.trim()) {
-    tableStore.renameView(renamingViewId.value, renamingViewValue.value.trim())
-  }
-  renamingViewId.value = null
-  renamingViewValue.value = ''
-}
-
-function handleClickOutsideViewCtx(e: MouseEvent) {
-  const target = e.target as HTMLElement
-  if (viewCtxVisible.value && !target.closest('.zq-view-context-menu')) {
-    viewCtxVisible.value = false
-  }
-  if (showAddMenu.value && !target.closest('.add-view-menu') && !target.closest('.add-view-trigger')) {
-    showAddMenu.value = false
-  }
-}
-
-onMounted(() =>
-  document.addEventListener('mousedown', handleClickOutsideViewCtx, true),
-)
-onUnmounted(() =>
-  document.removeEventListener('mousedown', handleClickOutsideViewCtx, true),
-)
-
-const addViewOptions: Array<{ type: ViewType; icon: Component; labelKey: string }> = [
-  { type: ViewType.Grid, icon: Grid, labelKey: 'view.grid' },
-  { type: ViewType.Kanban, icon: LayoutGrid, labelKey: 'view.kanban' },
-  { type: ViewType.Gallery, icon: Image, labelKey: 'view.gallery' },
-  { type: ViewType.Form, icon: ClipboardPen, labelKey: 'view.form' },
-  { type: ViewType.Calendar, icon: Calendar, labelKey: 'view.calendar' },
-  { type: ViewType.Gantt, icon: BarChart2, labelKey: 'view.gantt' },
-]
-
-function toggleAddMenu() {
-  if (showAddMenu.value) {
-    showAddMenu.value = false
-    return
-  }
-  if (addBtnRef.value) {
-    const rect = addBtnRef.value.getBoundingClientRect()
-    addMenuPos.value = { x: rect.left, y: rect.bottom + 4 }
-  }
-  showAddMenu.value = true
-}
-
-function addView(type: ViewType) {
-  showAddMenu.value = false
-  const table = tableStore.activeTable
-  if (!table) return
-  const nameMap: Record<ViewType, string> = {
-    [ViewType.Grid]: t('view.grid'),
-    [ViewType.Kanban]: t('view.kanban'),
-    [ViewType.Gallery]: t('view.gallery'),
-    [ViewType.Form]: t('view.form'),
-    [ViewType.Calendar]: t('view.calendar'),
-    [ViewType.Gantt]: t('view.gantt'),
-  }
-  const view: any = {
-    id: uid(),
-    name: nameMap[type],
-    type,
-    filters: [],
-    sorts: [],
-    groups: [],
-    visibleFieldIds: table.fields.map((f) => f.id),
-  }
-  if (type === ViewType.Kanban) {
-    const selectField = table.fields.find((f) => f.type === 'singleSelect')
-    view.kanbanFieldId = selectField?.id
-  }
-  if (type === ViewType.Gantt) {
-    const dateFields = table.fields.filter((f) => f.type === 'date')
-    view.ganttStartFieldId = dateFields[0]?.id
-    view.ganttEndFieldId = dateFields[1]?.id ?? dateFields[0]?.id
-  }
-  tableStore.addView(view)
-}
-</script>
-
-<template>
-  <div v-if="tableStore.activeTable" class="chrome-tabs-bar">
-    <div class="chrome-tabs-scroll">
-      <div
-        v-for="(view, idx) in tableStore.activeTable.views"
-        :key="view.id"
-        class="chrome-tab"
-        :class="{ active: tableStore.activeTable.activeViewId === view.id }"
-        @click="tableStore.setActiveView(view.id)"
-        @contextmenu="handleViewContextMenu($event, view.id)"
-      >
-        <component :is="viewIconMap[view.type]" class="tab-icon" />
-        <template v-if="renamingViewId === view.id">
-          <input
-            ref="renameInputRef"
-            v-model="renamingViewValue"
-            class="rename-input"
-            @blur="confirmViewRename"
-            @keyup.enter="confirmViewRename"
-            @keyup.escape="renamingViewId = null"
-            @click.stop
-          />
-        </template>
-        <span v-else class="tab-label">{{ view.name }}</span>
-      </div>
-
-      <!-- 添加按钮 -->
-      <div
-        ref="addBtnRef"
-        class="chrome-tab-add"
-        @click="toggleAddMenu"
-      >
-        <Plus class="add-icon" />
-      </div>
-    </div>
-
-    <!-- 添加视图菜单 -->
-    <Teleport to="body">
-      <div
-        v-if="showAddMenu"
-        class="add-view-menu"
-        :style="{
-          position: 'fixed',
-          left: addMenuPos.x + 'px',
-          top: addMenuPos.y + 'px',
-        }"
-      >
-        <div
-          v-for="opt in addViewOptions"
-          :key="opt.type"
-          class="add-menu-item"
-          @click="addView(opt.type)"
-        >
-          <component :is="opt.icon" class="menu-item-icon" />
-          <span>{{ t(opt.labelKey) }}</span>
-        </div>
-      </div>
-    </Teleport>
-  </div>
-
-  <!-- 视图右键菜单 -->
-  <Teleport to="body">
-    <div
-      v-if="viewCtxVisible && viewCtxId"
-      class="zq-view-context-menu"
-      :style="{ left: viewCtxPos.x + 'px', top: viewCtxPos.y + 'px' }"
-    >
-      <div class="ctx-item" @click="handleViewCtxCmd('rename')">
-        <Pencil class="ctx-icon" />
-        <span>{{ t('view.renameView') }}</span>
-      </div>
-      <div class="ctx-item" @click="handleViewCtxCmd('duplicate')">
-        <Copy class="ctx-icon" />
-        <span>{{ t('view.duplicateView') }}</span>
-      </div>
-      <div class="ctx-divider" />
-      <div
-        class="ctx-item ctx-danger"
-        :class="{
-          disabled:
-            tableStore.activeTable &&
-            tableStore.activeTable.views.length <= 1,
-        }"
-        @click="handleViewCtxCmd('delete')"
-      >
-        <Trash2 class="ctx-icon" />
-        <span>{{ t('view.deleteView') }}</span>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-/* ===== Chrome 风格 Tab Bar ===== */
-.chrome-tabs-bar {
-  display: flex;
-  align-items: flex-end;
-  padding: 6px 8px 0;
-  background: var(--el-fill-color-lighter);
-  flex-shrink: 0;
-  position: relative;
-}
-
-.chrome-tabs-scroll {
-  display: flex;
-  align-items: flex-end;
-  overflow-x: auto;
-  gap: 0;
-}
-
-.chrome-tabs-scroll::-webkit-scrollbar {
-  height: 0;
-  display: none;
-}
-
-/* ===== Chrome Tab ===== */
-.chrome-tab {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 12px 18px;
-  font-size: 13px;
-  color: var(--el-text-color-secondary);
-  cursor: pointer;
-  white-space: nowrap;
-  user-select: none;
-  border-radius: 10px 10px 0 0;
-  transition: background 0.2s, color 0.2s;
-  min-width: 0;
-  z-index: 0;
-}
-
-.chrome-tab:hover:not(.active) {
-  background: var(--el-fill-color);
-  color: var(--el-text-color-primary);
-  border-radius: 10px 10px 0 0;
-}
-
-/* 活动标签 */
-.chrome-tab.active {
-  background: var(--el-bg-color);
-  color: var(--el-color-primary);
-  font-weight: 500;
-  z-index: 2;
-}
-
-/* 左侧反向圆角 */
-.chrome-tab.active::before {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: -8px;
-  width: 8px;
-  height: 8px;
-  background: transparent;
-  border-bottom-right-radius: 8px;
-  box-shadow: 2px 0 0 0 var(--el-bg-color);
-  pointer-events: none;
-}
-
-/* 右侧反向圆角 */
-.chrome-tab.active::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  right: -8px;
-  width: 8px;
-  height: 8px;
-  background: transparent;
-  border-bottom-left-radius: 8px;
-  box-shadow: -2px 0 0 0 var(--el-bg-color);
-  pointer-events: none;
-}
-
-.tab-icon {
-  width: 15px;
-  height: 15px;
-  flex-shrink: 0;
-}
-
-.tab-label {
-  line-height: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.rename-input {
-  font-size: 13px;
-  font-weight: 500;
-  outline: none;
-  border: none;
-  border-bottom: 1px solid var(--el-color-primary);
-  background: transparent;
-  color: var(--el-text-color-primary);
-  width: 80px;
-  padding: 0;
-  line-height: 1.2;
-}
-
-/* ===== 添加按钮 ===== */
-.chrome-tab-add {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  margin-left: 4px;
-  margin-bottom: 6px;
-  border-radius: 50%;
-  cursor: pointer;
-  color: var(--el-text-color-secondary);
-  transition: all 0.15s;
-  flex-shrink: 0;
-}
-
-.chrome-tab-add:hover {
-  background: var(--el-fill-color);
-  color: var(--el-text-color-primary);
-}
-
-.add-icon {
-  width: 16px;
-  height: 16px;
-}
-
-/* ===== 添加视图菜单 ===== */
-.add-view-menu {
-  z-index: 9999;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
-  padding: 4px;
-  min-width: 150px;
-}
-
-.add-menu-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.add-menu-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.menu-item-icon {
-  width: 15px;
-  height: 15px;
-  color: var(--el-text-color-secondary);
-}
-
-/* ===== 右键菜单 ===== */
-.zq-view-context-menu {
-  position: fixed;
-  z-index: 9999;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
-  padding: 4px;
-  min-width: 150px;
-}
-
-.ctx-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.ctx-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.ctx-icon {
-  width: 14px;
-  height: 14px;
-  color: var(--el-text-color-secondary);
-}
-
-.ctx-danger {
-  color: var(--el-color-danger);
-}
-
-.ctx-danger .ctx-icon {
-  color: var(--el-color-danger);
-}
-
-.ctx-danger:hover {
-  background: var(--el-color-danger-light-9);
-}
-
-.ctx-item.disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.ctx-item.disabled:hover {
-  background: transparent;
-}
-
-.ctx-divider {
-  height: 1px;
-  margin: 4px 8px;
-  background: var(--el-border-color-lighter);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/ZqWhiteboard.vue b/web/apps/web-ele/src/components/zq-whiteboard/ZqWhiteboard.vue
deleted file mode 100644
index a635313..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/ZqWhiteboard.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<script setup lang="ts">
-import type { WhiteboardData, WhiteboardProps } from './types';
-
-import { nextTick, onBeforeUnmount, watch } from 'vue';
-
-import { useWhiteboardStore } from './store/whiteboard-store';
-
-import ConnectorToolbar from './components/ConnectorToolbar.vue';
-import ContextMenu from './components/ContextMenu.vue';
-import DirectionHandles from './components/DirectionHandles.vue';
-import Minimap from './components/Minimap.vue';
-import SelectionToolbar from './components/SelectionToolbar.vue';
-import WhiteboardCanvas from './components/WhiteboardCanvas.vue';
-import WhiteboardHeader from './components/WhiteboardHeader.vue';
-import UndoRedoControls from './components/UndoRedoControls.vue';
-import WhiteboardToolbar from './components/WhiteboardToolbar.vue';
-import ZoomControls from './components/ZoomControls.vue';
-
-const props = withDefaults(defineProps<WhiteboardProps>(), {
-  modelValue: undefined,
-  readonly: false,
-  width: '100%',
-  height: '100%',
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [data: WhiteboardData];
-  change: [data: WhiteboardData];
-  save: [data: WhiteboardData];
-}>();
-
-const store = useWhiteboardStore();
-let initialDataLoaded = false;
-
-watch(
-  [() => store.isCanvasReady, () => props.modelValue],
-  async ([ready, data]) => {
-    if (ready && !initialDataLoaded && data) {
-      initialDataLoaded = true;
-      await nextTick();
-      await store.loadFromJSON(data);
-    }
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.readonly,
-  (val) => {
-    store.isReadonly = val;
-    const canvas = store.getCanvas();
-    if (canvas) {
-      canvas.selection = !val;
-      canvas.forEachObject((obj) => {
-        obj.selectable = !val;
-        obj.evented = !val;
-      });
-      canvas.requestRenderAll();
-    }
-  },
-  { immediate: true },
-);
-
-function handleSave() {
-  const data = store.toJSON();
-  emit('update:modelValue', data);
-  emit('change', data);
-  emit('save', data);
-}
-
-function handleExport(format: string) {
-  switch (format) {
-    case 'png':
-      store.exportPNG();
-      break;
-    case 'svg':
-      store.exportSVG();
-      break;
-    case 'json':
-      store.exportJSON();
-      break;
-  }
-}
-
-function getJSON(): WhiteboardData {
-  return store.toJSON();
-}
-
-function getThumbnail(): string {
-  return store.getThumbnail();
-}
-
-onBeforeUnmount(() => {
-  store.destroy();
-});
-
-defineExpose({
-  getJSON,
-  getThumbnail,
-  save: handleSave,
-});
-</script>
-
-<template>
-  <div
-    class="zq-whiteboard"
-    :style="{
-      width: typeof width === 'number' ? `${width}px` : width,
-      height: typeof height === 'number' ? `${height}px` : height,
-    }"
-  >
-    <WhiteboardCanvas />
-
-    <template v-if="!readonly">
-      <WhiteboardHeader @save="handleSave" @export="handleExport" />
-      <WhiteboardToolbar />
-      <SelectionToolbar />
-      <ConnectorToolbar />
-      <DirectionHandles />
-      <ContextMenu />
-    </template>
-
-    <Minimap />
-
-    <div class="zq-whiteboard__bottom-left">
-      <UndoRedoControls v-if="!readonly" />
-      <ZoomControls />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.zq-whiteboard {
-  position: relative;
-  overflow: hidden;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-}
-
-.zq-whiteboard__bottom-left {
-  position: absolute;
-  bottom: 12px;
-  left: 12px;
-  z-index: 10;
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/ConnectorToolbar.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/ConnectorToolbar.vue
deleted file mode 100644
index 163ef2c..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/ConnectorToolbar.vue
+++ /dev/null
@@ -1,782 +0,0 @@
-<script setup lang="ts">
-import { computed, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
-
-import * as fabric from 'fabric';
-
-import {
-  ArrowLeft,
-  ArrowRight,
-  Check,
-  ChevronDown,
-  Minus,
-  MoreHorizontal,
-  RefreshCw,
-  Spline,
-} from '@vben/icons';
-import { $t } from '@vben/locales';
-import { ElColorPicker, ElPopover, ElSlider } from 'element-plus';
-
-import { STROKE_WIDTH_PRESETS, TOOLBAR_FILL_COLORS } from '../constants';
-import { useWhiteboardStore } from '../store/whiteboard-store';
-import type { ConnectorRouteType, EndpointStyle } from '../types';
-
-const store = useWhiteboardStore();
-
-const visible = ref(false);
-const posX = ref(0);
-const posY = ref(0);
-const popPlacement = ref<'bottom' | 'top'>('top');
-
-const connectorPath = shallowRef<fabric.FabricObject | null>(null);
-const localStartStyle = ref<EndpointStyle>('none');
-const localEndStyle = ref<EndpointStyle>('arrow');
-const localRouteType = ref<ConnectorRouteType>('orthogonal');
-const localStroke = ref('#1e1e1e');
-const localStrokeWidth = ref(2);
-const localStrokeDashKey = ref('solid');
-const localOpacity = ref(100);
-
-const isDynamic = computed(() => {
-  if (!connectorPath.value) return false;
-  return !!store.findConnectorLink(connectorPath.value);
-});
-
-const START_STYLES: { key: EndpointStyle; label: string }[] = [
-  { key: 'none', label: 'whiteboard.connector.endNone' },
-  { key: 'arrow', label: 'whiteboard.connector.endArrow' },
-];
-
-const END_STYLES: { key: EndpointStyle; label: string }[] = [
-  { key: 'none', label: 'whiteboard.connector.endNone' },
-  { key: 'arrow', label: 'whiteboard.connector.endArrow' },
-];
-
-const ROUTE_TYPES: { key: ConnectorRouteType; label: string }[] = [
-  { key: 'orthogonal', label: 'whiteboard.connector.orthogonal' },
-  { key: 'straight', label: 'whiteboard.connector.straight' },
-];
-
-const DASH_OPTIONS: { key: string; dash: number[] | undefined }[] = [
-  { key: 'solid', dash: undefined },
-  { key: 'dashed', dash: [8, 4] },
-  { key: 'dotted', dash: [2, 2] },
-];
-
-let attachedCanvas: fabric.Canvas | null = null;
-
-function matchDashKey(arr: any): string {
-  if (!arr || !Array.isArray(arr) || arr.length === 0) return 'solid';
-  if (arr[0] >= 6) return 'dashed';
-  if (arr[0] <= 3) return 'dotted';
-  return 'dashed';
-}
-
-function updatePosition() {
-  const canvas = store.getCanvas();
-  if (!canvas) { visible.value = false; return; }
-  const active = canvas.getActiveObject();
-  if (!active) { visible.value = false; return; }
-
-  const bound = active.getBoundingRect();
-  const el = canvas.lowerCanvasEl ?? canvas.upperCanvasEl;
-  const canvasH = el?.clientHeight ?? 800;
-  const canvasW = el?.clientWidth ?? 1200;
-  const TOOLBAR_H = 44;
-  const GAP = 28;
-
-  posX.value = bound.left + bound.width / 2;
-  if (posX.value < 200) posX.value = 200;
-  if (posX.value > canvasW - 20) posX.value = canvasW - 20;
-
-  const objCenterY = bound.top + bound.height / 2;
-  const isUpper = objCenterY < canvasH / 2;
-
-  if (isUpper) {
-    posY.value = bound.top + bound.height + GAP;
-    popPlacement.value = 'bottom';
-    if (posY.value > canvasH - TOOLBAR_H - 10) posY.value = canvasH - TOOLBAR_H - 10;
-  } else {
-    posY.value = bound.top - GAP - TOOLBAR_H;
-    popPlacement.value = 'top';
-    if (posY.value < 10) posY.value = 10;
-  }
-}
-
-function syncFromSelection() {
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  const active = canvas.getActiveObject();
-  if (!active || !(active as any).isDynamicConnector) {
-    visible.value = false;
-    connectorPath.value = null;
-    return;
-  }
-
-  connectorPath.value = active;
-  const link = store.findConnectorLink(active);
-  if (link) {
-    localStartStyle.value = link.startStyle;
-    localEndStyle.value = link.endStyle;
-    localRouteType.value = link.routeType;
-  }
-  localStroke.value = (active.stroke as string) ?? '#1e1e1e';
-  localStrokeWidth.value = active.strokeWidth ?? 2;
-  localStrokeDashKey.value = matchDashKey(active.strokeDashArray);
-  localOpacity.value = Math.round((active.opacity ?? 1) * 100);
-  visible.value = true;
-}
-
-function onSelectionChange() {
-  if (store.isReadonly) { visible.value = false; return; }
-  syncFromSelection();
-  if (visible.value) updatePosition();
-}
-
-function onSelectionClear() {
-  visible.value = false;
-  connectorPath.value = null;
-}
-
-function onObjectTransform() {
-  if (visible.value) updatePosition();
-}
-
-function attachEvents() {
-  const canvas = store.getCanvas();
-  if (!canvas || canvas === attachedCanvas) return;
-  attachedCanvas = canvas;
-  canvas.on('selection:created', onSelectionChange);
-  canvas.on('selection:updated', onSelectionChange);
-  canvas.on('selection:cleared', onSelectionClear);
-  canvas.on('object:moving', onObjectTransform);
-  canvas.on('object:scaling', onObjectTransform);
-  canvas.on('object:rotating', onObjectTransform);
-}
-
-function detachEvents() {
-  if (!attachedCanvas) return;
-  attachedCanvas.off('selection:created', onSelectionChange);
-  attachedCanvas.off('selection:updated', onSelectionChange);
-  attachedCanvas.off('selection:cleared', onSelectionClear);
-  attachedCanvas.off('object:moving', onObjectTransform);
-  attachedCanvas.off('object:scaling', onObjectTransform);
-  attachedCanvas.off('object:rotating', onObjectTransform);
-  attachedCanvas = null;
-}
-
-watch(() => store.isCanvasReady, (ready) => {
-  if (ready) attachEvents();
-}, { immediate: true });
-
-watch(() => store.viewport, () => {
-  if (visible.value) updatePosition();
-}, { deep: true });
-
-onBeforeUnmount(() => { detachEvents(); });
-
-function updatePath(newPath: fabric.Path | null) {
-  if (newPath) {
-    connectorPath.value = newPath;
-    updatePosition();
-  }
-}
-
-function handleStartStyle(style: EndpointStyle) {
-  if (!connectorPath.value) return;
-  localStartStyle.value = style;
-  const p = store.updateConnectorProp(connectorPath.value, { startStyle: style });
-  updatePath(p);
-}
-
-function handleEndStyle(style: EndpointStyle) {
-  if (!connectorPath.value) return;
-  localEndStyle.value = style;
-  const p = store.updateConnectorProp(connectorPath.value, { endStyle: style });
-  updatePath(p);
-}
-
-function handleSwapDirection() {
-  if (!connectorPath.value) return;
-  const p = store.swapConnectorDirection(connectorPath.value);
-  updatePath(p);
-  if (p) {
-    const link = store.findConnectorLink(p);
-    if (link) {
-      localStartStyle.value = link.startStyle;
-      localEndStyle.value = link.endStyle;
-    }
-  }
-}
-
-function applyDirectStyle(props: Record<string, any>) {
-  if (!connectorPath.value) return;
-  connectorPath.value.set(props);
-  connectorPath.value.setCoords();
-  store.getCanvas()?.requestRenderAll();
-}
-
-function handleStrokeColor(color: string) {
-  if (!connectorPath.value) return;
-  localStroke.value = color;
-  const p = store.updateConnectorProp(connectorPath.value, { stroke: color });
-  if (p) updatePath(p);
-  else applyDirectStyle({ stroke: color });
-}
-
-function handleStrokeCustomColor(color: string | null) {
-  if (color) handleStrokeColor(color);
-}
-
-function handleOpacity(val: number | number[]) {
-  const v = Array.isArray(val) ? val[0]! : val;
-  localOpacity.value = v;
-  if (!connectorPath.value) return;
-  const p = store.updateConnectorProp(connectorPath.value, { opacity: v / 100 });
-  if (p) updatePath(p);
-  else applyDirectStyle({ opacity: v / 100 });
-}
-
-function handleRouteType(rt: ConnectorRouteType) {
-  if (!connectorPath.value) return;
-  localRouteType.value = rt;
-  const p = store.updateConnectorProp(connectorPath.value, { routeType: rt });
-  updatePath(p);
-}
-
-function handleDashStyle(key: string, dash: number[] | undefined) {
-  if (!connectorPath.value) return;
-  localStrokeDashKey.value = key;
-  const p = store.updateConnectorProp(connectorPath.value, { strokeDashArray: dash });
-  if (p) updatePath(p);
-  else applyDirectStyle({ strokeDashArray: dash });
-}
-
-function handleThickness(w: number) {
-  if (!connectorPath.value) return;
-  localStrokeWidth.value = w;
-  const p = store.updateConnectorProp(connectorPath.value, { strokeWidth: w });
-  if (p) updatePath(p);
-  else applyDirectStyle({ strokeWidth: w });
-}
-
-function isColorActive(color: string, current: string): boolean {
-  if (color === 'transparent') return current === 'transparent' || !current;
-  return current?.toLowerCase() === color.toLowerCase();
-}
-</script>
-
-<template>
-  <div
-    v-if="visible"
-    class="conn-tb"
-    :style="{ left: `${posX}px`, top: `${posY}px` }"
-    @mousedown.prevent.stop
-    @pointerdown.prevent.stop
-  >
-    <!-- Start endpoint style (dynamic only) -->
-    <template v-if="isDynamic">
-      <ElPopover trigger="click" :width="160" :placement="popPlacement" :offset="8" :teleported="true" popper-class="conn-tb-popper">
-        <template #reference>
-          <button class="conn-tb__btn" :title="$t('whiteboard.connector.startStyle')">
-            <Minus v-if="localStartStyle === 'none'" class="conn-tb__icon" />
-            <ArrowLeft v-else class="conn-tb__icon" />
-            <ChevronDown class="conn-tb__arrow" />
-          </button>
-        </template>
-        <div class="conn-tb__panel conn-tb__endpoint-list">
-          <button
-            v-for="s in START_STYLES"
-            :key="s.key"
-            class="conn-tb__endpoint-item"
-            :class="{ 'conn-tb__endpoint-item--active': localStartStyle === s.key }"
-            @click="handleStartStyle(s.key)"
-          >
-            <span class="conn-tb__endpoint-icon">
-              <Minus v-if="s.key === 'none'" class="conn-tb__ep-svg" />
-              <ArrowLeft v-else class="conn-tb__ep-svg" />
-            </span>
-            <Check v-if="localStartStyle === s.key" class="conn-tb__check" />
-          </button>
-        </div>
-      </ElPopover>
-
-      <!-- Swap direction -->
-      <button class="conn-tb__btn" :title="$t('whiteboard.connector.swapDirection')" @click="handleSwapDirection">
-        <RefreshCw class="conn-tb__icon" />
-      </button>
-
-      <!-- End endpoint style -->
-      <ElPopover trigger="click" :width="160" :placement="popPlacement" :offset="8" :teleported="true" popper-class="conn-tb-popper">
-        <template #reference>
-          <button class="conn-tb__btn" :title="$t('whiteboard.connector.endStyle')">
-            <ArrowRight v-if="localEndStyle === 'arrow'" class="conn-tb__icon" />
-            <Minus v-else class="conn-tb__icon" />
-            <ChevronDown class="conn-tb__arrow" />
-          </button>
-        </template>
-        <div class="conn-tb__panel conn-tb__endpoint-list">
-          <button
-            v-for="s in END_STYLES"
-            :key="s.key"
-            class="conn-tb__endpoint-item"
-            :class="{ 'conn-tb__endpoint-item--active': localEndStyle === s.key }"
-            @click="handleEndStyle(s.key)"
-          >
-            <span class="conn-tb__endpoint-icon">
-              <Minus v-if="s.key === 'none'" class="conn-tb__ep-svg" />
-              <ArrowRight v-else class="conn-tb__ep-svg" />
-            </span>
-            <Check v-if="localEndStyle === s.key" class="conn-tb__check" />
-          </button>
-        </div>
-      </ElPopover>
-
-      <div class="conn-tb__sep" />
-    </template>
-
-    <!-- Stroke color -->
-    <ElPopover trigger="click" :width="300" :placement="popPlacement" :offset="8" :teleported="true" popper-class="conn-tb-popper">
-      <template #reference>
-        <button class="conn-tb__btn" :title="$t('whiteboard.property.stroke')">
-          <span class="conn-tb__color-swatch" :style="{ background: localStroke }" />
-          <ChevronDown class="conn-tb__arrow" />
-        </button>
-      </template>
-      <div class="conn-tb__panel">
-        <div class="conn-tb__color-grid">
-          <button
-            v-for="c in TOOLBAR_FILL_COLORS.filter(cc => cc !== 'transparent')"
-            :key="c"
-            class="conn-tb__color-btn"
-            :class="{ 'conn-tb__color-btn--active': isColorActive(c, localStroke) }"
-            @click="handleStrokeColor(c)"
-          >
-            <span class="conn-tb__color-dot" :style="{ background: c }" />
-          </button>
-        </div>
-        <div class="conn-tb__custom-color">
-          <ElColorPicker :model-value="localStroke" size="small" @change="handleStrokeCustomColor" />
-        </div>
-        <div class="conn-tb__slider-row">
-          <span class="conn-tb__slider-label">{{ $t('whiteboard.property.opacity') }}</span>
-          <span class="conn-tb__slider-val">{{ localOpacity }}%</span>
-        </div>
-        <ElSlider
-          :model-value="localOpacity"
-          :min="0"
-          :max="100"
-          :step="1"
-          class="conn-tb__slider"
-          @update:model-value="handleOpacity"
-        />
-      </div>
-    </ElPopover>
-
-    <!-- Line style -->
-    <ElPopover trigger="click" :width="260" :placement="popPlacement" :offset="8" :teleported="true" popper-class="conn-tb-popper">
-      <template #reference>
-        <button class="conn-tb__btn" :title="$t('whiteboard.connector.lineStyle')">
-          <Spline class="conn-tb__icon" />
-          <ChevronDown class="conn-tb__arrow" />
-        </button>
-      </template>
-      <div class="conn-tb__panel">
-        <div class="conn-tb__panel-title">{{ $t('whiteboard.connector.lineStyle') }}</div>
-
-        <!-- Route type (dynamic only) -->
-        <div v-if="isDynamic" class="conn-tb__route-row">
-          <button
-            v-for="rt in ROUTE_TYPES"
-            :key="rt.key"
-            class="conn-tb__route-btn"
-            :class="{ 'conn-tb__route-btn--active': localRouteType === rt.key }"
-            :title="$t(rt.label)"
-            @click="handleRouteType(rt.key)"
-          >
-            <svg v-if="rt.key === 'orthogonal'" viewBox="0 0 32 24" class="conn-tb__route-svg">
-              <path d="M 4 4 L 16 4 L 16 20 L 28 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-            </svg>
-            <svg v-else viewBox="0 0 32 24" class="conn-tb__route-svg">
-              <line x1="4" y1="4" x2="28" y2="20" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-            </svg>
-          </button>
-        </div>
-
-        <!-- Dash style -->
-        <div class="conn-tb__dash-row">
-          <button
-            v-for="opt in DASH_OPTIONS"
-            :key="opt.key"
-            class="conn-tb__dash-btn"
-            :class="{ 'conn-tb__dash-btn--active': localStrokeDashKey === opt.key }"
-            @click="handleDashStyle(opt.key, opt.dash)"
-          >
-            <span class="conn-tb__dash-line" :class="`conn-tb__dash-line--${opt.key}`" />
-          </button>
-        </div>
-
-        <!-- Thickness -->
-        <div class="conn-tb__width-row">
-          <button
-            v-for="w in STROKE_WIDTH_PRESETS"
-            :key="w"
-            class="conn-tb__width-btn"
-            :class="{ 'conn-tb__width-btn--active': localStrokeWidth === w }"
-            @click="handleThickness(w)"
-          >
-            <span class="conn-tb__width-dot" :style="{ width: `${w + 4}px`, height: `${w + 4}px` }" />
-          </button>
-        </div>
-      </div>
-    </ElPopover>
-
-    <div class="conn-tb__sep" />
-
-    <!-- More -->
-    <ElPopover trigger="click" :width="160" :placement="popPlacement" :offset="8" :teleported="true" popper-class="conn-tb-popper">
-      <template #reference>
-        <button class="conn-tb__btn">
-          <MoreHorizontal class="conn-tb__icon" />
-        </button>
-      </template>
-      <div class="conn-tb__panel conn-tb__more-list">
-        <button class="conn-tb__more-item" @click="store.copyAsImage()">
-          {{ $t('whiteboard.menu.copyAsImage') }}
-        </button>
-        <div class="conn-tb__more-divider" />
-        <button class="conn-tb__more-item conn-tb__more-item--danger" @click="store.deleteSelected()">
-          {{ $t('whiteboard.menu.delete') }}
-        </button>
-      </div>
-    </ElPopover>
-  </div>
-</template>
-
-<style scoped>
-.conn-tb {
-  position: absolute;
-  z-index: 15;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px 6px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgb(0 0 0 / 8%), 0 0 1px rgb(0 0 0 / 8%);
-  transform: translateX(-50%);
-  pointer-events: auto;
-}
-
-.conn-tb__btn {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px 6px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--el-text-color-primary);
-  transition: background 0.15s;
-}
-
-.conn-tb__btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.conn-tb__icon {
-  width: 18px;
-  height: 18px;
-}
-
-.conn-tb__arrow {
-  width: 12px;
-  height: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.conn-tb__sep {
-  width: 1px;
-  height: 20px;
-  margin: 0 2px;
-  background: var(--el-border-color-lighter);
-}
-
-/* Color swatch */
-.conn-tb__color-swatch {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 1px solid var(--el-border-color);
-}
-
-/* Panel */
-.conn-tb__panel {
-  padding: 4px 0;
-}
-
-.conn-tb__panel-title {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  padding: 4px 8px 8px;
-}
-
-/* Endpoint list */
-.conn-tb__endpoint-list {
-  padding: 4px 0;
-}
-
-.conn-tb__endpoint-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 8px 12px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  transition: background 0.15s;
-}
-
-.conn-tb__endpoint-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.conn-tb__endpoint-item--active {
-  color: var(--el-color-primary);
-}
-
-.conn-tb__endpoint-icon {
-  display: flex;
-  align-items: center;
-}
-
-.conn-tb__ep-svg {
-  width: 20px;
-  height: 20px;
-}
-
-.conn-tb__check {
-  width: 14px;
-  height: 14px;
-  color: var(--el-color-primary);
-}
-
-/* Route type row */
-.conn-tb__route-row {
-  display: flex;
-  gap: 4px;
-  padding: 4px 8px 8px;
-}
-
-.conn-tb__route-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  height: 36px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--el-text-color-primary);
-  transition: all 0.15s;
-}
-
-.conn-tb__route-btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.conn-tb__route-btn--active {
-  background: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary);
-  color: var(--el-color-primary);
-}
-
-.conn-tb__route-svg {
-  width: 28px;
-  height: 20px;
-}
-
-/* Dash style */
-.conn-tb__dash-row {
-  display: flex;
-  gap: 4px;
-  padding: 4px 8px 8px;
-}
-
-.conn-tb__dash-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  height: 32px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--el-text-color-primary);
-  transition: all 0.15s;
-}
-
-.conn-tb__dash-btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.conn-tb__dash-btn--active {
-  background: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary);
-}
-
-.conn-tb__dash-line {
-  display: inline-block;
-  width: 24px;
-  height: 2px;
-  background: currentColor;
-}
-
-.conn-tb__dash-line--dashed {
-  background: none;
-  border-top: 2px dashed currentColor;
-}
-
-.conn-tb__dash-line--dotted {
-  background: none;
-  border-top: 2px dotted currentColor;
-}
-
-/* Width row */
-.conn-tb__width-row {
-  display: flex;
-  gap: 8px;
-  padding: 4px 8px 8px;
-}
-
-.conn-tb__width-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 28px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.conn-tb__width-btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.conn-tb__width-btn--active {
-  background: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary);
-}
-
-.conn-tb__width-dot {
-  display: inline-block;
-  border-radius: 50%;
-  background: var(--el-text-color-primary);
-}
-
-/* Color grid */
-.conn-tb__color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 4px 8px;
-}
-
-.conn-tb__color-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 50%;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-}
-
-.conn-tb__color-btn--active {
-  outline: 2px solid var(--el-color-primary);
-  outline-offset: 1px;
-}
-
-.conn-tb__color-dot {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  border: 1px solid var(--el-border-color-light);
-}
-
-.conn-tb__custom-color {
-  padding: 8px 8px 4px;
-}
-
-/* Slider */
-.conn-tb__slider-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 8px 0;
-}
-
-.conn-tb__slider-label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.conn-tb__slider-val {
-  font-size: 12px;
-  color: var(--el-text-color-primary);
-}
-
-.conn-tb__slider {
-  padding: 0 8px;
-}
-
-/* More list */
-.conn-tb__more-list {
-  padding: 4px 0;
-}
-
-.conn-tb__more-item {
-  display: block;
-  width: 100%;
-  padding: 8px 12px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-  transition: background 0.15s;
-}
-
-.conn-tb__more-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.conn-tb__more-item--danger {
-  color: var(--el-color-danger);
-}
-
-.conn-tb__more-divider {
-  height: 1px;
-  margin: 4px 8px;
-  background: var(--el-border-color-lighter);
-}
-</style>
-
-<style>
-.conn-tb-popper {
-  z-index: 9999 !important;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/ContextMenu.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/ContextMenu.vue
deleted file mode 100644
index 46fbe4f..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/ContextMenu.vue
+++ /dev/null
@@ -1,497 +0,0 @@
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
-
-import { Group as FabricGroup } from 'fabric';
-import {
-  AlignCenterHorizontal,
-  AlignCenterVertical,
-  AlignEndHorizontal,
-  AlignEndVertical,
-  AlignHorizontalSpaceAround,
-  AlignStartHorizontal,
-  AlignStartVertical,
-  AlignVerticalSpaceAround,
-  ChevronRight,
-} from '@vben/icons';
-import { $t } from '@vben/locales';
-
-import { useWhiteboardStore } from '../store/whiteboard-store';
-
-const store = useWhiteboardStore();
-
-const visible = ref(false);
-const menuX = ref(0);
-const menuY = ref(0);
-const hasSelection = ref(false);
-const isLocked = ref(false);
-const multiSelected = ref(false);
-const showLayerSub = ref(false);
-const showRotateSub = ref(false);
-const isGroup = ref(false);
-
-const menuRef = ref<HTMLElement>();
-const isMac = navigator.platform.toUpperCase().includes('MAC');
-const modKey = isMac ? '\u2318' : 'Ctrl';
-
-function handleContextMenu(e: MouseEvent) {
-  e.preventDefault();
-  e.stopPropagation();
-  menuX.value = e.clientX;
-  menuY.value = e.clientY;
-  hasSelection.value = store.selectedObjectCount > 0;
-  multiSelected.value = store.selectedObjectCount > 1;
-
-  const canvas = store.getCanvas();
-  const active = canvas?.getActiveObject();
-  isLocked.value = !!(active && (active as any).lockMovementX);
-  isGroup.value = !!(active && active instanceof FabricGroup);
-
-  showLayerSub.value = false;
-  showRotateSub.value = false;
-  visible.value = true;
-
-  nextTick(() => {
-    document.addEventListener('click', closeMenu, { once: true });
-  });
-}
-
-function closeMenu() {
-  visible.value = false;
-}
-
-async function handleAction(action: string) {
-  closeMenu();
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-
-  switch (action) {
-    case 'copy':
-      store.clipboardManager?.copy();
-      break;
-    case 'cut':
-      store.clipboardManager?.cut();
-      break;
-    case 'paste':
-      store.clipboardManager?.paste();
-      break;
-    case 'duplicate':
-      store.clipboardManager?.duplicate();
-      break;
-    case 'delete':
-      store.deleteSelected();
-      break;
-    case 'selectAll':
-      store.selectAll();
-      break;
-    case 'bringToFront': {
-      const active = canvas.getActiveObject();
-      if (active) {
-        canvas.bringObjectToFront(active);
-        canvas.requestRenderAll();
-      }
-      break;
-    }
-    case 'sendToBack': {
-      const active = canvas.getActiveObject();
-      if (active) {
-        canvas.sendObjectToBack(active);
-        canvas.requestRenderAll();
-      }
-      break;
-    }
-    case 'bringForward': {
-      const active = canvas.getActiveObject();
-      if (active) {
-        canvas.bringObjectForward(active);
-        canvas.requestRenderAll();
-      }
-      break;
-    }
-    case 'sendBackward': {
-      const active = canvas.getActiveObject();
-      if (active) {
-        canvas.sendObjectBackwards(active);
-        canvas.requestRenderAll();
-      }
-      break;
-    }
-    case 'lock': {
-      const active = canvas.getActiveObject();
-      if (active) {
-        active.set({
-          lockMovementX: true,
-          lockMovementY: true,
-          lockRotation: true,
-          lockScalingX: true,
-          lockScalingY: true,
-          hasControls: false,
-        });
-        canvas.requestRenderAll();
-      }
-      break;
-    }
-    case 'unlock': {
-      const active = canvas.getActiveObject();
-      if (active) {
-        active.set({
-          lockMovementX: false,
-          lockMovementY: false,
-          lockRotation: false,
-          lockScalingX: false,
-          lockScalingY: false,
-          hasControls: true,
-        });
-        canvas.requestRenderAll();
-      }
-      break;
-    }
-    case 'group':
-      store.groupSelected();
-      break;
-    case 'ungroup':
-      store.ungroupSelected();
-      break;
-    case 'copyAsImage':
-      store.copyAsImage();
-      break;
-    case 'copyStyle':
-      store.copyStyle();
-      break;
-    case 'pasteStyle':
-      store.pasteStyle();
-      break;
-    case 'flipH':
-      store.flipSelected('horizontal');
-      break;
-    case 'flipV':
-      store.flipSelected('vertical');
-      break;
-    case 'rotateCW':
-      store.rotateSelected(90);
-      break;
-    case 'rotateCCW':
-      store.rotateSelected(-90);
-      break;
-    case 'rotate180':
-      store.rotateSelected(180);
-      break;
-    case 'alignLeft':
-    case 'alignCenter':
-    case 'alignRight':
-    case 'alignTop':
-    case 'alignMiddle':
-    case 'alignBottom':
-    case 'distributeH':
-    case 'distributeV':
-      store.alignObjects(action);
-      break;
-  }
-}
-
-let canvasEl: HTMLElement | null = null;
-
-function attachContextMenu() {
-  const canvas = store.getCanvas();
-  if (canvas) {
-    canvasEl = (canvas as any).getSelectionElement?.() || (canvas as any).wrapperEl || null;
-    if (canvasEl) {
-      canvasEl.addEventListener('contextmenu', handleContextMenu);
-    }
-  }
-}
-
-watch(
-  () => store.isCanvasReady,
-  (ready) => {
-    if (ready) attachContextMenu();
-  },
-  { immediate: true },
-);
-
-onBeforeUnmount(() => {
-  if (canvasEl) {
-    canvasEl.removeEventListener('contextmenu', handleContextMenu);
-    canvasEl = null;
-  }
-  document.removeEventListener('click', closeMenu);
-});
-</script>
-
-<template>
-  <Teleport to="body">
-    <div
-      v-if="visible"
-      ref="menuRef"
-      class="wb-context-menu"
-      :style="{ left: `${menuX}px`, top: `${menuY}px` }"
-    >
-      <template v-if="hasSelection">
-        <!-- Copy / Copy as Image / Paste / Duplicate -->
-        <button class="wb-context-menu__item" @click="handleAction('copy')">
-          <span>{{ $t('whiteboard.menu.copy') }}</span>
-          <span class="wb-context-menu__shortcut">{{ modKey }}+C</span>
-        </button>
-        <button class="wb-context-menu__item" @click="handleAction('copyAsImage')">
-          <span>{{ $t('whiteboard.menu.copyAsImage') }}</span>
-          <span class="wb-context-menu__shortcut">{{ modKey }}+Shift+C</span>
-        </button>
-        <button class="wb-context-menu__item" @click="handleAction('paste')">
-          <span>{{ $t('whiteboard.menu.paste') }}</span>
-          <span class="wb-context-menu__shortcut">{{ modKey }}+V</span>
-        </button>
-        <button class="wb-context-menu__item" @click="handleAction('duplicate')">
-          <span>{{ $t('whiteboard.menu.duplicate') }}</span>
-          <span class="wb-context-menu__shortcut">{{ modKey }}+D</span>
-        </button>
-        <div class="wb-context-menu__divider" />
-
-        <!-- Layer submenu -->
-        <div class="wb-context-menu__item wb-context-menu__item--sub" @mouseenter="showLayerSub = true" @mouseleave="showLayerSub = false">
-          <span>{{ $t('whiteboard.menu.layer') }}</span>
-          <ChevronRight class="wb-context-menu__sub-arrow" />
-          <div v-if="showLayerSub" class="wb-context-menu__submenu">
-            <button class="wb-context-menu__item" @click="handleAction('bringToFront')">
-              <span>{{ $t('whiteboard.menu.bringToFront') }}</span>
-            </button>
-            <button class="wb-context-menu__item" @click="handleAction('sendToBack')">
-              <span>{{ $t('whiteboard.menu.sendToBack') }}</span>
-            </button>
-            <button class="wb-context-menu__item" @click="handleAction('bringForward')">
-              <span>{{ $t('whiteboard.menu.bringForward') }}</span>
-            </button>
-            <button class="wb-context-menu__item" @click="handleAction('sendBackward')">
-              <span>{{ $t('whiteboard.menu.sendBackward') }}</span>
-            </button>
-          </div>
-        </div>
-        <div class="wb-context-menu__divider" />
-
-        <!-- Copy/Paste style -->
-        <button class="wb-context-menu__item" @click="handleAction('copyStyle')">
-          <span>{{ $t('whiteboard.menu.copyStyle') }}</span>
-          <span class="wb-context-menu__shortcut">{{ modKey }}+{{ isMac ? '\u2325' : 'Alt' }}+C</span>
-        </button>
-        <button
-          class="wb-context-menu__item"
-          :class="{ 'wb-context-menu__item--disabled': !store.hasCopiedStyle() }"
-          @click="store.hasCopiedStyle() && handleAction('pasteStyle')"
-        >
-          <span>{{ $t('whiteboard.menu.pasteStyle') }}</span>
-          <span class="wb-context-menu__shortcut">{{ modKey }}+{{ isMac ? '\u2325' : 'Alt' }}+V</span>
-        </button>
-        <div class="wb-context-menu__divider" />
-
-        <!-- Flip & Rotate -->
-        <button class="wb-context-menu__item" @click="handleAction('flipH')">
-          <span>{{ $t('whiteboard.menu.flipH') }}</span>
-          <span class="wb-context-menu__shortcut">Shift+H</span>
-        </button>
-        <button class="wb-context-menu__item" @click="handleAction('flipV')">
-          <span>{{ $t('whiteboard.menu.flipV') }}</span>
-          <span class="wb-context-menu__shortcut">Shift+V</span>
-        </button>
-        <div class="wb-context-menu__item wb-context-menu__item--sub" @mouseenter="showRotateSub = true" @mouseleave="showRotateSub = false">
-          <span>{{ $t('whiteboard.menu.rotate') }}</span>
-          <ChevronRight class="wb-context-menu__sub-arrow" />
-          <div v-if="showRotateSub" class="wb-context-menu__submenu">
-            <button class="wb-context-menu__item" @click="handleAction('rotateCW')">
-              <span>{{ $t('whiteboard.menu.rotateCW') }}</span>
-            </button>
-            <button class="wb-context-menu__item" @click="handleAction('rotateCCW')">
-              <span>{{ $t('whiteboard.menu.rotateCCW') }}</span>
-            </button>
-            <button class="wb-context-menu__item" @click="handleAction('rotate180')">
-              <span>{{ $t('whiteboard.menu.rotate180') }}</span>
-            </button>
-          </div>
-        </div>
-        <div class="wb-context-menu__divider" />
-
-        <!-- Align (multi-select only) -->
-        <template v-if="multiSelected">
-          <div class="wb-context-menu__sub-label">{{ $t('whiteboard.menu.align') }}</div>
-          <div class="wb-context-menu__grid">
-            <button class="wb-context-menu__grid-btn" :title="$t('whiteboard.menu.alignLeft')" @click="handleAction('alignLeft')">
-              <AlignStartVertical class="wb-context-menu__grid-icon" />
-            </button>
-            <button class="wb-context-menu__grid-btn" :title="$t('whiteboard.menu.alignCenter')" @click="handleAction('alignCenter')">
-              <AlignCenterVertical class="wb-context-menu__grid-icon" />
-            </button>
-            <button class="wb-context-menu__grid-btn" :title="$t('whiteboard.menu.alignRight')" @click="handleAction('alignRight')">
-              <AlignEndVertical class="wb-context-menu__grid-icon" />
-            </button>
-            <button class="wb-context-menu__grid-btn" :title="$t('whiteboard.menu.alignTop')" @click="handleAction('alignTop')">
-              <AlignStartHorizontal class="wb-context-menu__grid-icon" />
-            </button>
-            <button class="wb-context-menu__grid-btn" :title="$t('whiteboard.menu.alignMiddle')" @click="handleAction('alignMiddle')">
-              <AlignCenterHorizontal class="wb-context-menu__grid-icon" />
-            </button>
-            <button class="wb-context-menu__grid-btn" :title="$t('whiteboard.menu.alignBottom')" @click="handleAction('alignBottom')">
-              <AlignEndHorizontal class="wb-context-menu__grid-icon" />
-            </button>
-          </div>
-          <div class="wb-context-menu__grid" style="margin-top: 2px;">
-            <button class="wb-context-menu__grid-btn" :title="$t('whiteboard.menu.distributeH')" @click="handleAction('distributeH')">
-              <AlignHorizontalSpaceAround class="wb-context-menu__grid-icon" />
-            </button>
-            <button class="wb-context-menu__grid-btn" :title="$t('whiteboard.menu.distributeV')" @click="handleAction('distributeV')">
-              <AlignVerticalSpaceAround class="wb-context-menu__grid-icon" />
-            </button>
-          </div>
-          <div class="wb-context-menu__divider" />
-          <button class="wb-context-menu__item" @click="handleAction('group')">
-            <span>{{ $t('whiteboard.menu.group') }}</span>
-            <span class="wb-context-menu__shortcut">{{ modKey }}+G</span>
-          </button>
-          <div class="wb-context-menu__divider" />
-        </template>
-
-        <template v-if="!multiSelected && isGroup">
-          <button class="wb-context-menu__item" @click="handleAction('ungroup')">
-            <span>{{ $t('whiteboard.menu.ungroup') }}</span>
-            <span class="wb-context-menu__shortcut">{{ modKey }}+Shift+G</span>
-          </button>
-          <div class="wb-context-menu__divider" />
-        </template>
-
-        <!-- Lock/Unlock -->
-        <button v-if="!isLocked" class="wb-context-menu__item" @click="handleAction('lock')">
-          <span>{{ $t('whiteboard.menu.lock') }}</span>
-          <span class="wb-context-menu__shortcut">{{ modKey }}+{{ isMac ? '\u2325' : 'Alt' }}+L</span>
-        </button>
-        <button v-else class="wb-context-menu__item" @click="handleAction('unlock')">
-          <span>{{ $t('whiteboard.menu.unlock') }}</span>
-          <span class="wb-context-menu__shortcut">{{ modKey }}+{{ isMac ? '\u2325' : 'Alt' }}+L</span>
-        </button>
-
-        <!-- Delete -->
-        <button class="wb-context-menu__item wb-context-menu__item--danger" @click="handleAction('delete')">
-          <span>{{ $t('whiteboard.menu.delete') }}</span>
-          <span class="wb-context-menu__shortcut">{{ isMac ? '\u232B' : 'Del' }}</span>
-        </button>
-      </template>
-      <template v-else>
-        <button class="wb-context-menu__item" @click="handleAction('paste')">
-          <span>{{ $t('whiteboard.menu.paste') }}</span>
-          <span class="wb-context-menu__shortcut">{{ modKey }}+V</span>
-        </button>
-        <button class="wb-context-menu__item" @click="handleAction('selectAll')">
-          <span>{{ $t('whiteboard.menu.selectAll') }}</span>
-          <span class="wb-context-menu__shortcut">{{ modKey }}+A</span>
-        </button>
-      </template>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-.wb-context-menu {
-  position: fixed;
-  z-index: 9999;
-  min-width: 180px;
-  padding: 4px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-}
-
-.wb-context-menu__item {
-  display: flex;
-  gap: 20px;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 6px 12px;
-  font-size: 13px;
-  color: var(--el-text-color-regular);
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  transition: background 0.15s;
-}
-
-.wb-context-menu__item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.wb-context-menu__item--danger {
-  color: var(--el-color-danger);
-}
-
-.wb-context-menu__shortcut {
-  font-size: 11px;
-  color: var(--el-text-color-placeholder);
-}
-
-.wb-context-menu__divider {
-  height: 1px;
-  margin: 4px 8px;
-  background: var(--el-border-color-lighter);
-}
-
-.wb-context-menu__sub-label {
-  padding: 4px 12px 2px;
-  font-size: 11px;
-  color: var(--el-text-color-placeholder);
-}
-
-.wb-context-menu__grid {
-  display: flex;
-  gap: 2px;
-  padding: 2px 8px;
-}
-
-.wb-context-menu__grid-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  color: var(--el-text-color-regular);
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  transition: background 0.15s;
-}
-
-.wb-context-menu__grid-btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.wb-context-menu__grid-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.wb-context-menu__item--sub {
-  position: relative;
-}
-
-.wb-context-menu__sub-arrow {
-  width: 14px;
-  height: 14px;
-  margin-left: auto;
-  color: var(--el-text-color-placeholder);
-}
-
-.wb-context-menu__submenu {
-  position: absolute;
-  left: 100%;
-  top: -4px;
-  min-width: 160px;
-  padding: 4px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
-}
-
-.wb-context-menu__item--disabled {
-  opacity: 0.4;
-  pointer-events: none;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/DirectionHandles.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/DirectionHandles.vue
deleted file mode 100644
index 82b4335..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/DirectionHandles.vue
+++ /dev/null
@@ -1,383 +0,0 @@
-<script setup lang="ts">
-import type { Component } from 'vue';
-
-import { onBeforeUnmount, ref, shallowRef, watch } from 'vue';
-
-import * as fabric from 'fabric';
-
-import {
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  Circle,
-  Diamond,
-  Hexagon,
-  RectangleHorizontal,
-  Square,
-  Triangle,
-} from '@vben/icons';
-
-import { useWhiteboardStore } from '../store/whiteboard-store';
-import { ShapeSubType, ToolType } from '../types';
-
-type Direction = 'top' | 'right' | 'bottom' | 'left';
-
-const SHAPE_ICON_MAP: Partial<Record<ShapeSubType, Component>> = {
-  [ShapeSubType.Rect]: Square,
-  [ShapeSubType.RoundedRect]: RectangleHorizontal,
-  [ShapeSubType.Circle]: Circle,
-  [ShapeSubType.Diamond]: Diamond,
-  [ShapeSubType.Triangle]: Triangle,
-  [ShapeSubType.Hexagon]: Hexagon,
-};
-
-const DIR_ICON_MAP: Record<Direction, Component> = {
-  top: ChevronUp,
-  right: ChevronRight,
-  bottom: ChevronDown,
-  left: ChevronLeft,
-};
-
-const QUICK_SHAPES: ShapeSubType[] = [
-  ShapeSubType.Rect,
-  ShapeSubType.RoundedRect,
-  ShapeSubType.Circle,
-  ShapeSubType.Diamond,
-  ShapeSubType.Triangle,
-  ShapeSubType.Hexagon,
-];
-
-const store = useWhiteboardStore();
-const visible = ref(false);
-const hoveredObj = shallowRef<fabric.FabricObject | null>(null);
-
-const handles = ref<Record<Direction, { x: number; y: number }>>({
-  top: { x: 0, y: 0 },
-  right: { x: 0, y: 0 },
-  bottom: { x: 0, y: 0 },
-  left: { x: 0, y: 0 },
-});
-
-const activePanel = ref<Direction | null>(null);
-const panelPos = ref({ x: 0, y: 0 });
-
-const HANDLE_OFFSET = 30;
-
-let attachedCanvas: fabric.Canvas | null = null;
-let hideTimer: ReturnType<typeof setTimeout> | null = null;
-
-function clearHideTimer() {
-  if (hideTimer) {
-    clearTimeout(hideTimer);
-    hideTimer = null;
-  }
-}
-
-function scheduleHide(delay = 200) {
-  clearHideTimer();
-  hideTimer = setTimeout(() => {
-    visible.value = false;
-    hoveredObj.value = null;
-    activePanel.value = null;
-  }, delay);
-}
-
-function updateHandlePositions(obj: fabric.FabricObject) {
-  const bound = obj.getBoundingRect();
-  const cx = bound.left + bound.width / 2;
-  const cy = bound.top + bound.height / 2;
-
-  handles.value = {
-    top: { x: cx, y: bound.top - HANDLE_OFFSET },
-    bottom: { x: cx, y: bound.top + bound.height + HANDLE_OFFSET },
-    left: { x: bound.left - HANDLE_OFFSET, y: cy },
-    right: { x: bound.left + bound.width + HANDLE_OFFSET, y: cy },
-  };
-}
-
-function shouldShowHandles(obj: fabric.FabricObject): boolean {
-  if ((obj as any).isConnector) return false;
-  if ((obj as any).isDynamicConnector) return false;
-  if ((obj as any).isConnectorLabel) return false;
-  if (obj instanceof fabric.ActiveSelection) return false;
-  if (obj instanceof fabric.IText || obj instanceof fabric.Textbox) return false;
-  return true;
-}
-
-function isTextEditing(): boolean {
-  const canvas = store.getCanvas();
-  if (!canvas) return false;
-  const active = canvas.getActiveObject();
-  return active instanceof fabric.Textbox && (active as any).isEditing;
-}
-
-function onObjectMouseOver(e: any) {
-  if (store.currentTool !== ToolType.Select) return;
-  if (isTextEditing()) return;
-  const target = e.target;
-  if (!target || !shouldShowHandles(target)) return;
-
-  clearHideTimer();
-  hoveredObj.value = target;
-  updateHandlePositions(target);
-  visible.value = true;
-}
-
-function onObjectMouseOut() {
-  scheduleHide(400);
-}
-
-function onObjectMoving(e: any) {
-  if (e.target === hoveredObj.value) {
-    visible.value = false;
-    activePanel.value = null;
-  }
-}
-
-function onViewportChanged() {
-  visible.value = false;
-  hoveredObj.value = null;
-  activePanel.value = null;
-}
-
-function onCanvasEvents() {
-  const canvas = store.getCanvas();
-  if (!canvas || canvas === attachedCanvas) return;
-
-  if (attachedCanvas) {
-    attachedCanvas.off('mouse:over', onObjectMouseOver);
-    attachedCanvas.off('mouse:out', onObjectMouseOut);
-    attachedCanvas.off('object:moving', onObjectMoving);
-    attachedCanvas.off('mouse:down', onCanvasMouseDown);
-    attachedCanvas.off('object:scaling', onViewportChanged);
-    attachedCanvas.off('object:rotating', onViewportChanged);
-  }
-
-  attachedCanvas = canvas;
-  canvas.on('mouse:over', onObjectMouseOver);
-  canvas.on('mouse:out', onObjectMouseOut);
-  canvas.on('object:moving', onObjectMoving);
-  canvas.on('mouse:down', onCanvasMouseDown);
-  canvas.on('object:scaling', onViewportChanged);
-  canvas.on('object:rotating', onViewportChanged);
-}
-
-function onCanvasMouseDown() {
-  visible.value = false;
-  hoveredObj.value = null;
-  activePanel.value = null;
-}
-
-function handleArrowEnter(dir: Direction) {
-  clearHideTimer();
-  activePanel.value = dir;
-
-  const h = handles.value[dir];
-  const PANEL_W = 200;
-  const PANEL_H = 100;
-
-  switch (dir) {
-    case 'top':
-      panelPos.value = { x: h.x - PANEL_W / 2, y: h.y - PANEL_H - 12 };
-      break;
-    case 'bottom':
-      panelPos.value = { x: h.x - PANEL_W / 2, y: h.y + 12 };
-      break;
-    case 'left':
-      panelPos.value = { x: h.x - PANEL_W - 12, y: h.y - PANEL_H / 2 };
-      break;
-    case 'right':
-      panelPos.value = { x: h.x + 12, y: h.y - PANEL_H / 2 };
-      break;
-  }
-}
-
-function handleArrowLeave() {
-  scheduleHide(300);
-}
-
-function handlePanelEnter() {
-  clearHideTimer();
-}
-
-function handlePanelLeave() {
-  scheduleHide(200);
-}
-
-function handleShapeSelect(dir: Direction, subType: ShapeSubType) {
-  if (!hoveredObj.value) return;
-  store.addConnectedShape(hoveredObj.value, dir, subType);
-  activePanel.value = null;
-  visible.value = false;
-  hoveredObj.value = null;
-}
-
-function handleArrowClick(dir: Direction) {
-  if (!hoveredObj.value) return;
-  const sourceSubType = (hoveredObj.value as any).shapeSubType || ShapeSubType.Rect;
-  store.addConnectedShape(hoveredObj.value, dir, sourceSubType);
-  activePanel.value = null;
-  visible.value = false;
-  hoveredObj.value = null;
-}
-
-watch(() => store.isCanvasReady, (ready) => {
-  if (ready) onCanvasEvents();
-}, { immediate: true });
-
-watch(() => store.currentTool, (tool) => {
-  if (tool !== ToolType.Select) {
-    visible.value = false;
-    activePanel.value = null;
-  }
-});
-
-watch(() => store.viewport, () => {
-  if (visible.value) {
-    visible.value = false;
-    hoveredObj.value = null;
-    activePanel.value = null;
-  }
-}, { deep: true });
-
-onBeforeUnmount(() => {
-  clearHideTimer();
-  if (attachedCanvas) {
-    attachedCanvas.off('mouse:over', onObjectMouseOver);
-    attachedCanvas.off('mouse:out', onObjectMouseOut);
-    attachedCanvas.off('object:moving', onObjectMoving);
-    attachedCanvas.off('mouse:down', onCanvasMouseDown);
-    attachedCanvas.off('object:scaling', onViewportChanged);
-    attachedCanvas.off('object:rotating', onViewportChanged);
-  }
-});
-</script>
-
-<template>
-  <div v-if="visible" class="dir-handles" @mouseenter="clearHideTimer" @mouseleave="handleArrowLeave">
-    <button
-      v-for="dir in (['top', 'right', 'bottom', 'left'] as Direction[])"
-      :key="dir"
-      class="dir-handles__arrow"
-      :class="`dir-handles__arrow--${dir}`"
-      :style="{ left: `${handles[dir].x}px`, top: `${handles[dir].y}px` }"
-      @mouseenter="handleArrowEnter(dir)"
-      @mouseleave="handleArrowLeave"
-      @click.stop="handleArrowClick(dir)"
-      @mousedown.prevent.stop
-      @pointerdown.prevent.stop
-    >
-      <component :is="DIR_ICON_MAP[dir]" class="dir-handles__arrow-icon" />
-    </button>
-
-    <div
-      v-if="activePanel"
-      class="dir-handles__panel"
-      :style="{ left: `${panelPos.x}px`, top: `${panelPos.y}px` }"
-      @mouseenter="handlePanelEnter"
-      @mouseleave="handlePanelLeave"
-      @mousedown.prevent.stop
-      @pointerdown.prevent.stop
-    >
-      <div class="dir-handles__panel-grid">
-        <button
-          v-for="st in QUICK_SHAPES"
-          :key="st"
-          class="dir-handles__shape-btn"
-          @click.stop="handleShapeSelect(activePanel!, st)"
-        >
-          <component :is="SHAPE_ICON_MAP[st]" class="dir-handles__shape-icon" />
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.dir-handles {
-  position: absolute;
-  inset: 0;
-  z-index: 12;
-  pointer-events: none;
-}
-
-.dir-handles__arrow {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  background: var(--el-bg-color);
-  border: 1.5px solid #4a90d9;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  cursor: pointer;
-  pointer-events: auto;
-  opacity: 0.65;
-  transition: all 0.15s ease;
-  box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
-}
-
-.dir-handles__arrow:hover {
-  opacity: 1;
-  background: #4a90d9;
-  border-color: #4a90d9;
-  transform: translate(-50%, -50%) scale(1.15);
-}
-
-.dir-handles__arrow:hover .dir-handles__arrow-icon {
-  color: #fff;
-}
-
-.dir-handles__arrow-icon {
-  width: 14px;
-  height: 14px;
-  color: #4a90d9;
-  transition: color 0.15s;
-}
-
-.dir-handles__panel {
-  position: absolute;
-  z-index: 16;
-  padding: 8px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: 0 4px 16px rgb(0 0 0 / 12%), 0 0 1px rgb(0 0 0 / 8%);
-  pointer-events: auto;
-}
-
-.dir-handles__panel-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 4px;
-}
-
-.dir-handles__shape-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 36px;
-  padding: 0;
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.12s;
-}
-
-.dir-handles__shape-btn:hover {
-  background: var(--el-fill-color-light);
-  border-color: var(--el-border-color);
-}
-
-.dir-handles__shape-icon {
-  width: 20px;
-  height: 20px;
-  color: var(--el-text-color-primary);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/Minimap.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/Minimap.vue
deleted file mode 100644
index 27b7443..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/Minimap.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
-
-import { useWhiteboardStore } from '../store/whiteboard-store';
-
-const store = useWhiteboardStore();
-
-const minimapCanvas = ref<HTMLCanvasElement>();
-const containerRef = ref<HTMLElement>();
-const MINIMAP_W = 160;
-const MINIMAP_H = 100;
-
-let renderTimer: ReturnType<typeof setTimeout> | null = null;
-let isDestroyed = false;
-
-function getBgColor(): string {
-  const el = containerRef.value;
-  if (!el) return '#ffffff';
-  return getComputedStyle(el).backgroundColor || '#ffffff';
-}
-
-function render() {
-  const canvas = store.getCanvas();
-  const ctx = minimapCanvas.value?.getContext('2d');
-  if (!canvas || !ctx) return;
-
-  ctx.clearRect(0, 0, MINIMAP_W, MINIMAP_H);
-  ctx.fillStyle = getBgColor();
-  ctx.fillRect(0, 0, MINIMAP_W, MINIMAP_H);
-
-  const objects = canvas.getObjects();
-  if (objects.length === 0) return;
-
-  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-  for (const obj of objects) {
-    const b = obj.getBoundingRect();
-    minX = Math.min(minX, b.left);
-    minY = Math.min(minY, b.top);
-    maxX = Math.max(maxX, b.left + b.width);
-    maxY = Math.max(maxY, b.top + b.height);
-  }
-
-  const contentW = maxX - minX || 1;
-  const contentH = maxY - minY || 1;
-  const pad = 10;
-  const scale = Math.min(
-    (MINIMAP_W - pad * 2) / contentW,
-    (MINIMAP_H - pad * 2) / contentH,
-  );
-
-  ctx.save();
-  ctx.translate(pad, pad);
-  ctx.scale(scale, scale);
-  ctx.translate(-minX, -minY);
-
-  for (const obj of objects) {
-    const b = obj.getBoundingRect();
-    ctx.fillStyle = '#94a3b8';
-    ctx.globalAlpha = 0.5;
-    ctx.fillRect(b.left, b.top, b.width, b.height);
-  }
-
-  const vpt = canvas.viewportTransform;
-  if (vpt) {
-    const zoom = canvas.getZoom();
-    const vpLeft = -vpt[4] / zoom;
-    const vpTop = -vpt[5] / zoom;
-    const vpWidth = canvas.getWidth() / zoom;
-    const vpHeight = canvas.getHeight() / zoom;
-
-    ctx.globalAlpha = 1;
-    ctx.strokeStyle = '#6366f1';
-    ctx.lineWidth = 2 / scale;
-    ctx.strokeRect(vpLeft, vpTop, vpWidth, vpHeight);
-  }
-
-  ctx.restore();
-}
-
-function scheduleRender() {
-  if (isDestroyed) return;
-  if (renderTimer) clearTimeout(renderTimer);
-  renderTimer = setTimeout(() => render(), 100);
-}
-
-function onCanvasChanged() {
-  scheduleRender();
-}
-
-let attachedCanvas: any = null;
-
-function attachCanvasListeners() {
-  const canvas = store.getCanvas();
-  if (canvas && canvas !== attachedCanvas) {
-    attachedCanvas = canvas;
-    canvas.on('object:added', onCanvasChanged);
-    canvas.on('object:removed', onCanvasChanged);
-    canvas.on('object:modified', onCanvasChanged);
-    render();
-  }
-}
-
-watch(() => store.viewport, scheduleRender, { deep: true });
-watch(() => store.selectionVersion, scheduleRender);
-watch(
-  () => store.isCanvasReady,
-  (ready) => {
-    if (ready) attachCanvasListeners();
-  },
-  { immediate: true },
-);
-
-onMounted(() => {
-  attachCanvasListeners();
-});
-
-onBeforeUnmount(() => {
-  isDestroyed = true;
-  if (renderTimer) clearTimeout(renderTimer);
-  if (attachedCanvas) {
-    attachedCanvas.off('object:added', onCanvasChanged);
-    attachedCanvas.off('object:removed', onCanvasChanged);
-    attachedCanvas.off('object:modified', onCanvasChanged);
-    attachedCanvas = null;
-  }
-});
-</script>
-
-<template>
-  <div ref="containerRef" class="wb-minimap">
-    <canvas
-      ref="minimapCanvas"
-      :width="MINIMAP_W"
-      :height="MINIMAP_H"
-    />
-  </div>
-</template>
-
-<style scoped>
-.wb-minimap {
-  position: absolute;
-  right: 12px;
-  bottom: 52px;
-  z-index: 10;
-  overflow: hidden;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
-}
-
-.wb-minimap canvas {
-  display: block;
-  background: var(--el-bg-color);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/PropertyPanel.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/PropertyPanel.vue
deleted file mode 100644
index 2be36fa..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/PropertyPanel.vue
+++ /dev/null
@@ -1,284 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch } from 'vue';
-
-import { $t } from '@vben/locales';
-import {
-  ElColorPicker,
-  ElDivider,
-  ElInputNumber,
-  ElSelect,
-  ElOption,
-  ElSlider,
-} from 'element-plus';
-import * as fabric from 'fabric';
-
-import { PRESET_COLORS, STROKE_WIDTHS } from '../constants';
-import { useWhiteboardStore } from '../store/whiteboard-store';
-
-const store = useWhiteboardStore();
-
-const localFill = ref(store.fillColor);
-const localStroke = ref(store.strokeColor);
-const localStrokeWidth = ref(store.strokeWidth);
-const localOpacity = ref(100);
-const localFontSize = ref(16);
-const isTextObject = ref(false);
-
-const hasSelection = computed(() => store.selectedObjectCount > 0);
-
-watch(
-  () => store.selectionVersion,
-  () => {
-    const canvas = store.getCanvas();
-    if (!canvas) return;
-    const active = canvas.getActiveObject();
-    if (!active) return;
-
-    localFill.value = (active.get('fill') as string) || 'transparent';
-    localStroke.value = (active.get('stroke') as string) || '#1e1e1e';
-    localStrokeWidth.value = (active.get('strokeWidth') as number) || 2;
-    localOpacity.value = Math.round(((active.get('opacity') as number) || 1) * 100);
-
-    const hasFont = active instanceof fabric.IText ||
-      active instanceof fabric.Textbox ||
-      (active as any).fontSize !== undefined;
-    isTextObject.value = hasFont;
-
-    if (hasFont) {
-      localFontSize.value = (active as any).fontSize ?? 16;
-    }
-  },
-);
-
-function getActiveObjects(): fabric.FabricObject[] {
-  const canvas = store.getCanvas();
-  if (!canvas) return [];
-  return canvas.getActiveObjects();
-}
-
-function updateFill(color: string | null) {
-  const val = color || 'transparent';
-  localFill.value = val;
-  store.setFillColor(val);
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of getActiveObjects()) {
-    obj.set('fill', val);
-  }
-  canvas.requestRenderAll();
-}
-
-function updateStroke(color: string | null) {
-  const val = color || '#1e1e1e';
-  localStroke.value = val;
-  store.setStrokeColor(val);
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of getActiveObjects()) {
-    obj.set('stroke', val);
-  }
-  canvas.requestRenderAll();
-}
-
-function updateStrokeWidth(val: number | undefined) {
-  if (val === undefined) return;
-  localStrokeWidth.value = val;
-  store.setStrokeWidth(val);
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of getActiveObjects()) {
-    obj.set('strokeWidth', val);
-  }
-  canvas.requestRenderAll();
-}
-
-function updateOpacity(val: number | number[]) {
-  const v = Array.isArray(val) ? val[0]! : val;
-  localOpacity.value = v;
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of getActiveObjects()) {
-    obj.set('opacity', v / 100);
-  }
-  canvas.requestRenderAll();
-}
-
-function updateFontSize(val: number | undefined) {
-  if (val === undefined) return;
-  localFontSize.value = val;
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of getActiveObjects()) {
-    if ((obj as any).fontSize !== undefined) {
-      (obj as any).set('fontSize', val);
-    }
-  }
-  canvas.requestRenderAll();
-}
-</script>
-
-<template>
-  <Transition name="wb-slide-right">
-    <div v-if="hasSelection" class="wb-property-panel">
-      <div class="wb-property-panel__header">
-        {{ $t('whiteboard.property.title') }}
-      </div>
-
-      <div class="wb-property-panel__section">
-        <label class="wb-property-panel__label">
-          {{ $t('whiteboard.property.fill') }}
-        </label>
-        <div class="wb-property-panel__row">
-          <ElColorPicker
-            :model-value="localFill"
-            show-alpha
-            size="small"
-            @change="updateFill"
-          />
-          <div class="wb-property-panel__presets">
-            <button
-              v-for="c in PRESET_COLORS.slice(0, 8)"
-              :key="c"
-              class="wb-property-panel__preset"
-              :style="{ backgroundColor: c }"
-              @click="updateFill(c)"
-            />
-          </div>
-        </div>
-      </div>
-
-      <ElDivider style="margin: 8px 0" />
-
-      <div class="wb-property-panel__section">
-        <label class="wb-property-panel__label">
-          {{ $t('whiteboard.property.stroke') }}
-        </label>
-        <div class="wb-property-panel__row">
-          <ElColorPicker
-            :model-value="localStroke"
-            size="small"
-            @change="updateStroke"
-          />
-          <ElSelect
-            :model-value="localStrokeWidth"
-            size="small"
-            style="width: 80px"
-            @change="updateStrokeWidth"
-          >
-            <ElOption
-              v-for="w in STROKE_WIDTHS"
-              :key="w"
-              :label="`${w}px`"
-              :value="w"
-            />
-          </ElSelect>
-        </div>
-      </div>
-
-      <ElDivider style="margin: 8px 0" />
-
-      <div class="wb-property-panel__section">
-        <label class="wb-property-panel__label">
-          {{ $t('whiteboard.property.opacity') }}
-        </label>
-        <ElSlider
-          :model-value="localOpacity"
-          :min="0"
-          :max="100"
-          :step="1"
-          size="small"
-          @input="updateOpacity"
-        />
-      </div>
-
-      <template v-if="isTextObject">
-        <ElDivider style="margin: 8px 0" />
-
-        <div class="wb-property-panel__section">
-          <label class="wb-property-panel__label">
-            {{ $t('whiteboard.property.fontSize') }}
-          </label>
-          <ElInputNumber
-            :model-value="localFontSize"
-            :min="8"
-            :max="200"
-            :step="1"
-            size="small"
-            @change="updateFontSize"
-          />
-        </div>
-      </template>
-    </div>
-  </Transition>
-</template>
-
-<style scoped>
-.wb-property-panel {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  z-index: 10;
-  width: 240px;
-  max-height: calc(100% - 24px);
-  padding: 12px;
-  overflow-y: auto;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 10px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.wb-property-panel__header {
-  margin-bottom: 12px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--el-text-color-primary);
-}
-
-.wb-property-panel__section {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.wb-property-panel__label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.wb-property-panel__row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.wb-property-panel__presets {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 3px;
-}
-
-.wb-property-panel__preset {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 3px;
-  transition: transform 0.1s;
-}
-
-.wb-property-panel__preset:hover {
-  transform: scale(1.2);
-}
-
-.wb-slide-right-enter-active,
-.wb-slide-right-leave-active {
-  transition: all 0.2s ease;
-}
-
-.wb-slide-right-enter-from,
-.wb-slide-right-leave-to {
-  opacity: 0;
-  transform: translateX(12px);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/SelectionToolbar.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/SelectionToolbar.vue
deleted file mode 100644
index eac3885..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/SelectionToolbar.vue
+++ /dev/null
@@ -1,1142 +0,0 @@
-<script setup lang="ts">
-import type { Component } from 'vue';
-
-import { onBeforeUnmount, ref, watch } from 'vue';
-
-import { storeToRefs } from 'pinia';
-
-import * as fabric from 'fabric';
-
-import {
-  ArrowBigRight,
-  ArrowBigUp,
-  Ban,
-  Check,
-  ChevronDown,
-  Circle,
-  Cloud,
-  Cylinder,
-  Diamond,
-  Heart,
-  Hexagon,
-  MessageCircle,
-  MoreHorizontal,
-  Octagon,
-  Parentheses,
-  Pentagon,
-  RectangleHorizontal,
-  Square,
-  Star,
-  Triangle,
-} from '@vben/icons';
-import { $t } from '@vben/locales';
-import { ElColorPicker, ElPopover, ElSlider } from 'element-plus';
-
-import {
-  FONT_SIZES,
-  STROKE_DASH_OPTIONS,
-  STROKE_WIDTH_PRESETS,
-  TOOLBAR_FILL_COLORS,
-} from '../constants';
-import { useWhiteboardStore } from '../store/whiteboard-store';
-import { ShapeTool } from '../tools/shape-tool';
-import { ShapeSubType } from '../types';
-
-const store = useWhiteboardStore();
-const { backgroundSolidColor } = storeToRefs(store);
-
-const visible = ref(false);
-const posX = ref(0);
-const posY = ref(0);
-const popPlacement = ref<'top' | 'bottom'>('top');
-
-const localFill = ref('transparent');
-const localStroke = ref('#1e1e1e');
-const localStrokeWidth = ref(2);
-const localStrokeDashKey = ref('solid');
-const localFillOpacity = ref(100);
-const localFontSize = ref(14);
-const localTextColor = ref('#000000');
-const localTextBgColor = ref('transparent');
-const isTextObject = ref(false);
-const hasFill = ref(true);
-const hasStroke = ref(true);
-const currentShapeType = ref<ShapeSubType | null>(null);
-const isMultiSelect = ref(false);
-/** 仅文本/连线标签等：无形状填充描边，避免与「文字颜色」重复 */
-const isTextOnlySelection = ref(false);
-/** 连线标签：背景强制与画布一致，不提供单独背景编辑 */
-const isConnectorLabelSelection = ref(false);
-const shapePopVisible = ref(false);
-const fontSizePopVisible = ref(false);
-
-const SHAPE_ICON_MAP: Record<ShapeSubType, Component> = {
-  [ShapeSubType.Rect]: Square,
-  [ShapeSubType.RoundedRect]: RectangleHorizontal,
-  [ShapeSubType.Circle]: Circle,
-  [ShapeSubType.Diamond]: Diamond,
-  [ShapeSubType.Triangle]: Triangle,
-  [ShapeSubType.Star]: Star,
-  [ShapeSubType.Hexagon]: Hexagon,
-  [ShapeSubType.Pentagon]: Pentagon,
-  [ShapeSubType.Octagon]: Octagon,
-  [ShapeSubType.Parallelogram]: Parentheses,
-  [ShapeSubType.Cylinder]: Cylinder,
-  [ShapeSubType.ArrowRight]: ArrowBigRight,
-  [ShapeSubType.ArrowUp]: ArrowBigUp,
-  [ShapeSubType.Heart]: Heart,
-  [ShapeSubType.Cloud]: Cloud,
-  [ShapeSubType.ChatBubble]: MessageCircle,
-};
-
-const SHAPE_GRID: ShapeSubType[][] = [
-  [ShapeSubType.Rect, ShapeSubType.RoundedRect, ShapeSubType.Circle, ShapeSubType.Diamond, ShapeSubType.Triangle, ShapeSubType.Star],
-  [ShapeSubType.Hexagon, ShapeSubType.Pentagon, ShapeSubType.Octagon, ShapeSubType.Parallelogram, ShapeSubType.Cylinder, ShapeSubType.Heart],
-  [ShapeSubType.ArrowRight, ShapeSubType.ArrowUp, ShapeSubType.Cloud, ShapeSubType.ChatBubble],
-];
-
-const TEXT_COLORS = [
-  '#000000', '#374151', '#8b5cf6', '#3b82f6', '#16a34a', '#ca8a04', '#ea580c', '#dc2626', '#ec4899',
-];
-
-const BG_COLORS = [
-  'transparent', '#ffffff', '#f5f5f5',
-  '#e8dff5', '#dbeafe', '#d1fae5', '#fef3c7', '#fed7aa', '#fce7f3',
-  '#000000', '#374151', '#9ca3af',
-  '#8b5cf6', '#3b82f6', '#1e40af', '#16a34a', '#ca8a04', '#dc2626',
-];
-
-let attachedCanvas: fabric.Canvas | null = null;
-
-function updatePosition() {
-  const canvas = store.getCanvas();
-  if (!canvas) { visible.value = false; return; }
-  const active = canvas.getActiveObject();
-  if (!active) { visible.value = false; return; }
-
-  const bound = active.getBoundingRect();
-  const el = canvas.lowerCanvasEl ?? canvas.upperCanvasEl;
-  const canvasH = el?.clientHeight ?? 800;
-  const canvasW = el?.clientWidth ?? 1200;
-  const TOOLBAR_H = 44;
-  const GAP = 28;
-
-  posX.value = bound.left + bound.width / 2;
-  if (posX.value < 200) posX.value = 200;
-  if (posX.value > canvasW - 20) posX.value = canvasW - 20;
-
-  const objCenterY = bound.top + bound.height / 2;
-  const isUpper = objCenterY < canvasH / 2;
-
-  if (isUpper) {
-    posY.value = bound.top + bound.height + GAP;
-    popPlacement.value = 'bottom';
-    if (posY.value > canvasH - TOOLBAR_H - 10) {
-      posY.value = canvasH - TOOLBAR_H - 10;
-    }
-  } else {
-    posY.value = bound.top - GAP - TOOLBAR_H;
-    popPlacement.value = 'top';
-    if (posY.value < 10) posY.value = 10;
-  }
-
-  visible.value = true;
-}
-
-function detectShapeType(obj: fabric.FabricObject): ShapeSubType | null {
-  if ((obj as any).shapeSubType) return (obj as any).shapeSubType;
-  if (obj instanceof fabric.Rect) {
-    return (obj as any).rx > 0 ? ShapeSubType.RoundedRect : ShapeSubType.Rect;
-  }
-  if (obj instanceof fabric.Ellipse) return ShapeSubType.Circle;
-  if (obj instanceof fabric.Triangle) return ShapeSubType.Triangle;
-  if (obj instanceof fabric.Polygon) return ShapeSubType.Diamond;
-  return null;
-}
-
-function matchDashKey(arr: any): string {
-  if (!arr || !Array.isArray(arr) || arr.length === 0) return 'solid';
-  if (arr[0] >= 6) return 'dashed';
-  if (arr[0] <= 3) return 'dotted';
-  return 'dashed';
-}
-
-function syncFromSelection() {
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  const active = canvas.getActiveObject();
-  if (!active) return;
-
-  const objects = canvas.getActiveObjects();
-  isMultiSelect.value = objects.length > 1;
-
-  const primary = objects[0]!;
-  const styleTarget = ShapeTool.getShapeChild(primary);
-  localFill.value = (styleTarget.fill as string) ?? 'transparent';
-  localStroke.value = (styleTarget.stroke as string) ?? '#1e1e1e';
-  localStrokeWidth.value = styleTarget.strokeWidth ?? 2;
-  const noStroke = styleTarget.strokeWidth === 0
-    || !styleTarget.stroke
-    || styleTarget.stroke === 'transparent';
-  localStrokeDashKey.value = noStroke ? 'none' : matchDashKey(styleTarget.strokeDashArray);
-  const opacityPct = Math.round((primary.opacity ?? 1) * 100);
-  localFillOpacity.value = opacityPct;
-
-  const isImage = primary instanceof fabric.FabricImage;
-  hasFill.value = !isImage;
-  hasStroke.value = !isImage;
-
-  isTextObject.value = primary instanceof fabric.IText || primary instanceof fabric.Textbox;
-
-  if (isTextObject.value) {
-    localFontSize.value = (primary as any).fontSize ?? 14;
-    localTextColor.value = (primary.fill as string) ?? '#000000';
-    isConnectorLabelSelection.value = !!(primary as any).isConnectorLabel;
-    if (isConnectorLabelSelection.value) {
-      localTextBgColor.value = store.getCanvasSolidBackgroundColor();
-    } else {
-      const bgc = (primary as any).textBackgroundColor;
-      localTextBgColor.value = bgc || 'transparent';
-    }
-  } else {
-    isConnectorLabelSelection.value = false;
-  }
-
-  currentShapeType.value = isMultiSelect.value ? null : detectShapeType(primary);
-  const allSelectedAreText = objects.every(
-    (o) => o instanceof fabric.IText || o instanceof fabric.Textbox,
-  );
-  isTextOnlySelection.value = Boolean(
-    isTextObject.value
-      && !currentShapeType.value
-      && (!isMultiSelect.value || allSelectedAreText),
-  );
-}
-
-function onSelectionChange() {
-  if (store.isReadonly) {
-    visible.value = false;
-    return;
-  }
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  const active = canvas.getActiveObject();
-  if (active && (active as any).isDynamicConnector) {
-    visible.value = false;
-    return;
-  }
-  syncFromSelection();
-  updatePosition();
-}
-
-function onSelectionClear() {
-  visible.value = false;
-}
-
-function onObjectTransform() {
-  if (visible.value) updatePosition();
-}
-
-function attachEvents() {
-  const canvas = store.getCanvas();
-  if (!canvas || canvas === attachedCanvas) return;
-  attachedCanvas = canvas;
-  canvas.on('selection:created', onSelectionChange);
-  canvas.on('selection:updated', onSelectionChange);
-  canvas.on('selection:cleared', onSelectionClear);
-  canvas.on('object:moving', onObjectTransform);
-  canvas.on('object:scaling', onObjectTransform);
-  canvas.on('object:rotating', onObjectTransform);
-}
-
-function detachEvents() {
-  if (!attachedCanvas) return;
-  attachedCanvas.off('selection:created', onSelectionChange);
-  attachedCanvas.off('selection:updated', onSelectionChange);
-  attachedCanvas.off('selection:cleared', onSelectionClear);
-  attachedCanvas.off('object:moving', onObjectTransform);
-  attachedCanvas.off('object:scaling', onObjectTransform);
-  attachedCanvas.off('object:rotating', onObjectTransform);
-  attachedCanvas = null;
-}
-
-watch(() => store.isCanvasReady, (ready) => {
-  if (ready) attachEvents();
-}, { immediate: true });
-
-watch(() => store.viewport, () => {
-  if (visible.value) updatePosition();
-}, { deep: true });
-
-watch(() => store.selectionVersion, () => {
-  if (visible.value) syncFromSelection();
-});
-
-watch(backgroundSolidColor, () => {
-  if (visible.value && isConnectorLabelSelection.value) {
-    localTextBgColor.value = store.getCanvasSolidBackgroundColor();
-  }
-});
-
-onBeforeUnmount(() => {
-  detachEvents();
-});
-
-// --- Handlers ---
-
-function handleShapeChange(type: ShapeSubType) {
-  store.changeShapeType(type);
-  currentShapeType.value = type;
-  shapePopVisible.value = false;
-}
-
-function handleFillColor(color: string) {
-  localFill.value = color;
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of canvas.getActiveObjects()) {
-    ShapeTool.getShapeChild(obj).set('fill', color);
-  }
-  canvas.requestRenderAll();
-}
-
-function handleFillCustomColor(color: string | null) {
-  if (color) handleFillColor(color);
-}
-
-function handleFillOpacity(val: number | number[]) {
-  const v = Array.isArray(val) ? val[0]! : val;
-  localFillOpacity.value = v;
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of canvas.getActiveObjects()) {
-    obj.set('opacity', v / 100);
-  }
-  canvas.requestRenderAll();
-}
-
-function handleStrokeDash(key: string, dash: number[] | null) {
-  localStrokeDashKey.value = key;
-  if (key === 'none') {
-    const canvas = store.getCanvas();
-    if (!canvas) return;
-    for (const obj of canvas.getActiveObjects()) {
-      ShapeTool.getShapeChild(obj).set({ stroke: 'transparent', strokeWidth: 0 });
-    }
-    canvas.requestRenderAll();
-  } else {
-    store.setStrokeDash(dash);
-    if (localStrokeWidth.value === 0) {
-      handleStrokeWidth(2);
-    }
-    const canvas = store.getCanvas();
-    if (canvas) {
-      for (const obj of canvas.getActiveObjects()) {
-        const target = ShapeTool.getShapeChild(obj);
-        if (!target.stroke || target.stroke === 'transparent') {
-          target.set('stroke', localStroke.value);
-        }
-      }
-      canvas.requestRenderAll();
-    }
-  }
-}
-
-function handleStrokeWidth(w: number) {
-  localStrokeWidth.value = w;
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of canvas.getActiveObjects()) {
-    ShapeTool.getShapeChild(obj).set('strokeWidth', w);
-  }
-  canvas.requestRenderAll();
-}
-
-function handleStrokeColor(color: string) {
-  localStroke.value = color;
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of canvas.getActiveObjects()) {
-    ShapeTool.getShapeChild(obj).set('stroke', color);
-  }
-  canvas.requestRenderAll();
-}
-
-function handleStrokeCustomColor(color: string | null) {
-  if (color) handleStrokeColor(color);
-}
-
-function applyFontSizeToTextObject(obj: fabric.FabricObject, size: number) {
-  if (!(obj instanceof fabric.IText) && !(obj instanceof fabric.Textbox)) return;
-  const textObj = obj as fabric.IText;
-  textObj.set('fontSize', size);
-  const len = textObj.text?.length ?? 0;
-  if (len > 0) {
-    textObj.setSelectionStyles({ fontSize: size }, 0, len);
-  }
-  textObj.initDimensions?.();
-  textObj.setCoords();
-}
-
-function handleFontSize(size: number) {
-  localFontSize.value = size;
-  fontSizePopVisible.value = false;
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of canvas.getActiveObjects()) {
-    applyFontSizeToTextObject(obj, size);
-  }
-  canvas.requestRenderAll();
-}
-
-function handleTextColor(color: string) {
-  localTextColor.value = color;
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  for (const obj of canvas.getActiveObjects()) {
-    if (obj instanceof fabric.IText || obj instanceof fabric.Textbox) {
-      obj.set('fill', color);
-    }
-  }
-  canvas.requestRenderAll();
-}
-
-function handleBgColor(color: string) {
-  const canvas = store.getCanvas();
-  if (!canvas) return;
-  if (canvas.getActiveObjects().some((o) => (o as any).isConnectorLabel)) {
-    store.syncConnectorLabelBackgroundColors();
-    localTextBgColor.value = store.getCanvasSolidBackgroundColor();
-    canvas.requestRenderAll();
-    return;
-  }
-  localTextBgColor.value = color;
-  for (const obj of canvas.getActiveObjects()) {
-    if (obj instanceof fabric.IText || obj instanceof fabric.Textbox) {
-      (obj as any).textBackgroundColor = color === 'transparent' ? '' : color;
-    }
-  }
-  canvas.requestRenderAll();
-}
-
-function handleTextCustomColor(color: string | null) {
-  if (color) handleTextColor(color);
-}
-
-function handleBgCustomColor(color: string | null) {
-  const canvas = store.getCanvas();
-  if (canvas?.getActiveObjects().some((o) => (o as any).isConnectorLabel)) {
-    store.syncConnectorLabelBackgroundColors();
-    localTextBgColor.value = store.getCanvasSolidBackgroundColor();
-    canvas.requestRenderAll();
-    return;
-  }
-  if (color === null || color === undefined) return;
-  const normalized =
-    color === 'rgba(0, 0, 0, 0)' || color === 'rgba(0,0,0,0)' ? 'transparent' : color;
-  handleBgColor(normalized);
-}
-
-function isColorActive(color: string, current: string): boolean {
-  if (color === 'transparent') return current === 'transparent' || !current;
-  return current?.toLowerCase() === color.toLowerCase();
-}
-</script>
-
-<template>
-  <div
-    v-if="visible"
-    class="sel-tb"
-    :style="{ left: `${posX}px`, top: `${posY}px` }"
-    @mousedown.prevent.stop
-    @pointerdown.prevent.stop
-  >
-    <!-- Shape type change -->
-    <ElPopover
-      v-if="currentShapeType && !isMultiSelect"
-      v-model:visible="shapePopVisible"
-      trigger="click"
-      :width="280"
-      :placement="popPlacement"
-      :offset="8"
-      :teleported="true"
-      popper-class="sel-tb-popper"
-    >
-      <template #reference>
-        <button class="sel-tb__btn">
-          <component :is="SHAPE_ICON_MAP[currentShapeType]" class="sel-tb__icon" />
-          <ChevronDown class="sel-tb__arrow" />
-        </button>
-      </template>
-      <div class="sel-tb__panel">
-        <div class="sel-tb__panel-title">{{ $t('whiteboard.toolbar.changeShape') }}</div>
-        <div v-for="(row, ri) in SHAPE_GRID" :key="ri" class="sel-tb__shape-row">
-          <button
-            v-for="st in row"
-            :key="st"
-            class="sel-tb__shape-btn"
-            :class="{ 'sel-tb__shape-btn--active': st === currentShapeType }"
-            @click="handleShapeChange(st)"
-          >
-            <component :is="SHAPE_ICON_MAP[st]" class="sel-tb__shape-icon" />
-          </button>
-        </div>
-      </div>
-    </ElPopover>
-
-    <!-- Fill color（形状/图片等；纯文本对象用下方「文字」面板，避免与文字颜色重复） -->
-    <ElPopover v-if="hasFill && !isTextOnlySelection" trigger="click" :width="300" :placement="popPlacement" :offset="8" :teleported="true" popper-class="sel-tb-popper">
-      <template #reference>
-        <button class="sel-tb__btn">
-          <span class="sel-tb__color-swatch" :style="{ background: localFill === 'transparent' ? 'repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 50%) 50% / 8px 8px' : localFill }" />
-          <ChevronDown class="sel-tb__arrow" />
-        </button>
-      </template>
-      <div class="sel-tb__panel">
-        <div class="sel-tb__color-grid">
-          <button
-            v-for="c in TOOLBAR_FILL_COLORS"
-            :key="c"
-            class="sel-tb__color-btn"
-            :class="{ 'sel-tb__color-btn--active': isColorActive(c, localFill) }"
-            @click="handleFillColor(c)"
-          >
-            <span
-              v-if="c === 'transparent'"
-              class="sel-tb__color-dot sel-tb__color-dot--transparent"
-            />
-            <span v-else class="sel-tb__color-dot" :style="{ background: c }" />
-          </button>
-        </div>
-        <div class="sel-tb__custom-color">
-          <ElColorPicker :model-value="localFill" size="small" @change="handleFillCustomColor" />
-        </div>
-        <div class="sel-tb__slider-row">
-          <span class="sel-tb__slider-label">{{ $t('whiteboard.property.opacity') }}</span>
-          <span class="sel-tb__slider-val">{{ localFillOpacity }}%</span>
-        </div>
-        <ElSlider
-          :model-value="localFillOpacity"
-          :min="0"
-          :max="100"
-          :step="1"
-          class="sel-tb__slider"
-          @update:model-value="handleFillOpacity"
-        />
-      </div>
-    </ElPopover>
-
-    <!-- Stroke（纯文本对象不显示：文本无矢量描边编辑入口，避免与文字样式重复） -->
-    <ElPopover v-if="hasStroke && !isTextOnlySelection" trigger="click" :width="300" :placement="popPlacement" :offset="8" :teleported="true" popper-class="sel-tb-popper">
-      <template #reference>
-        <button class="sel-tb__btn">
-          <span class="sel-tb__stroke-swatch">
-            <span class="sel-tb__stroke-ring" :style="{ borderColor: localStrokeDashKey === 'none' ? '#d1d5db' : localStroke }" />
-          </span>
-          <ChevronDown class="sel-tb__arrow" />
-        </button>
-      </template>
-      <div class="sel-tb__panel">
-        <div class="sel-tb__panel-title">{{ $t('whiteboard.toolbar.borderStyle') }}</div>
-        <!-- Dash style -->
-        <div class="sel-tb__dash-row">
-          <button
-            v-for="opt in STROKE_DASH_OPTIONS"
-            :key="opt.key"
-            class="sel-tb__dash-btn"
-            :class="{ 'sel-tb__dash-btn--active': localStrokeDashKey === opt.key }"
-            @click="handleStrokeDash(opt.key, opt.dash)"
-          >
-            <Ban v-if="opt.key === 'none'" class="sel-tb__dash-icon" />
-            <span v-else class="sel-tb__dash-line" :class="`sel-tb__dash-line--${opt.key}`" />
-          </button>
-        </div>
-        <!-- Stroke width -->
-        <div class="sel-tb__width-row">
-          <button
-            v-for="w in STROKE_WIDTH_PRESETS"
-            :key="w"
-            class="sel-tb__width-btn"
-            :class="{ 'sel-tb__width-btn--active': localStrokeWidth === w }"
-            @click="handleStrokeWidth(w)"
-          >
-            <span class="sel-tb__width-dot" :style="{ width: `${w + 4}px`, height: `${w + 4}px` }" />
-          </button>
-        </div>
-        <!-- Stroke color -->
-        <div class="sel-tb__color-grid">
-          <button
-            v-for="c in TOOLBAR_FILL_COLORS.filter(cc => cc !== 'transparent')"
-            :key="c"
-            class="sel-tb__color-btn"
-            :class="{ 'sel-tb__color-btn--active': isColorActive(c, localStroke) }"
-            @click="handleStrokeColor(c)"
-          >
-            <span class="sel-tb__color-dot" :style="{ background: c }" />
-          </button>
-        </div>
-        <div class="sel-tb__custom-color">
-          <ElColorPicker :model-value="localStroke" size="small" @change="handleStrokeCustomColor" />
-        </div>
-      </div>
-    </ElPopover>
-
-    <template v-if="isTextObject">
-      <!-- Text color -->
-      <ElPopover trigger="click" :width="300" :placement="popPlacement" :offset="8" :teleported="true" popper-class="sel-tb-popper">
-        <template #reference>
-          <button class="sel-tb__btn sel-tb__btn--text-color">
-            <span class="sel-tb__text-a" :style="{ color: localTextColor }">A</span>
-            <ChevronDown class="sel-tb__arrow" />
-          </button>
-        </template>
-        <div class="sel-tb__panel">
-          <div class="sel-tb__panel-title">{{ $t('whiteboard.toolbar.textStyle') }}</div>
-          <div class="sel-tb__panel-title sel-tb__panel-title--sub">{{ $t('whiteboard.toolbar.textColor') }}</div>
-          <div class="sel-tb__text-color-row">
-            <button
-              v-for="c in TEXT_COLORS"
-              :key="c"
-              class="sel-tb__text-color-btn"
-              :class="{ 'sel-tb__text-color-btn--active': isColorActive(c, localTextColor) }"
-              @click="handleTextColor(c)"
-            >
-              <span class="sel-tb__text-a-swatch" :style="{ color: c }">A</span>
-            </button>
-          </div>
-          <div class="sel-tb__custom-color">
-            <ElColorPicker
-              :model-value="localTextColor"
-              size="small"
-              show-alpha
-              @change="handleTextCustomColor"
-            />
-          </div>
-          <template v-if="!isConnectorLabelSelection">
-            <div class="sel-tb__panel-title sel-tb__panel-title--sub">{{ $t('whiteboard.toolbar.bgColor') }}</div>
-            <div class="sel-tb__color-grid">
-              <button
-                v-for="c in BG_COLORS"
-                :key="c"
-                class="sel-tb__color-btn"
-                :class="{ 'sel-tb__color-btn--active': isColorActive(c, localTextBgColor) }"
-                @click="handleBgColor(c)"
-              >
-                <span
-                  v-if="c === 'transparent'"
-                  class="sel-tb__color-dot sel-tb__color-dot--transparent"
-                />
-                <span v-else class="sel-tb__color-dot" :style="{ background: c }" />
-              </button>
-            </div>
-            <div class="sel-tb__custom-color">
-              <ElColorPicker
-                :model-value="localTextBgColor === 'transparent' ? 'rgba(0, 0, 0, 0)' : localTextBgColor"
-                size="small"
-                show-alpha
-                @change="handleBgCustomColor"
-              />
-            </div>
-          </template>
-          <template v-if="isTextOnlySelection">
-            <div class="sel-tb__slider-row sel-tb__slider-row--text-opacity">
-              <span class="sel-tb__slider-label">{{ $t('whiteboard.property.opacity') }}</span>
-              <span class="sel-tb__slider-val">{{ localFillOpacity }}%</span>
-            </div>
-            <ElSlider
-              :model-value="localFillOpacity"
-              :min="0"
-              :max="100"
-              :step="1"
-              class="sel-tb__slider"
-              @update:model-value="handleFillOpacity"
-            />
-          </template>
-        </div>
-      </ElPopover>
-
-      <!-- Font size -->
-      <ElPopover v-model:visible="fontSizePopVisible" trigger="click" :width="100" :placement="popPlacement" :offset="8" :teleported="true" popper-class="sel-tb-popper">
-        <template #reference>
-          <button class="sel-tb__btn sel-tb__btn--font-size">
-            <span class="sel-tb__font-val">{{ localFontSize }}</span>
-            <ChevronDown class="sel-tb__arrow" />
-          </button>
-        </template>
-        <div class="sel-tb__panel sel-tb__font-list">
-          <button
-            v-for="s in FONT_SIZES"
-            :key="s"
-            class="sel-tb__font-item"
-            :class="{ 'sel-tb__font-item--active': s === localFontSize }"
-            @click="handleFontSize(s)"
-          >
-            <span>{{ s }}</span>
-            <Check v-if="s === localFontSize" class="sel-tb__font-check" />
-          </button>
-        </div>
-      </ElPopover>
-    </template>
-
-    <div class="sel-tb__sep" />
-
-    <!-- More -->
-    <ElPopover trigger="click" :width="160" :placement="popPlacement" :offset="8" :teleported="true" popper-class="sel-tb-popper">
-      <template #reference>
-        <button class="sel-tb__btn">
-          <MoreHorizontal class="sel-tb__icon" />
-        </button>
-      </template>
-      <div class="sel-tb__panel sel-tb__more-list">
-        <button class="sel-tb__more-item" @click="store.copyAsImage()">
-          {{ $t('whiteboard.menu.copyAsImage') }}
-        </button>
-        <div class="sel-tb__more-divider" />
-        <button class="sel-tb__more-item" @click="store.flipSelected('horizontal')">
-          {{ $t('whiteboard.menu.flipH') }}
-        </button>
-        <button class="sel-tb__more-item" @click="store.flipSelected('vertical')">
-          {{ $t('whiteboard.menu.flipV') }}
-        </button>
-        <button class="sel-tb__more-item" @click="store.rotateSelected(90)">
-          {{ $t('whiteboard.menu.rotateCW') }}
-        </button>
-        <button class="sel-tb__more-item" @click="store.rotateSelected(-90)">
-          {{ $t('whiteboard.menu.rotateCCW') }}
-        </button>
-        <div class="sel-tb__more-divider" />
-        <template v-if="isMultiSelect">
-          <button class="sel-tb__more-item" @click="store.groupSelected()">
-            {{ $t('whiteboard.menu.group') }}
-          </button>
-        </template>
-        <button class="sel-tb__more-item sel-tb__more-item--danger" @click="store.deleteSelected()">
-          {{ $t('whiteboard.menu.delete') }}
-        </button>
-      </div>
-    </ElPopover>
-  </div>
-</template>
-
-<style scoped>
-.sel-tb {
-  position: absolute;
-  z-index: 15;
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px 6px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: 0 2px 12px rgb(0 0 0 / 8%), 0 0 1px rgb(0 0 0 / 8%);
-  transform: translateX(-50%);
-  pointer-events: auto;
-}
-
-.sel-tb__btn {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px 6px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--el-text-color-primary);
-  transition: background 0.15s;
-}
-
-.sel-tb__btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.sel-tb__icon {
-  width: 18px;
-  height: 18px;
-}
-
-.sel-tb__arrow {
-  width: 12px;
-  height: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.sel-tb__sep {
-  width: 1px;
-  height: 20px;
-  margin: 0 2px;
-  background: var(--el-border-color-lighter);
-}
-
-/* Color swatch */
-.sel-tb__color-swatch {
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 1px solid var(--el-border-color);
-}
-
-/* Stroke swatch */
-.sel-tb__stroke-swatch {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-}
-
-.sel-tb__stroke-ring {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  border: 2.5px solid;
-}
-
-/* Panel */
-.sel-tb__panel {
-  padding: 4px 0;
-}
-
-.sel-tb__panel-title {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  padding: 4px 8px 8px;
-}
-
-.sel-tb__panel-title--sub {
-  padding-top: 8px;
-  padding-bottom: 4px;
-}
-
-.sel-tb__slider-row--text-opacity {
-  margin-top: 8px;
-}
-
-/* Shape grid */
-.sel-tb__shape-row {
-  display: flex;
-  gap: 4px;
-  padding: 2px 8px;
-}
-
-.sel-tb__shape-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--el-text-color-primary);
-  transition: background 0.15s;
-}
-
-.sel-tb__shape-btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.sel-tb__shape-btn--active {
-  background: var(--el-color-primary-light-9);
-  color: var(--el-color-primary);
-}
-
-.sel-tb__shape-icon {
-  width: 22px;
-  height: 22px;
-}
-
-/* Color grid */
-.sel-tb__color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 4px 8px;
-}
-
-.sel-tb__color-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border: none;
-  border-radius: 50%;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-}
-
-.sel-tb__color-btn--active {
-  outline: 2px solid var(--el-color-primary);
-  outline-offset: 1px;
-}
-
-.sel-tb__color-dot {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-  border: 1px solid var(--el-border-color-light);
-}
-
-.sel-tb__color-dot--transparent {
-  background: repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 50%) 50% / 6px 6px;
-  position: relative;
-}
-
-.sel-tb__color-dot--transparent::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: -1px;
-  right: -1px;
-  height: 1.5px;
-  background: #ef4444;
-  transform: rotate(-45deg);
-}
-
-.sel-tb__custom-color {
-  padding: 8px 8px 4px;
-}
-
-/* Slider */
-.sel-tb__slider-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 8px 0;
-}
-
-.sel-tb__slider-label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.sel-tb__slider-val {
-  font-size: 12px;
-  color: var(--el-text-color-primary);
-}
-
-.sel-tb__slider {
-  padding: 0 8px;
-}
-
-/* Dash style row */
-.sel-tb__dash-row {
-  display: flex;
-  gap: 4px;
-  padding: 4px 8px 8px;
-}
-
-.sel-tb__dash-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  height: 32px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  color: var(--el-text-color-primary);
-  transition: all 0.15s;
-}
-
-.sel-tb__dash-btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.sel-tb__dash-btn--active {
-  background: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary);
-}
-
-.sel-tb__dash-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.sel-tb__dash-line {
-  display: inline-block;
-  width: 24px;
-  height: 2px;
-  background: currentColor;
-}
-
-.sel-tb__dash-line--dashed {
-  background: none;
-  border-top: 2px dashed currentColor;
-}
-
-.sel-tb__dash-line--dotted {
-  background: none;
-  border-top: 2px dotted currentColor;
-}
-
-/* Width row */
-.sel-tb__width-row {
-  display: flex;
-  gap: 8px;
-  padding: 4px 8px 12px;
-}
-
-.sel-tb__width-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 28px;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 6px;
-  background: transparent;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.sel-tb__width-btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.sel-tb__width-btn--active {
-  background: var(--el-color-primary-light-9);
-  border-color: var(--el-color-primary);
-}
-
-.sel-tb__width-dot {
-  display: inline-block;
-  border-radius: 50%;
-  background: var(--el-text-color-primary);
-}
-
-/* Text color */
-.sel-tb__btn--text-color {
-  padding: 4px 4px 4px 6px;
-}
-
-.sel-tb__text-a {
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 1;
-  border-bottom: 3px solid currentColor;
-  padding-bottom: 1px;
-}
-
-.sel-tb__text-color-row {
-  display: flex;
-  gap: 4px;
-  padding: 4px 8px;
-  flex-wrap: wrap;
-}
-
-.sel-tb__text-color-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: transparent;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.sel-tb__text-color-btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.sel-tb__text-color-btn--active {
-  border-color: var(--el-color-primary);
-}
-
-.sel-tb__text-a-swatch {
-  font-weight: 700;
-  font-size: 16px;
-}
-
-/* Font size */
-.sel-tb__btn--font-size {
-  min-width: 40px;
-  justify-content: center;
-}
-
-.sel-tb__font-val {
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.sel-tb__font-list {
-  padding: 4px 0;
-}
-
-.sel-tb__font-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 6px 12px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  font-size: 14px;
-  color: var(--el-text-color-primary);
-  transition: background 0.15s;
-}
-
-.sel-tb__font-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.sel-tb__font-item--active {
-  color: var(--el-color-primary);
-}
-
-.sel-tb__font-check {
-  width: 14px;
-  height: 14px;
-  color: var(--el-color-primary);
-}
-
-/* More list */
-.sel-tb__more-list {
-  padding: 4px 0;
-}
-
-.sel-tb__more-item {
-  display: block;
-  width: 100%;
-  padding: 8px 12px;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  font-size: 13px;
-  color: var(--el-text-color-primary);
-  transition: background 0.15s;
-}
-
-.sel-tb__more-item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.sel-tb__more-item--danger {
-  color: var(--el-color-danger);
-}
-
-.sel-tb__more-divider {
-  height: 1px;
-  margin: 4px 8px;
-  background: var(--el-border-color-lighter);
-}
-</style>
-
-<style>
-.sel-tb-popper {
-  z-index: 9999 !important;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/UndoRedoControls.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/UndoRedoControls.vue
deleted file mode 100644
index 37afe35..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/UndoRedoControls.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { Redo2, Undo2 } from '@vben/icons';
-import { $t } from '@vben/locales';
-import { ElButton, ElTooltip } from 'element-plus';
-
-import { useWhiteboardStore } from '../store/whiteboard-store';
-
-const store = useWhiteboardStore();
-</script>
-
-<template>
-  <div class="wb-history-controls">
-    <ElTooltip :content="$t('whiteboard.action.undo')" placement="top">
-      <ElButton
-        size="small"
-        class="wb-history-controls__btn"
-        :disabled="!store.canUndo"
-        @click="store.undo()"
-      >
-        <Undo2 class="wb-history-controls__icon" />
-      </ElButton>
-    </ElTooltip>
-    <ElTooltip :content="$t('whiteboard.action.redo')" placement="top">
-      <ElButton
-        size="small"
-        class="wb-history-controls__btn"
-        :disabled="!store.canRedo"
-        @click="store.redo()"
-      >
-        <Redo2 class="wb-history-controls__icon" />
-      </ElButton>
-    </ElTooltip>
-  </div>
-</template>
-
-<style scoped>
-.wb-history-controls {
-  display: flex;
-  gap: 2px;
-  align-items: center;
-  padding: 4px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: var(--el-box-shadow-light);
-}
-
-.wb-history-controls__btn {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-}
-
-.wb-history-controls__icon {
-  width: 14px;
-  height: 14px;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/WhiteboardCanvas.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/WhiteboardCanvas.vue
deleted file mode 100644
index b228622..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/WhiteboardCanvas.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-
-import { useWhiteboardStore } from '../store/whiteboard-store';
-
-const containerRef = ref<HTMLElement>();
-const canvasRef = ref<HTMLCanvasElement>();
-const store = useWhiteboardStore();
-
-onMounted(() => {
-  if (canvasRef.value && containerRef.value) {
-    store.initCanvas(canvasRef.value, containerRef.value);
-  }
-});
-</script>
-
-<template>
-  <div ref="containerRef" class="wb-canvas-container">
-    <canvas ref="canvasRef" />
-  </div>
-</template>
-
-<style scoped>
-.wb-canvas-container {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/WhiteboardHeader.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/WhiteboardHeader.vue
deleted file mode 100644
index 6d8da9c..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/WhiteboardHeader.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<script setup lang="ts">
-import { Check, Menu } from '@vben/icons';
-import { $t } from '@vben/locales';
-import {
-  ElButton,
-  ElButtonGroup,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElTooltip,
-} from 'element-plus';
-
-import { useWhiteboardStore } from '../store/whiteboard-store';
-import { BackgroundType } from '../types';
-
-const store = useWhiteboardStore();
-
-const emit = defineEmits<{
-  save: [];
-  export: [format: string];
-}>();
-
-const BACKGROUND_ORDER: BackgroundType[] = [
-  BackgroundType.None,
-  BackgroundType.Dots,
-  BackgroundType.Grid,
-  BackgroundType.Lines,
-];
-
-function handleMenuCommand(command: string) {
-  switch (command) {
-    case 'zoomToFit':
-      store.zoomToFit();
-      break;
-    case 'export-png':
-      emit('export', 'png');
-      break;
-    case 'export-svg':
-      emit('export', 'svg');
-      break;
-    default:
-      if (command.startsWith('bg-')) {
-        const key = command.slice(3) as BackgroundType;
-        if (BACKGROUND_ORDER.includes(key)) {
-          store.setBackground(key);
-        }
-      }
-      break;
-  }
-}
-
-function handleSave() {
-  emit('save');
-}
-</script>
-
-<template>
-  <div class="wb-header">
-    <ElButtonGroup class="wb-header__actions">
-      <ElDropdown trigger="click" @command="handleMenuCommand">
-        <span class="wb-header__dropdown-trigger">
-          <ElTooltip :content="$t('whiteboard.action.menu')" placement="bottom">
-            <ElButton size="small" class="wb-header__btn wb-header__btn--menu">
-              <Menu class="wb-header__menu-icon" />
-            </ElButton>
-          </ElTooltip>
-        </span>
-        <template #dropdown>
-          <ElDropdownMenu>
-            <ElDropdownItem command="zoomToFit">
-              {{ $t('whiteboard.action.zoomToFit') }}
-            </ElDropdownItem>
-            <ElDropdownItem divided disabled class="wb-header__section-label">
-              {{ $t('whiteboard.action.background') }}
-            </ElDropdownItem>
-            <ElDropdownItem
-              v-for="bg in BACKGROUND_ORDER"
-              :key="bg"
-              :command="`bg-${bg}`"
-              class="wb-header__bg-item"
-            >
-              <span class="wb-header__bg-item-inner">
-                <span>{{ $t(`whiteboard.background.${bg}`) }}</span>
-                <Check
-                  v-if="store.backgroundType === bg"
-                  class="wb-header__check-icon"
-                />
-              </span>
-            </ElDropdownItem>
-            <ElDropdownItem divided command="export-png">
-              {{ $t('whiteboard.action.exportPng') }}
-            </ElDropdownItem>
-            <ElDropdownItem command="export-svg">
-              {{ $t('whiteboard.action.exportSvg') }}
-            </ElDropdownItem>
-          </ElDropdownMenu>
-        </template>
-      </ElDropdown>
-
-      <ElButton
-        type="primary"
-        size="small"
-        class="wb-header__btn wb-header__btn--save"
-        @click="handleSave"
-      >
-        {{ $t('whiteboard.action.save') }}
-      </ElButton>
-    </ElButtonGroup>
-  </div>
-</template>
-
-<style scoped>
-.wb-header {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  z-index: 10;
-  padding: 4px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--el-border-radius-base);
-  box-shadow: var(--el-box-shadow-light);
-}
-
-.wb-header__actions {
-  display: flex;
-}
-
-.wb-header__actions :deep(.el-button) {
-  height: 32px;
-  padding: 0 14px;
-  font-size: 13px;
-  line-height: 1;
-}
-
-.wb-header__actions :deep(.el-button + .el-button) {
-  margin-left: 0;
-}
-
-.wb-header__dropdown-trigger {
-  display: inline-flex;
-  outline: none;
-}
-
-.wb-header__actions :deep(.wb-header__btn--menu.el-button) {
-  min-width: 32px;
-  padding: 0 10px;
-}
-
-.wb-header__btn--save {
-  min-width: 64px;
-}
-
-.wb-header__menu-icon {
-  width: 16px;
-  height: 16px;
-}
-
-:deep(.wb-header__section-label) {
-  padding-top: 4px;
-  padding-bottom: 2px;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--el-text-color-secondary);
-  pointer-events: none;
-  background: transparent !important;
-}
-
-:deep(.wb-header__section-label.is-disabled) {
-  opacity: 1;
-}
-
-.wb-header__bg-item-inner {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  justify-content: space-between;
-  min-width: 140px;
-}
-
-.wb-header__check-icon {
-  flex-shrink: 0;
-  width: 14px;
-  height: 14px;
-  color: var(--el-color-primary);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/WhiteboardToolbar.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/WhiteboardToolbar.vue
deleted file mode 100644
index b71d842..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/WhiteboardToolbar.vue
+++ /dev/null
@@ -1,520 +0,0 @@
-<script setup lang="ts">
-import type { Component } from 'vue';
-
-import { computed, onBeforeUnmount, ref } from 'vue';
-
-import {
-  ArrowBigRight,
-  ArrowBigUp,
-  ArrowRight,
-  Circle,
-  Cloud,
-  Cylinder,
-  Diamond,
-  Eraser,
-  Hand,
-  Heart,
-  Hexagon,
-  Highlighter,
-  Image,
-  MessageCircle,
-  Minus,
-  MousePointer2,
-  Octagon,
-  Parentheses,
-  Pen,
-  Pentagon,
-  RectangleHorizontal,
-  Spline,
-  Square,
-  Star,
-  StickyNote,
-  Triangle,
-  Type,
-} from '@vben/icons';
-import { $t } from '@vben/locales';
-import { ElDivider, ElTooltip } from 'element-plus';
-
-import { TOOL_CONFIG } from '../constants';
-import { useWhiteboardStore } from '../store/whiteboard-store';
-import { ConnectorSubType, ShapeSubType, ToolType } from '../types';
-
-const store = useWhiteboardStore();
-
-const showShapeDropdown = ref(false);
-const showConnectorDropdown = ref(false);
-
-const CONNECTOR_SUBTYPES = [
-  { key: ConnectorSubType.StraightLine, icon: Minus, label: 'whiteboard.connector.straightLine' },
-  { key: ConnectorSubType.StraightArrow, icon: ArrowRight, label: 'whiteboard.connector.straightArrow' },
-  { key: ConnectorSubType.ElbowConnector, icon: Spline, label: 'whiteboard.connector.elbowConnector' },
-];
-
-const currentConnectorIcon = computed(() => {
-  const found = CONNECTOR_SUBTYPES.find(ct => ct.key === store.currentConnectorSubType);
-  return found?.icon ?? Spline;
-});
-
-const ICON_MAP: Record<string, Component> = {
-  MousePointer2,
-  Hand,
-  Pen,
-  Highlighter,
-  Eraser,
-  Square,
-  Minus,
-  ArrowRight,
-  Spline,
-  Type,
-  StickyNote,
-  Image,
-  Circle,
-  Diamond,
-  Triangle,
-  Star,
-  Hexagon,
-  Pentagon,
-  Octagon,
-  Cylinder,
-  ArrowBigRight,
-  ArrowBigUp,
-  RectangleHorizontal,
-  Heart,
-  Cloud,
-  MessageCircle,
-  Parentheses,
-};
-
-const SHAPE_ICON_MAP: Record<ShapeSubType, Component> = {
-  [ShapeSubType.Rect]: Square,
-  [ShapeSubType.RoundedRect]: RectangleHorizontal,
-  [ShapeSubType.Circle]: Circle,
-  [ShapeSubType.Diamond]: Diamond,
-  [ShapeSubType.Triangle]: Triangle,
-  [ShapeSubType.Star]: Star,
-  [ShapeSubType.Hexagon]: Hexagon,
-  [ShapeSubType.Pentagon]: Pentagon,
-  [ShapeSubType.Octagon]: Octagon,
-  [ShapeSubType.Parallelogram]: Parentheses,
-  [ShapeSubType.Cylinder]: Cylinder,
-  [ShapeSubType.ArrowRight]: ArrowBigRight,
-  [ShapeSubType.ArrowUp]: ArrowBigUp,
-  [ShapeSubType.Heart]: Heart,
-  [ShapeSubType.Cloud]: Cloud,
-  [ShapeSubType.ChatBubble]: MessageCircle,
-};
-
-const SHAPE_GRID: ShapeSubType[][] = [
-  [ShapeSubType.Rect, ShapeSubType.RoundedRect, ShapeSubType.Circle, ShapeSubType.Diamond, ShapeSubType.Triangle, ShapeSubType.Star],
-  [ShapeSubType.Hexagon, ShapeSubType.Pentagon, ShapeSubType.Octagon, ShapeSubType.Parallelogram, ShapeSubType.Cylinder, ShapeSubType.Heart],
-  [ShapeSubType.ArrowRight, ShapeSubType.ArrowUp, ShapeSubType.Cloud, ShapeSubType.ChatBubble],
-];
-
-const SHAPE_LABELS: Record<ShapeSubType, string> = {
-  [ShapeSubType.Rect]: 'whiteboard.shape.rect',
-  [ShapeSubType.RoundedRect]: 'whiteboard.shape.roundedRect',
-  [ShapeSubType.Circle]: 'whiteboard.shape.circle',
-  [ShapeSubType.Diamond]: 'whiteboard.shape.diamond',
-  [ShapeSubType.Triangle]: 'whiteboard.shape.triangle',
-  [ShapeSubType.Star]: 'whiteboard.shape.star',
-  [ShapeSubType.Hexagon]: 'whiteboard.shape.hexagon',
-  [ShapeSubType.Pentagon]: 'whiteboard.shape.pentagon',
-  [ShapeSubType.Octagon]: 'whiteboard.shape.octagon',
-  [ShapeSubType.Parallelogram]: 'whiteboard.shape.parallelogram',
-  [ShapeSubType.Cylinder]: 'whiteboard.shape.cylinder',
-  [ShapeSubType.ArrowRight]: 'whiteboard.shape.arrowRight',
-  [ShapeSubType.ArrowUp]: 'whiteboard.shape.arrowUp',
-  [ShapeSubType.Heart]: 'whiteboard.shape.heart',
-  [ShapeSubType.Cloud]: 'whiteboard.shape.cloud',
-  [ShapeSubType.ChatBubble]: 'whiteboard.shape.chatBubble',
-};
-
-const mainTools: ToolType[] = [
-  ToolType.Select,
-  ToolType.Hand,
-  ToolType.Pen,
-  ToolType.Highlighter,
-  ToolType.Eraser,
-  ToolType.Shape,
-  ToolType.Connector,
-  ToolType.Text,
-  ToolType.StickyNote,
-  ToolType.Image,
-];
-
-const currentShapeIcon = computed(() => {
-  return SHAPE_ICON_MAP[store.currentShapeSubType] ?? Square;
-});
-
-function handleToolClick(type: ToolType) {
-  if (type === ToolType.Shape) {
-    showShapeDropdown.value = !showShapeDropdown.value;
-    showConnectorDropdown.value = false;
-    store.setTool(ToolType.Shape);
-    return;
-  }
-  if (type === ToolType.Connector) {
-    showConnectorDropdown.value = !showConnectorDropdown.value;
-    showShapeDropdown.value = false;
-    store.setTool(ToolType.Connector);
-    return;
-  }
-  showShapeDropdown.value = false;
-  showConnectorDropdown.value = false;
-  store.setTool(type);
-}
-
-function handleConnectorSelect(subType: ConnectorSubType) {
-  store.setConnectorSubType(subType);
-  showConnectorDropdown.value = false;
-}
-
-let wasDragging = false;
-
-function handleShapeSelect(subType: ShapeSubType) {
-  if (wasDragging) {
-    wasDragging = false;
-    return;
-  }
-  store.setShapeSubType(subType);
-  showShapeDropdown.value = false;
-  store.placeShapeOnCanvas(subType);
-}
-
-function getToolIcon(type: ToolType): Component {
-  if (type === ToolType.Shape) {
-    return currentShapeIcon.value;
-  }
-  if (type === ToolType.Connector) {
-    return currentConnectorIcon.value;
-  }
-  const iconName = TOOL_CONFIG[type]?.icon ?? 'Circle';
-  return ICON_MAP[iconName] ?? Circle;
-}
-
-function getToolLabel(type: ToolType): string {
-  const config = TOOL_CONFIG[type];
-  if (!config) return '';
-  const label = $t(config.label);
-  return config.shortcut ? `${label} (${config.shortcut})` : label;
-}
-
-// --- Drag to place shape on canvas ---
-const DRAG_THRESHOLD = 5;
-let dragState: {
-  subType: ShapeSubType;
-  startX: number;
-  startY: number;
-  isDragging: boolean;
-  previewCreated: boolean;
-} | null = null;
-
-function handleShapeMouseDown(e: MouseEvent, subType: ShapeSubType) {
-  dragState = {
-    subType,
-    startX: e.clientX,
-    startY: e.clientY,
-    isDragging: false,
-    previewCreated: false,
-  };
-  document.addEventListener('mousemove', handleDragMove);
-  document.addEventListener('mouseup', handleDragEnd);
-}
-
-function handleDragMove(e: MouseEvent) {
-  if (!dragState) return;
-
-  const dx = e.clientX - dragState.startX;
-  const dy = e.clientY - dragState.startY;
-
-  if (!dragState.isDragging) {
-    if (Math.abs(dx) < DRAG_THRESHOLD && Math.abs(dy) < DRAG_THRESHOLD) return;
-    dragState.isDragging = true;
-  }
-
-  if (store.isPointInCanvas(e.clientX, e.clientY)) {
-    if (!dragState.previewCreated) {
-      store.startDragPreview(dragState.subType, e.clientX, e.clientY);
-      dragState.previewCreated = true;
-    } else {
-      store.updateDragPreview(e.clientX, e.clientY);
-    }
-  } else if (dragState.previewCreated) {
-    store.cancelDragPreview();
-    dragState.previewCreated = false;
-  }
-}
-
-function handleDragEnd(e: MouseEvent) {
-  document.removeEventListener('mousemove', handleDragMove);
-  document.removeEventListener('mouseup', handleDragEnd);
-
-  if (!dragState) return;
-
-  if (dragState.isDragging) {
-    wasDragging = true;
-    if (dragState.previewCreated && store.isPointInCanvas(e.clientX, e.clientY)) {
-      store.updateDragPreview(e.clientX, e.clientY);
-      store.finalizeDragPreview();
-      showShapeDropdown.value = false;
-    } else {
-      store.cancelDragPreview();
-    }
-  }
-
-  dragState = null;
-}
-
-onBeforeUnmount(() => {
-  document.removeEventListener('mousemove', handleDragMove);
-  document.removeEventListener('mouseup', handleDragEnd);
-  store.cancelDragPreview();
-  dragState = null;
-});
-</script>
-
-<template>
-  <div class="wb-toolbar">
-    <div class="wb-toolbar__tools">
-      <template v-for="tool in mainTools" :key="tool">
-        <ElTooltip
-          :content="getToolLabel(tool)"
-          placement="right"
-          :show-after="300"
-        >
-          <button
-            class="wb-toolbar__btn"
-            :class="{ 'wb-toolbar__btn--active': store.currentTool === tool }"
-            @click="handleToolClick(tool)"
-          >
-            <component
-              :is="getToolIcon(tool)"
-              class="wb-toolbar__icon"
-            />
-          </button>
-        </ElTooltip>
-
-        <template v-if="tool === ToolType.Hand || tool === ToolType.Eraser || tool === ToolType.Connector">
-          <ElDivider class="wb-toolbar__divider" />
-        </template>
-      </template>
-    </div>
-
-    <Transition name="wb-slide">
-      <div
-        v-if="showShapeDropdown"
-        class="wb-shape-panel"
-        @click.stop
-      >
-        <div
-          v-for="(row, rowIdx) in SHAPE_GRID"
-          :key="rowIdx"
-          class="wb-shape-panel__row"
-        >
-          <ElTooltip
-            v-for="subType in row"
-            :key="subType"
-            :content="$t(SHAPE_LABELS[subType])"
-            placement="top"
-            :show-after="400"
-          >
-            <button
-              class="wb-shape-panel__item"
-              :class="{
-                'wb-shape-panel__item--active':
-                  store.currentShapeSubType === subType,
-              }"
-              @mousedown.prevent="handleShapeMouseDown($event, subType)"
-              @click="handleShapeSelect(subType)"
-            >
-              <component :is="SHAPE_ICON_MAP[subType]" class="wb-shape-panel__icon" />
-            </button>
-          </ElTooltip>
-        </div>
-      </div>
-    </Transition>
-
-    <Transition name="wb-slide">
-      <div
-        v-if="showConnectorDropdown"
-        class="wb-connector-panel"
-        @click.stop
-      >
-        <ElTooltip
-          v-for="ct in CONNECTOR_SUBTYPES"
-          :key="ct.key"
-          :content="$t(ct.label)"
-          placement="right"
-          :show-after="400"
-        >
-          <button
-            class="wb-connector-panel__item"
-            :class="{ 'wb-connector-panel__item--active': store.currentConnectorSubType === ct.key }"
-            @click="handleConnectorSelect(ct.key)"
-          >
-            <component :is="ct.icon" class="wb-connector-panel__icon" />
-          </button>
-        </ElTooltip>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-.wb-toolbar {
-  position: absolute;
-  top: 50%;
-  left: 12px;
-  z-index: 10;
-  display: flex;
-  gap: 4px;
-  align-items: flex-start;
-  transform: translateY(-50%);
-}
-
-.wb-toolbar__tools {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 6px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 10px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.wb-toolbar__btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  color: var(--el-text-color-regular);
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 8px;
-  transition: all 0.15s;
-}
-
-.wb-toolbar__btn:hover {
-  background: var(--el-fill-color-light);
-}
-
-.wb-toolbar__btn--active {
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-}
-
-.wb-toolbar__icon {
-  width: 20px;
-  height: 20px;
-}
-
-.wb-toolbar__divider {
-  margin: 2px 6px;
-}
-
-/* Shape grid panel - Feishu style */
-.wb-shape-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 8px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 10px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.wb-shape-panel__row {
-  display: flex;
-  gap: 2px;
-}
-
-.wb-shape-panel__item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  color: var(--el-text-color-regular);
-  cursor: grab;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  transition: all 0.15s;
-}
-
-.wb-shape-panel__item:active {
-  cursor: grabbing;
-}
-
-.wb-shape-panel__item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.wb-shape-panel__item--active {
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-}
-
-.wb-shape-panel__icon {
-  width: 22px;
-  height: 22px;
-}
-
-/* Connector panel */
-.wb-connector-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 6px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 10px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-}
-
-.wb-connector-panel__item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  color: var(--el-text-color-regular);
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  transition: all 0.15s;
-}
-
-.wb-connector-panel__item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.wb-connector-panel__item--active {
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-}
-
-.wb-connector-panel__icon {
-  width: 20px;
-  height: 20px;
-}
-
-.wb-slide-enter-active,
-.wb-slide-leave-active {
-  transition: all 0.2s ease;
-}
-
-.wb-slide-enter-from,
-.wb-slide-leave-to {
-  opacity: 0;
-  transform: translateX(-8px);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/ZoomControls.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/ZoomControls.vue
deleted file mode 100644
index 4677d81..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/ZoomControls.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { Minus, Plus } from '@vben/icons';
-import { $t } from '@vben/locales';
-import { ElButton, ElTooltip } from 'element-plus';
-
-import { useWhiteboardStore } from '../store/whiteboard-store';
-
-const store = useWhiteboardStore();
-
-const zoomPercent = computed(() => Math.round(store.viewport.zoom * 100));
-</script>
-
-<template>
-  <div class="wb-zoom">
-    <ElTooltip :content="$t('whiteboard.action.zoomOut')" placement="top">
-      <ElButton
-        size="small"
-        class="wb-zoom__btn"
-        @click="store.zoomOut()"
-      >
-        <Minus class="wb-zoom__icon" />
-      </ElButton>
-    </ElTooltip>
-
-    <ElTooltip :content="$t('whiteboard.action.resetZoom')" placement="top">
-      <button class="wb-zoom__value" @click="store.resetZoom()">
-        {{ zoomPercent }}%
-      </button>
-    </ElTooltip>
-
-    <ElTooltip :content="$t('whiteboard.action.zoomIn')" placement="top">
-      <ElButton
-        size="small"
-        class="wb-zoom__btn"
-        @click="store.zoomIn()"
-      >
-        <Plus class="wb-zoom__icon" />
-      </ElButton>
-    </ElTooltip>
-  </div>
-</template>
-
-<style scoped>
-.wb-zoom {
-  display: flex;
-  gap: 2px;
-  align-items: center;
-  padding: 4px;
-  background: var(--el-bg-color);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-  box-shadow: var(--el-box-shadow-light);
-}
-
-.wb-zoom__btn {
-  width: 28px;
-  height: 28px;
-  padding: 0;
-}
-
-.wb-zoom__icon {
-  width: 14px;
-  height: 14px;
-}
-
-.wb-zoom__value {
-  min-width: 48px;
-  padding: 2px 6px;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  text-align: center;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  transition: background 0.15s;
-}
-
-.wb-zoom__value:hover {
-  background: var(--el-fill-color-light);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/toolbar/PenOptions.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/toolbar/PenOptions.vue
deleted file mode 100644
index d441756..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/toolbar/PenOptions.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-
-import { ElSlider } from 'element-plus';
-
-import { PRESET_COLORS } from '../../constants';
-import { useWhiteboardStore } from '../../store/whiteboard-store';
-
-const store = useWhiteboardStore();
-
-const penWidth = ref(2);
-const penColor = ref('#1e1e1e');
-
-watch(penWidth, (val) => {
-  store.setStrokeWidth(val);
-});
-
-watch(penColor, (val) => {
-  store.setStrokeColor(val);
-});
-
-function selectColor(color: string) {
-  penColor.value = color;
-}
-</script>
-
-<template>
-  <div class="pen-options">
-    <div class="pen-options__section">
-      <span class="pen-options__label">{{ $t('whiteboard.penWidth') }}</span>
-      <ElSlider
-        v-model="penWidth"
-        :min="1"
-        :max="20"
-        :step="1"
-        :show-tooltip="true"
-        size="small"
-      />
-    </div>
-
-    <div class="pen-options__section">
-      <span class="pen-options__label">{{ $t('whiteboard.penColor') }}</span>
-      <div class="pen-options__colors">
-        <button
-          v-for="color in PRESET_COLORS"
-          :key="color"
-          class="pen-options__color-btn"
-          :class="{ 'pen-options__color-btn--active': penColor === color }"
-          :style="{ backgroundColor: color }"
-          @click="selectColor(color)"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.pen-options {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 8px;
-}
-
-.pen-options__section {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.pen-options__label {
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.pen-options__colors {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-}
-
-.pen-options__color-btn {
-  width: 24px;
-  height: 24px;
-  cursor: pointer;
-  border: 2px solid var(--el-border-color-lighter);
-  border-radius: 4px;
-  transition: border-color 0.15s;
-}
-
-.pen-options__color-btn:hover {
-  border-color: var(--el-color-primary);
-}
-
-.pen-options__color-btn--active {
-  border-color: var(--el-color-primary);
-  box-shadow: 0 0 0 2px var(--el-color-primary-light-7);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/components/toolbar/ShapeDropdown.vue b/web/apps/web-ele/src/components/zq-whiteboard/components/toolbar/ShapeDropdown.vue
deleted file mode 100644
index deff741..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/components/toolbar/ShapeDropdown.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { $t } from '@vben/locales';
-
-import { SHAPE_SUB_TYPES } from '../../constants';
-import { useWhiteboardStore } from '../../store/whiteboard-store';
-import type { ShapeSubType } from '../../types';
-
-const store = useWhiteboardStore();
-
-const emit = defineEmits<{
-  close: [];
-}>();
-
-function handleSelect(subType: ShapeSubType) {
-  store.setShapeSubType(subType);
-  emit('close');
-}
-</script>
-
-<template>
-  <div class="shape-dropdown">
-    <button
-      v-for="(config, subType) in SHAPE_SUB_TYPES"
-      :key="subType"
-      class="shape-dropdown__item"
-      :class="{
-        'shape-dropdown__item--active':
-          store.currentShapeSubType === subType,
-      }"
-      @click="handleSelect(subType as ShapeSubType)"
-    >
-      <span>{{ $t(config.label) }}</span>
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.shape-dropdown {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 4px;
-}
-
-.shape-dropdown__item {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  padding: 6px 12px;
-  font-size: 13px;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  transition: background 0.15s;
-}
-
-.shape-dropdown__item:hover {
-  background: var(--el-fill-color-light);
-}
-
-.shape-dropdown__item--active {
-  color: var(--el-color-primary);
-  background: var(--el-color-primary-light-9);
-}
-</style>
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/constants.ts b/web/apps/web-ele/src/components/zq-whiteboard/constants.ts
deleted file mode 100644
index b6c2bc0..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/constants.ts
+++ /dev/null
@@ -1,229 +0,0 @@
-import { BackgroundType, ShapeSubType, ToolType } from './types';
-
-export const WHITEBOARD_VERSION = '1.0.0';
-
-export const MIN_ZOOM = 0.1;
-export const MAX_ZOOM = 5;
-export const ZOOM_STEP = 0.1;
-export const DEFAULT_ZOOM = 1;
-
-export const SNAP_THRESHOLD = 5;
-
-export const HISTORY_MAX_STEPS = 50;
-
-export const DEFAULT_STROKE_COLOR = '#1e1e1e';
-export const DEFAULT_FILL_COLOR = 'transparent';
-export const DEFAULT_STROKE_WIDTH = 2;
-export const DEFAULT_FONT_SIZE = 16;
-export const DEFAULT_FONT_FAMILY = 'Inter, sans-serif';
-
-export const STICKY_NOTE_COLORS = [
-  '#FEF3C7',
-  '#DBEAFE',
-  '#D1FAE5',
-  '#FCE7F3',
-  '#E9D5FF',
-  '#FED7AA',
-  '#CFFAFE',
-  '#FEE2E2',
-];
-
-export const PRESET_COLORS = [
-  '#1e1e1e',
-  '#e03131',
-  '#2f9e44',
-  '#1971c2',
-  '#f08c00',
-  '#6741d9',
-  '#0c8599',
-  '#e8590c',
-  '#ffffff',
-  '#868e96',
-  '#fa5252',
-  '#40c057',
-  '#339af0',
-  '#fd7e14',
-  '#845ef7',
-  '#22b8cf',
-];
-
-export const STROKE_WIDTHS = [1, 2, 3, 4, 6, 8];
-
-export const TOOL_CONFIG: Record<
-  ToolType,
-  { icon: string; label: string; shortcut?: string }
-> = {
-  [ToolType.Select]: {
-    icon: 'MousePointer2',
-    label: 'whiteboard.tool.select',
-    shortcut: 'V',
-  },
-  [ToolType.Hand]: {
-    icon: 'Hand',
-    label: 'whiteboard.tool.hand',
-    shortcut: 'H',
-  },
-  [ToolType.Pen]: {
-    icon: 'Pen',
-    label: 'whiteboard.tool.pen',
-    shortcut: 'P',
-  },
-  [ToolType.Highlighter]: {
-    icon: 'Highlighter',
-    label: 'whiteboard.tool.highlighter',
-  },
-  [ToolType.Eraser]: {
-    icon: 'Eraser',
-    label: 'whiteboard.tool.eraser',
-    shortcut: 'E',
-  },
-  [ToolType.Shape]: {
-    icon: 'Square',
-    label: 'whiteboard.tool.shape',
-    shortcut: 'R',
-  },
-  [ToolType.Line]: {
-    icon: 'Minus',
-    label: 'whiteboard.tool.line',
-  },
-  [ToolType.Arrow]: {
-    icon: 'ArrowRight',
-    label: 'whiteboard.tool.arrow',
-  },
-  [ToolType.Connector]: {
-    icon: 'Spline',
-    label: 'whiteboard.tool.connector',
-  },
-  [ToolType.Text]: {
-    icon: 'Type',
-    label: 'whiteboard.tool.text',
-    shortcut: 'T',
-  },
-  [ToolType.StickyNote]: {
-    icon: 'StickyNote',
-    label: 'whiteboard.tool.stickyNote',
-    shortcut: 'S',
-  },
-  [ToolType.Image]: {
-    icon: 'Image',
-    label: 'whiteboard.tool.image',
-  },
-  [ToolType.Frame]: {
-    icon: 'Frame',
-    label: 'whiteboard.tool.frame',
-    shortcut: 'F',
-  },
-  [ToolType.Laser]: {
-    icon: 'Presentation',
-    label: 'whiteboard.tool.laser',
-  },
-};
-
-export const SHAPE_SUB_TYPES: Record<
-  ShapeSubType,
-  { icon: string; label: string }
-> = {
-  [ShapeSubType.Rect]: { icon: 'Square', label: 'whiteboard.shape.rect' },
-  [ShapeSubType.RoundedRect]: { icon: 'RectangleHorizontal', label: 'whiteboard.shape.roundedRect' },
-  [ShapeSubType.Circle]: { icon: 'Circle', label: 'whiteboard.shape.circle' },
-  [ShapeSubType.Diamond]: { icon: 'Diamond', label: 'whiteboard.shape.diamond' },
-  [ShapeSubType.Triangle]: { icon: 'Triangle', label: 'whiteboard.shape.triangle' },
-  [ShapeSubType.Star]: { icon: 'Star', label: 'whiteboard.shape.star' },
-  [ShapeSubType.Hexagon]: { icon: 'Hexagon', label: 'whiteboard.shape.hexagon' },
-  [ShapeSubType.Pentagon]: { icon: 'Pentagon', label: 'whiteboard.shape.pentagon' },
-  [ShapeSubType.Octagon]: { icon: 'Octagon', label: 'whiteboard.shape.octagon' },
-  [ShapeSubType.Parallelogram]: { icon: 'Parentheses', label: 'whiteboard.shape.parallelogram' },
-  [ShapeSubType.Cylinder]: { icon: 'Cylinder', label: 'whiteboard.shape.cylinder' },
-  [ShapeSubType.ArrowRight]: { icon: 'ArrowBigRight', label: 'whiteboard.shape.arrowRight' },
-  [ShapeSubType.ArrowUp]: { icon: 'ArrowBigUp', label: 'whiteboard.shape.arrowUp' },
-  [ShapeSubType.Heart]: { icon: 'Heart', label: 'whiteboard.shape.heart' },
-  [ShapeSubType.Cloud]: { icon: 'Cloud', label: 'whiteboard.shape.cloud' },
-  [ShapeSubType.ChatBubble]: { icon: 'MessageCircle', label: 'whiteboard.shape.chatBubble' },
-};
-
-export const DEFAULT_BACKGROUND = {
-  type: BackgroundType.Dots,
-  color: '#f8f9fa',
-};
-
-export const FONT_SIZES = [12, 14, 18, 24, 36, 48, 72, 96];
-
-export const TOOLBAR_FILL_COLORS = [
-  'transparent',
-  '#ffffff', '#f5f5f5', '#e8dff5', '#dbeafe', '#d1fae5', '#fef3c7', '#fed7aa', '#fce7f3',
-  '#000000', '#374151', '#9ca3af', '#8b5cf6', '#3b82f6', '#1e40af', '#16a34a', '#ca8a04', '#dc2626',
-];
-
-export const STROKE_DASH_OPTIONS: Array<{ key: string; dash: number[] | null }> = [
-  { key: 'none', dash: null },
-  { key: 'solid', dash: [] },
-  { key: 'dashed', dash: [8, 4] },
-  { key: 'dotted', dash: [2, 2] },
-];
-
-export const STROKE_WIDTH_PRESETS = [1, 2, 4, 6];
-
-export const SHAPE_TEXT_PADDING = 8;
-export const SHAPE_TEXT_FONT_SIZE = 14;
-
-/** 连线标签单行展示的上限宽度；超出则换行，避免背景无限拉长 */
-export const CONNECTOR_LABEL_MAX_WIDTH = 240;
-/** 测量「自然单行宽度」时使用的临时宽度（需明显大于 MAX） */
-export const CONNECTOR_LABEL_MEASURE_WIDTH = 10000;
-
-/**
- * Fabric canvas.toObject / loadFromJSON 需显式包含的自定义字段。
- * 含连线两端 wbId、关联元数据，否则保存后 connectorLinks 无法重建。
- */
-export const WHITEBOARD_SERIALIZE_PROPS = [
-  'shapeSubType',
-  'isDynamicConnector',
-  'isConnectorLabel',
-  'wbId',
-  'connectorLinkId',
-  'connectorSourceId',
-  'connectorTargetId',
-  'connectorRouteType',
-  'connectorStartStyle',
-  'connectorEndStyle',
-] as const;
-
-function svgCursor(svg: string, x: number, y: number): string {
-  const encoded = svg
-    .replace(/</g, '%3C')
-    .replace(/>/g, '%3E')
-    .replace(/#/g, '%23');
-  return `url("data:image/svg+xml,${encoded}") ${x} ${y}, auto`;
-}
-
-export const PEN_CURSOR = svgCursor(
-  `<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'>`
-  + `<path d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='m15 5 4 4' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z' stroke='#1e1e1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='m15 5 4 4' stroke='#1e1e1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `</svg>`,
-  3, 29,
-);
-
-export const HIGHLIGHTER_CURSOR = svgCursor(
-  `<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'>`
-  + `<path d='m9 11-6 6v3h9l3-3' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='m9 11-6 6v3h9l3-3' stroke='#1e1e1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4' stroke='#1e1e1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `</svg>`,
-  3, 29,
-);
-
-export const ERASER_CURSOR = svgCursor(
-  `<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none'>`
-  + `<path d='m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='M22 21H7' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='m5 11 9 9' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21' stroke='#1e1e1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='M22 21H7' stroke='#1e1e1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `<path d='m5 11 9 9' stroke='#1e1e1e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>`
-  + `</svg>`,
-  9, 28,
-);
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/core/canvas-manager.ts b/web/apps/web-ele/src/components/zq-whiteboard/core/canvas-manager.ts
deleted file mode 100644
index f2b04ac..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/core/canvas-manager.ts
+++ /dev/null
@@ -1,460 +0,0 @@
-import * as fabric from 'fabric';
-
-import {
-  DEFAULT_ZOOM,
-  MAX_ZOOM,
-  MIN_ZOOM,
-  WHITEBOARD_SERIALIZE_PROPS,
-  ZOOM_STEP,
-} from '../constants';
-import type { BackgroundType, ViewportState } from '../types';
-
-export class CanvasManager {
-  canvas: fabric.Canvas | null = null;
-  private containerEl: HTMLElement | null = null;
-  private resizeObserver: ResizeObserver | null = null;
-  private isPanning = false;
-  private isSpacePressed = false;
-  private lastPanPoint: { x: number; y: number } | null = null;
-  private onViewportChange?: (state: ViewportState) => void;
-
-  init(
-    canvasEl: HTMLCanvasElement,
-    containerEl: HTMLElement,
-    options?: {
-      onViewportChange?: (state: ViewportState) => void;
-    },
-  ) {
-    this.containerEl = containerEl;
-    this.onViewportChange = options?.onViewportChange;
-
-    const { width, height } = containerEl.getBoundingClientRect();
-
-    this.canvas = new fabric.Canvas(canvasEl, {
-      width,
-      height,
-      backgroundColor: '#ffffff',
-      selection: true,
-      preserveObjectStacking: true,
-      stopContextMenu: true,
-      fireRightClick: true,
-      controlsAboveOverlay: true,
-    });
-
-    this.setupSelectionStyle();
-    this.setupInfiniteCanvas();
-    this.setupResizeObserver();
-
-    return this.canvas;
-  }
-
-  private static readonly ACCENT = '#4a90d9';
-  private static readonly ACCENT_LIGHT = 'rgba(74,144,217,0.15)';
-
-  private static renderCorner: fabric.Control['render'] = (ctx, left, top, _style, fabricObject) => {
-    const size = fabricObject.cornerSize ?? 10;
-    ctx.save();
-    ctx.translate(left, top);
-    ctx.fillStyle = '#ffffff';
-    ctx.strokeStyle = CanvasManager.ACCENT;
-    ctx.lineWidth = 1.5;
-    ctx.beginPath();
-    ctx.roundRect(-size / 2, -size / 2, size, size, 2);
-    ctx.fill();
-    ctx.stroke();
-    ctx.restore();
-  };
-
-  private static renderMid: fabric.Control['render'] = (ctx, left, top, _style, fabricObject) => {
-    const radius = (fabricObject.cornerSize ?? 10) * 0.45;
-    ctx.save();
-    ctx.translate(left, top);
-    ctx.fillStyle = CanvasManager.ACCENT_LIGHT;
-    ctx.strokeStyle = CanvasManager.ACCENT;
-    ctx.lineWidth = 1.5;
-    ctx.beginPath();
-    ctx.arc(0, 0, radius, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
-    ctx.restore();
-  };
-
-  private static renderRotate: fabric.Control['render'] = (ctx, left, top) => {
-    const r = 9;
-    ctx.save();
-    ctx.translate(left, top);
-
-    ctx.fillStyle = '#ffffff';
-    ctx.strokeStyle = CanvasManager.ACCENT;
-    ctx.lineWidth = 1.2;
-    ctx.beginPath();
-    ctx.arc(0, 0, r, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
-
-    ctx.strokeStyle = CanvasManager.ACCENT;
-    ctx.lineWidth = 1.6;
-    ctx.lineCap = 'round';
-    ctx.lineJoin = 'round';
-
-    const ar = 4.2;
-    const startAngle = -Math.PI * 0.65;
-    const endAngle = Math.PI * 0.55;
-    ctx.beginPath();
-    ctx.arc(0, 0, ar, startAngle, endAngle);
-    ctx.stroke();
-
-    const tipAngle = endAngle;
-    const tx = Math.cos(tipAngle) * ar;
-    const ty = Math.sin(tipAngle) * ar;
-    const aLen = 2.8;
-    ctx.beginPath();
-    ctx.moveTo(tx + aLen * Math.cos(tipAngle - 2.2), ty + aLen * Math.sin(tipAngle - 2.2));
-    ctx.lineTo(tx, ty);
-    ctx.lineTo(tx + aLen * Math.cos(tipAngle + 0.8), ty + aLen * Math.sin(tipAngle + 0.8));
-    ctx.stroke();
-
-    ctx.restore();
-  };
-
-  static applyControlStyle(obj: fabric.FabricObject) {
-    obj.set({
-      borderColor: CanvasManager.ACCENT,
-      borderScaleFactor: 1.5,
-      cornerColor: '#ffffff',
-      cornerStrokeColor: CanvasManager.ACCENT,
-      cornerSize: 10,
-      cornerStyle: 'rect',
-      transparentCorners: false,
-      borderOpacityWhenMoving: 0.6,
-    });
-    const c = obj.controls;
-    for (const k of ['tl', 'tr', 'bl', 'br']) {
-      if (c[k]) c[k].render = CanvasManager.renderCorner;
-    }
-    for (const k of ['ml', 'mr', 'mt', 'mb']) {
-      if (c[k]) {
-        c[k].render = CanvasManager.renderMid;
-        c[k].sizeX = 14;
-        c[k].sizeY = 14;
-      }
-    }
-    if (c.mtr) {
-      c.mtr.render = CanvasManager.renderRotate;
-      c.mtr.x = 0.5;
-      c.mtr.y = -0.5;
-      c.mtr.offsetX = 16;
-      c.mtr.offsetY = -16;
-      c.mtr.sizeX = 20;
-      c.mtr.sizeY = 20;
-      c.mtr.withConnection = false;
-    }
-  }
-
-  private setupSelectionStyle() {
-    if (!this.canvas) return;
-    this.canvas.selectionColor = CanvasManager.ACCENT_LIGHT;
-    this.canvas.selectionBorderColor = CanvasManager.ACCENT;
-    this.canvas.selectionLineWidth = 1;
-    this.canvas.on('object:added', ({ target }) => {
-      if (!(target as any).isPortIndicator) {
-        CanvasManager.applyControlStyle(target);
-      }
-    });
-  }
-
-  private setupInfiniteCanvas() {
-    if (!this.canvas) return;
-
-    this.canvas.on('mouse:wheel', (opt) => {
-      const e = opt.e as WheelEvent;
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (e.ctrlKey || e.metaKey) {
-        const delta = e.deltaY;
-        let zoom = this.canvas!.getZoom();
-        zoom *= 0.999 ** delta;
-        zoom = Math.min(Math.max(zoom, MIN_ZOOM), MAX_ZOOM);
-
-        const point = new fabric.Point(e.offsetX, e.offsetY);
-        this.canvas!.zoomToPoint(point, zoom);
-      } else {
-        const vpt = this.canvas!.viewportTransform!;
-        vpt[4] -= e.deltaX;
-        vpt[5] -= e.deltaY;
-        this.canvas!.setViewportTransform(vpt);
-      }
-
-      this.emitViewportChange();
-      this.canvas!.requestRenderAll();
-    });
-
-    this.canvas.on('mouse:down', (opt) => {
-      const e = opt.e as MouseEvent;
-
-      if (e.button === 1 || this.isSpacePressed) {
-        this.isPanning = true;
-        this.lastPanPoint = { x: e.clientX, y: e.clientY };
-        this.canvas!.setCursor('grabbing');
-        this.canvas!.selection = false;
-      }
-    });
-
-    this.canvas.on('mouse:move', (opt) => {
-      if (!this.isPanning || !this.lastPanPoint) return;
-      const e = opt.e as MouseEvent;
-      const vpt = this.canvas!.viewportTransform!;
-      vpt[4] += e.clientX - this.lastPanPoint.x;
-      vpt[5] += e.clientY - this.lastPanPoint.y;
-      this.lastPanPoint = { x: e.clientX, y: e.clientY };
-      this.canvas!.setViewportTransform(vpt);
-      this.canvas!.requestRenderAll();
-    });
-
-    this.canvas.on('mouse:up', () => {
-      if (this.isPanning) {
-        this.isPanning = false;
-        this.lastPanPoint = null;
-        this.canvas!.setCursor(this.isSpacePressed ? 'grab' : 'default');
-        this.canvas!.selection = true;
-        this.emitViewportChange();
-      }
-    });
-
-    document.addEventListener('keydown', this.handleKeyDown);
-    document.addEventListener('keyup', this.handleKeyUp);
-    document.addEventListener('mouseup', this.handleDocumentMouseUp);
-    window.addEventListener('blur', this.handleWindowBlur);
-  }
-
-  private handleKeyDown = (e: KeyboardEvent) => {
-    if (e.code === 'Space' && !this.isSpacePressed) {
-      const target = e.target as HTMLElement;
-      if (
-        target.tagName === 'INPUT' ||
-        target.tagName === 'TEXTAREA' ||
-        target.isContentEditable
-      ) {
-        return;
-      }
-      e.preventDefault();
-      this.isSpacePressed = true;
-      this.canvas?.setCursor('grab');
-    }
-  };
-
-  private handleKeyUp = (e: KeyboardEvent) => {
-    if (e.code === 'Space') {
-      this.isSpacePressed = false;
-      this.canvas?.setCursor('default');
-    }
-  };
-
-  private handleDocumentMouseUp = () => {
-    if (this.isPanning) {
-      this.isPanning = false;
-      this.lastPanPoint = null;
-      this.canvas?.setCursor(this.isSpacePressed ? 'grab' : 'default');
-      if (this.canvas) this.canvas.selection = true;
-      this.emitViewportChange();
-    }
-  };
-
-  private handleWindowBlur = () => {
-    this.isPanning = false;
-    this.isSpacePressed = false;
-    this.lastPanPoint = null;
-    if (this.canvas) {
-      this.canvas.selection = true;
-      this.canvas.setCursor('default');
-    }
-  };
-
-  private setupResizeObserver() {
-    if (!this.containerEl || !this.canvas) return;
-    this.resizeObserver = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry || !this.canvas) return;
-      const { width, height } = entry.contentRect;
-      this.canvas.setDimensions({ width, height });
-      this.canvas.requestRenderAll();
-    });
-    this.resizeObserver.observe(this.containerEl);
-  }
-
-  private emitViewportChange() {
-    if (!this.canvas || !this.onViewportChange) return;
-    const vpt = this.canvas.viewportTransform!;
-    this.onViewportChange({
-      x: vpt[4],
-      y: vpt[5],
-      zoom: this.canvas.getZoom(),
-    });
-  }
-
-  setBackground(type: BackgroundType, color: string) {
-    if (!this.canvas) return;
-    this.canvas.backgroundColor = color;
-
-    if (type === 'none') {
-      this.canvas.backgroundImage = undefined;
-      this.canvas.requestRenderAll();
-      return;
-    }
-
-    const patternCanvas = document.createElement('canvas');
-    const size = 20;
-    patternCanvas.width = size;
-    patternCanvas.height = size;
-    const ctx = patternCanvas.getContext('2d')!;
-
-    ctx.fillStyle = color;
-    ctx.fillRect(0, 0, size, size);
-
-    if (type === 'dots') {
-      ctx.fillStyle = '#ddd';
-      ctx.beginPath();
-      ctx.arc(size / 2, size / 2, 1, 0, Math.PI * 2);
-      ctx.fill();
-    } else if (type === 'grid') {
-      ctx.strokeStyle = '#e5e5e5';
-      ctx.lineWidth = 0.5;
-      ctx.beginPath();
-      ctx.moveTo(size, 0);
-      ctx.lineTo(size, size);
-      ctx.moveTo(0, size);
-      ctx.lineTo(size, size);
-      ctx.stroke();
-    } else if (type === 'lines') {
-      ctx.strokeStyle = '#e5e5e5';
-      ctx.lineWidth = 0.5;
-      ctx.beginPath();
-      ctx.moveTo(0, size);
-      ctx.lineTo(size, size);
-      ctx.stroke();
-    }
-
-    const pattern = new fabric.Pattern({
-      source: patternCanvas,
-      repeat: 'repeat',
-    });
-    this.canvas.backgroundColor = pattern as any;
-    this.canvas.requestRenderAll();
-  }
-
-  zoomIn() {
-    if (!this.canvas) return;
-    let zoom = this.canvas.getZoom() + ZOOM_STEP;
-    zoom = Math.min(zoom, MAX_ZOOM);
-    const center = this.canvas.getCenterPoint();
-    this.canvas.zoomToPoint(center, zoom);
-    this.emitViewportChange();
-  }
-
-  zoomOut() {
-    if (!this.canvas) return;
-    let zoom = this.canvas.getZoom() - ZOOM_STEP;
-    zoom = Math.max(zoom, MIN_ZOOM);
-    const center = this.canvas.getCenterPoint();
-    this.canvas.zoomToPoint(center, zoom);
-    this.emitViewportChange();
-  }
-
-  zoomToFit() {
-    if (!this.canvas) return;
-    const objects = this.canvas.getObjects();
-    if (objects.length === 0) {
-      this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
-      this.emitViewportChange();
-      return;
-    }
-
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    for (const obj of objects) {
-      const b = obj.getBoundingRect();
-      minX = Math.min(minX, b.left);
-      minY = Math.min(minY, b.top);
-      maxX = Math.max(maxX, b.left + b.width);
-      maxY = Math.max(maxY, b.top + b.height);
-    }
-
-    const boundsW = maxX - minX || 1;
-    const boundsH = maxY - minY || 1;
-    const canvasW = this.canvas.getWidth();
-    const canvasH = this.canvas.getHeight();
-    const padding = 40;
-
-    const scaleX = (canvasW - padding * 2) / boundsW;
-    const scaleY = (canvasH - padding * 2) / boundsH;
-    const zoom = Math.min(scaleX, scaleY, MAX_ZOOM);
-
-    this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
-    const centerX = minX + boundsW / 2;
-    const centerY = minY + boundsH / 2;
-    const center = new fabric.Point(centerX, centerY);
-    this.canvas.zoomToPoint(center, zoom);
-
-    const vpt = this.canvas.viewportTransform;
-    if (vpt) {
-      vpt[4] = canvasW / 2 - centerX * zoom;
-      vpt[5] = canvasH / 2 - centerY * zoom;
-      this.canvas.setViewportTransform(vpt);
-    }
-    this.emitViewportChange();
-  }
-
-  resetZoom() {
-    if (!this.canvas) return;
-    this.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
-    this.emitViewportChange();
-    this.canvas.requestRenderAll();
-  }
-
-  getZoom(): number {
-    return this.canvas?.getZoom() ?? DEFAULT_ZOOM;
-  }
-
-  getViewport(): ViewportState {
-    if (!this.canvas) return { x: 0, y: 0, zoom: 1 };
-    const vpt = this.canvas.viewportTransform!;
-    return { x: vpt[4], y: vpt[5], zoom: this.canvas.getZoom() };
-  }
-
-  setViewport(state: ViewportState) {
-    if (!this.canvas) return;
-    const vpt: number[] = [state.zoom, 0, 0, state.zoom, state.x, state.y];
-    this.canvas.setViewportTransform(vpt as any);
-    this.canvas.requestRenderAll();
-  }
-
-  toJSON(): any {
-    return this.canvas?.toObject([...WHITEBOARD_SERIALIZE_PROPS]) ?? {};
-  }
-
-  async loadFromJSON(data: any): Promise<void> {
-    if (!this.canvas || !data) return;
-    await this.canvas.loadFromJSON(data);
-    this.canvas.requestRenderAll();
-  }
-
-  toDataURL(options?: { format?: string; quality?: number }): string {
-    if (!this.canvas) return '';
-    return this.canvas.toDataURL({
-      format: (options?.format as any) || 'png',
-      quality: options?.quality ?? 1,
-      multiplier: 0.5,
-    });
-  }
-
-  destroy() {
-    document.removeEventListener('keydown', this.handleKeyDown);
-    document.removeEventListener('keyup', this.handleKeyUp);
-    document.removeEventListener('mouseup', this.handleDocumentMouseUp);
-    window.removeEventListener('blur', this.handleWindowBlur);
-    this.resizeObserver?.disconnect();
-    this.canvas?.dispose();
-    this.canvas = null;
-    this.containerEl = null;
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/core/clipboard-manager.ts b/web/apps/web-ele/src/components/zq-whiteboard/core/clipboard-manager.ts
deleted file mode 100644
index 86c2bf2..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/core/clipboard-manager.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as fabric from 'fabric';
-import type { Canvas as FabricCanvas } from 'fabric';
-
-import { WHITEBOARD_SERIALIZE_PROPS } from '../constants';
-
-const PASTE_OFFSET = 20;
-const CUSTOM_PROPS = [...WHITEBOARD_SERIALIZE_PROPS];
-
-export class ClipboardManager {
-  private canvas: FabricCanvas | null = null;
-  private clipboardData: any = null;
-  private pasteCount = 0;
-
-  init(canvas: FabricCanvas) {
-    this.canvas = canvas;
-  }
-
-  async copy() {
-    if (!this.canvas) return;
-    const active = this.canvas.getActiveObject();
-    if (!active) return;
-    this.clipboardData = await active.clone(CUSTOM_PROPS);
-    this.pasteCount = 0;
-  }
-
-  async cut() {
-    if (!this.canvas) return;
-    await this.copy();
-    const active = this.canvas.getActiveObjects();
-    active.forEach((obj) => this.canvas!.remove(obj));
-    this.canvas.discardActiveObject();
-    this.canvas.requestRenderAll();
-  }
-
-  async paste() {
-    if (!this.canvas || !this.clipboardData) return;
-
-    this.pasteCount++;
-    const cloned = await this.clipboardData.clone(CUSTOM_PROPS);
-    this.canvas.discardActiveObject();
-
-    const offset = PASTE_OFFSET * this.pasteCount;
-    cloned.set({
-      left: (cloned.left || 0) + offset,
-      top: (cloned.top || 0) + offset,
-      evented: true,
-    });
-
-    if (cloned instanceof fabric.ActiveSelection) {
-      cloned.canvas = this.canvas;
-      cloned.forEachObject((obj: any) => {
-        this.canvas!.add(obj);
-      });
-      cloned.setCoords();
-    } else {
-      this.canvas.add(cloned);
-    }
-
-    this.canvas.setActiveObject(cloned);
-    this.canvas.requestRenderAll();
-  }
-
-  async duplicate() {
-    if (!this.canvas) return;
-    const active = this.canvas.getActiveObject();
-    if (!active) return;
-
-    const cloned = await active.clone(CUSTOM_PROPS);
-    cloned.set({
-      left: (cloned.left || 0) + PASTE_OFFSET,
-      top: (cloned.top || 0) + PASTE_OFFSET,
-      evented: true,
-    });
-
-    if (cloned instanceof fabric.ActiveSelection) {
-      cloned.canvas = this.canvas;
-      cloned.forEachObject((obj: any) => {
-        this.canvas!.add(obj);
-      });
-      cloned.setCoords();
-    } else {
-      this.canvas.add(cloned);
-    }
-
-    this.canvas.setActiveObject(cloned);
-    this.canvas.requestRenderAll();
-  }
-
-  destroy() {
-    this.clipboardData = null;
-    this.pasteCount = 0;
-    this.canvas = null;
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/core/export-manager.ts b/web/apps/web-ele/src/components/zq-whiteboard/core/export-manager.ts
deleted file mode 100644
index 345320d..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/core/export-manager.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { Canvas as FabricCanvas } from 'fabric';
-
-import { WHITEBOARD_SERIALIZE_PROPS } from '../constants';
-
-export class ExportManager {
-  private canvas: FabricCanvas | null = null;
-
-  init(canvas: FabricCanvas) {
-    this.canvas = canvas;
-  }
-
-  exportPNG(filename = 'whiteboard.png') {
-    if (!this.canvas) return;
-    const dataUrl = this.canvas.toDataURL({
-      format: 'png',
-      quality: 1,
-      multiplier: 2,
-    });
-    this.downloadFile(dataUrl, filename);
-  }
-
-  exportSVG(filename = 'whiteboard.svg') {
-    if (!this.canvas) return;
-    const svg = this.canvas.toSVG();
-    const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
-    const url = URL.createObjectURL(blob);
-    this.downloadFile(url, filename);
-    setTimeout(() => URL.revokeObjectURL(url), 1000);
-  }
-
-  exportJSON(filename = 'whiteboard.json') {
-    if (!this.canvas) return;
-    const json = JSON.stringify(this.canvas.toObject([...WHITEBOARD_SERIALIZE_PROPS]), null, 2);
-    const blob = new Blob([json], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    this.downloadFile(url, filename);
-    setTimeout(() => URL.revokeObjectURL(url), 1000);
-  }
-
-  getDataURL(format: 'png' | 'jpeg' = 'png', quality = 1): string {
-    if (!this.canvas) return '';
-    return this.canvas.toDataURL({ format, quality, multiplier: 2 });
-  }
-
-  getSVG(): string {
-    if (!this.canvas) return '';
-    return this.canvas.toSVG();
-  }
-
-  private downloadFile(url: string, filename: string) {
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  }
-
-  destroy() {
-    this.canvas = null;
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/core/history-manager.ts b/web/apps/web-ele/src/components/zq-whiteboard/core/history-manager.ts
deleted file mode 100644
index bf8f531..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/core/history-manager.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import type { Canvas as FabricCanvas } from 'fabric';
-
-import { HISTORY_MAX_STEPS, WHITEBOARD_SERIALIZE_PROPS } from '../constants';
-
-export class HistoryManager {
-  private canvas: FabricCanvas | null = null;
-  private undoStack: string[] = [];
-  private redoStack: string[] = [];
-  private isRestoring = false;
-  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
-  private onChange?: () => void;
-
-  private onAdded = () => this.debouncedSave();
-  private onModified = () => this.debouncedSave();
-  private onRemoved = () => this.debouncedSave();
-
-  init(canvas: FabricCanvas, onChange?: () => void) {
-    this.canvas = canvas;
-    this.onChange = onChange;
-    this.saveState();
-
-    canvas.on('object:added', this.onAdded);
-    canvas.on('object:modified', this.onModified);
-    canvas.on('object:removed', this.onRemoved);
-  }
-
-  private debouncedSave() {
-    if (this.isRestoring) return;
-    if (this.debounceTimer) clearTimeout(this.debounceTimer);
-    this.debounceTimer = setTimeout(() => this.saveState(), 200);
-  }
-
-  private saveState() {
-    if (!this.canvas || this.isRestoring) return;
-
-    const json = JSON.stringify(this.canvas.toObject([...WHITEBOARD_SERIALIZE_PROPS]));
-    const last = this.undoStack[this.undoStack.length - 1];
-    if (json === last) return;
-
-    this.undoStack.push(json);
-    if (this.undoStack.length > HISTORY_MAX_STEPS) {
-      this.undoStack.shift();
-    }
-    this.redoStack = [];
-    this.onChange?.();
-  }
-
-  async undo() {
-    if (!this.canvas || this.undoStack.length <= 1) return;
-
-    if (this.debounceTimer) {
-      clearTimeout(this.debounceTimer);
-      this.debounceTimer = null;
-    }
-    this.isRestoring = true;
-    try {
-      const current = this.undoStack.pop()!;
-      this.redoStack.push(current);
-
-      const prev = this.undoStack[this.undoStack.length - 1]!;
-      await this.canvas.loadFromJSON(prev);
-      this.canvas.requestRenderAll();
-    } finally {
-      this.isRestoring = false;
-    }
-    this.onChange?.();
-  }
-
-  async redo() {
-    if (!this.canvas || this.redoStack.length === 0) return;
-
-    if (this.debounceTimer) {
-      clearTimeout(this.debounceTimer);
-      this.debounceTimer = null;
-    }
-    this.isRestoring = true;
-    try {
-      const next = this.redoStack.pop()!;
-      this.undoStack.push(next);
-
-      await this.canvas.loadFromJSON(next);
-      this.canvas.requestRenderAll();
-    } finally {
-      this.isRestoring = false;
-    }
-    this.onChange?.();
-  }
-
-  get canUndo(): boolean {
-    return this.undoStack.length > 1;
-  }
-
-  get canRedo(): boolean {
-    return this.redoStack.length > 0;
-  }
-
-  clear() {
-    this.undoStack = [];
-    this.redoStack = [];
-    if (this.debounceTimer) clearTimeout(this.debounceTimer);
-  }
-
-  /** 外部载入 JSON 后重置撤销栈，仅保留当前画布为基线 */
-  resetBaseline() {
-    if (!this.canvas) return;
-    this.clear();
-    this.isRestoring = true;
-    try {
-      const json = JSON.stringify(this.canvas.toObject([...WHITEBOARD_SERIALIZE_PROPS]));
-      this.undoStack.push(json);
-    } finally {
-      this.isRestoring = false;
-    }
-    this.onChange?.();
-  }
-
-  destroy() {
-    if (this.canvas) {
-      this.canvas.off('object:added', this.onAdded);
-      this.canvas.off('object:modified', this.onModified);
-      this.canvas.off('object:removed', this.onRemoved);
-    }
-    this.clear();
-    this.canvas = null;
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/core/shortcut-manager.ts b/web/apps/web-ele/src/components/zq-whiteboard/core/shortcut-manager.ts
deleted file mode 100644
index 34f326c..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/core/shortcut-manager.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import type { ToolType } from '../types';
-
-interface ShortcutAction {
-  key: string;
-  ctrl?: boolean;
-  shift?: boolean;
-  alt?: boolean;
-  action: string;
-}
-
-interface ShortcutHandlers {
-  undo: () => void;
-  redo: () => void;
-  copy: () => void;
-  cut: () => void;
-  paste: () => void;
-  duplicate: () => void;
-  delete: () => void;
-  selectAll: () => void;
-  group: () => void;
-  ungroup: () => void;
-  zoomIn: () => void;
-  zoomOut: () => void;
-  zoomToFit: () => void;
-  resetZoom: () => void;
-  copyAsImage: () => void;
-  copyStyle: () => void;
-  pasteStyle: () => void;
-  flipH: () => void;
-  flipV: () => void;
-  setTool: (tool: ToolType) => void;
-  enterTextEditing?: () => void;
-}
-
-const SHORTCUT_MAP: ShortcutAction[] = [
-  { key: 'z', ctrl: true, action: 'undo' },
-  { key: 'z', ctrl: true, shift: true, action: 'redo' },
-  { key: 'y', ctrl: true, action: 'redo' },
-  { key: 'c', ctrl: true, action: 'copy' },
-  { key: 'c', ctrl: true, shift: true, action: 'copyAsImage' },
-  { key: 'c', ctrl: true, alt: true, action: 'copyStyle' },
-  { key: 'v', ctrl: true, alt: true, action: 'pasteStyle' },
-  { key: 'x', ctrl: true, action: 'cut' },
-  { key: 'v', ctrl: true, action: 'paste' },
-  { key: 'd', ctrl: true, action: 'duplicate' },
-  { key: 'g', ctrl: true, action: 'group' },
-  { key: 'g', ctrl: true, shift: true, action: 'ungroup' },
-  { key: 'h', shift: true, action: 'flipH' },
-  { key: 'v', shift: true, action: 'flipV' },
-  { key: 'Delete', action: 'delete' },
-  { key: 'Backspace', action: 'delete' },
-  { key: 'a', ctrl: true, action: 'selectAll' },
-  { key: '=', ctrl: true, action: 'zoomIn' },
-  { key: '-', ctrl: true, action: 'zoomOut' },
-  { key: '1', ctrl: true, action: 'zoomToFit' },
-  { key: '0', ctrl: true, action: 'resetZoom' },
-];
-
-const TOOL_SHORTCUTS: Record<string, ToolType> = {
-  v: 'select' as ToolType,
-  h: 'hand' as ToolType,
-  p: 'pen' as ToolType,
-  e: 'eraser' as ToolType,
-  r: 'shape' as ToolType,
-  l: 'connector' as ToolType,
-  t: 'text' as ToolType,
-  s: 'stickyNote' as ToolType,
-};
-
-export class ShortcutManager {
-  private handlers: ShortcutHandlers | null = null;
-  private boundHandler: ((e: KeyboardEvent) => void) | null = null;
-
-  init(handlers: ShortcutHandlers) {
-    this.handlers = handlers;
-    this.boundHandler = this.handleKeyDown.bind(this);
-    document.addEventListener('keydown', this.boundHandler);
-  }
-
-  private handleKeyDown(e: KeyboardEvent) {
-    if (!this.handlers) return;
-
-    const target = e.target as HTMLElement;
-    const isInput =
-      target.tagName === 'INPUT' ||
-      target.tagName === 'TEXTAREA' ||
-      target.isContentEditable;
-
-    const ctrl = e.ctrlKey || e.metaKey;
-
-    for (const shortcut of SHORTCUT_MAP) {
-      const ctrlMatch = shortcut.ctrl ? ctrl : !ctrl;
-      const shiftMatch = shortcut.shift ? e.shiftKey : !e.shiftKey;
-      const altMatch = shortcut.alt ? e.altKey : !e.altKey;
-
-      if (e.key.toLowerCase() === shortcut.key.toLowerCase() && ctrlMatch && shiftMatch && altMatch) {
-        if (isInput && !shortcut.ctrl) continue;
-        if (shortcut.action === 'selectAll' && isInput) continue;
-
-        e.preventDefault();
-        const handler = this.handlers[shortcut.action as keyof ShortcutHandlers];
-        if (typeof handler === 'function') {
-          (handler as () => void)();
-        }
-        return;
-      }
-    }
-
-    if (isInput) return;
-
-    if (e.key === 'Enter' && !ctrl && !e.shiftKey && this.handlers.enterTextEditing) {
-      this.handlers.enterTextEditing();
-      return;
-    }
-
-    const toolKey = e.key.toLowerCase();
-    if (!ctrl && !e.shiftKey && TOOL_SHORTCUTS[toolKey]) {
-      this.handlers.setTool(TOOL_SHORTCUTS[toolKey]!);
-    }
-  }
-
-  destroy() {
-    if (this.boundHandler) {
-      document.removeEventListener('keydown', this.boundHandler);
-      this.boundHandler = null;
-    }
-    this.handlers = null;
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/core/snap-manager.ts b/web/apps/web-ele/src/components/zq-whiteboard/core/snap-manager.ts
deleted file mode 100644
index fa2e9d3..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/core/snap-manager.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-import * as fabric from 'fabric';
-import type { Canvas as FabricCanvas } from 'fabric';
-
-import { SNAP_THRESHOLD } from '../constants';
-
-interface GuideLine {
-  orientation: 'horizontal' | 'vertical';
-  position: number;
-}
-
-export class SnapManager {
-  private canvas: FabricCanvas | null = null;
-  private guideLines: fabric.Line[] = [];
-  private isEnabled = true;
-
-  private onMoving = (e: any) => this.handleMoving(e);
-  private onModified = () => this.clearGuides();
-  private onMouseUp = () => this.clearGuides();
-
-  init(canvas: FabricCanvas) {
-    this.canvas = canvas;
-    canvas.on('object:moving', this.onMoving);
-    canvas.on('object:modified', this.onModified);
-    canvas.on('mouse:up', this.onMouseUp);
-  }
-
-  setEnabled(enabled: boolean) {
-    this.isEnabled = enabled;
-  }
-
-  private handleMoving(e: any) {
-    if (!this.isEnabled || !this.canvas) return;
-    this.clearGuides();
-
-    const target = e.target;
-    if (!target) return;
-
-    const targetBounds = target.getBoundingRect();
-    const targetCenterX = targetBounds.left + targetBounds.width / 2;
-    const targetCenterY = targetBounds.top + targetBounds.height / 2;
-
-    const guides: GuideLine[] = [];
-    let snapX: number | null = null;
-    let snapY: number | null = null;
-
-    const objects = this.canvas.getObjects().filter(
-      (obj) => obj !== target && !this.guideLines.includes(obj as any),
-    );
-
-    for (const obj of objects) {
-      const bounds = obj.getBoundingRect();
-      const centerX = bounds.left + bounds.width / 2;
-      const centerY = bounds.top + bounds.height / 2;
-
-      if (Math.abs(targetBounds.left - bounds.left) < SNAP_THRESHOLD) {
-        snapX = bounds.left - targetBounds.left;
-        guides.push({ orientation: 'vertical', position: bounds.left });
-      }
-      if (
-        Math.abs(
-          targetBounds.left + targetBounds.width -
-            (bounds.left + bounds.width),
-        ) < SNAP_THRESHOLD
-      ) {
-        snapX =
-          bounds.left + bounds.width - targetBounds.width - targetBounds.left;
-        guides.push({
-          orientation: 'vertical',
-          position: bounds.left + bounds.width,
-        });
-      }
-      if (Math.abs(targetCenterX - centerX) < SNAP_THRESHOLD) {
-        snapX = centerX - targetBounds.width / 2 - targetBounds.left;
-        guides.push({ orientation: 'vertical', position: centerX });
-      }
-
-      if (Math.abs(targetBounds.top - bounds.top) < SNAP_THRESHOLD) {
-        snapY = bounds.top - targetBounds.top;
-        guides.push({ orientation: 'horizontal', position: bounds.top });
-      }
-      if (
-        Math.abs(
-          targetBounds.top + targetBounds.height -
-            (bounds.top + bounds.height),
-        ) < SNAP_THRESHOLD
-      ) {
-        snapY =
-          bounds.top +
-          bounds.height -
-          targetBounds.height -
-          targetBounds.top;
-        guides.push({
-          orientation: 'horizontal',
-          position: bounds.top + bounds.height,
-        });
-      }
-      if (Math.abs(targetCenterY - centerY) < SNAP_THRESHOLD) {
-        snapY = centerY - targetBounds.height / 2 - targetBounds.top;
-        guides.push({ orientation: 'horizontal', position: centerY });
-      }
-    }
-
-    if (snapX !== null) {
-      target.set('left', (target.left || 0) + snapX);
-    }
-    if (snapY !== null) {
-      target.set('top', (target.top || 0) + snapY);
-    }
-    if (snapX !== null || snapY !== null) {
-      target.setCoords();
-    }
-
-    this.drawGuides(guides);
-  }
-
-  private drawGuides(guides: GuideLine[]) {
-    if (!this.canvas) return;
-
-    const canvasWidth = this.canvas.getWidth();
-    const canvasHeight = this.canvas.getHeight();
-
-    for (const guide of guides) {
-      const coords =
-        guide.orientation === 'vertical'
-          ? [guide.position, 0, guide.position, canvasHeight]
-          : [0, guide.position, canvasWidth, guide.position];
-
-      const line = new fabric.Line(coords as [number, number, number, number], {
-        stroke: '#6366f1',
-        strokeWidth: 1,
-        strokeDashArray: [4, 4],
-        selectable: false,
-        evented: false,
-        excludeFromExport: true,
-      });
-
-      this.canvas.add(line);
-      this.guideLines.push(line);
-    }
-
-    this.canvas.requestRenderAll();
-  }
-
-  private clearGuides() {
-    if (!this.canvas) return;
-    for (const line of this.guideLines) {
-      this.canvas.remove(line);
-    }
-    this.guideLines = [];
-  }
-
-  destroy() {
-    this.clearGuides();
-    if (this.canvas) {
-      this.canvas.off('object:moving', this.onMoving);
-      this.canvas.off('object:modified', this.onModified);
-      this.canvas.off('mouse:up', this.onMouseUp);
-    }
-    this.canvas = null;
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/core/tool-manager.ts b/web/apps/web-ele/src/components/zq-whiteboard/core/tool-manager.ts
deleted file mode 100644
index 3782b74..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/core/tool-manager.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import type { Canvas as FabricCanvas } from 'fabric';
-
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-export class ToolManager {
-  private tools = new Map<ToolType, BaseTool>();
-  private activeTool: BaseTool | null = null;
-  private activeToolType: ToolType = ToolType.Select;
-  private canvas: FabricCanvas | null = null;
-  private store: any = null;
-  private mouseDownHandler: ((e: any) => void) | null = null;
-  private mouseMoveHandler: ((e: any) => void) | null = null;
-  private mouseUpHandler: ((e: any) => void) | null = null;
-
-  init(canvas: FabricCanvas, store: any) {
-    this.canvas = canvas;
-    this.store = store;
-    this.bindCanvasEvents();
-  }
-
-  register(tool: BaseTool) {
-    this.tools.set(tool.name, tool);
-  }
-
-  activate(type: ToolType): boolean {
-    if (!this.canvas) return false;
-
-    const tool = this.tools.get(type);
-    if (!tool) return false;
-
-    const ctx = this.getContext();
-
-    if (this.activeTool) {
-      this.activeTool.deactivate(ctx);
-    }
-
-    this.activeTool = tool;
-    this.activeToolType = type;
-    this.canvas.defaultCursor = tool.cursor;
-    this.canvas.setCursor(tool.cursor);
-    tool.activate(ctx);
-
-    return true;
-  }
-
-  getActiveType(): ToolType {
-    return this.activeToolType;
-  }
-
-  getActiveTool(): BaseTool | null {
-    return this.activeTool;
-  }
-
-  getTool(type: ToolType): BaseTool | undefined {
-    return this.tools.get(type);
-  }
-
-  private getContext(): ToolContext {
-    return {
-      canvas: this.canvas!,
-      store: this.store,
-    };
-  }
-
-  private bindCanvasEvents() {
-    if (!this.canvas) return;
-
-    this.mouseDownHandler = (e: any) => {
-      this.activeTool?.onMouseDown?.(this.getContext(), e);
-    };
-    this.mouseMoveHandler = (e: any) => {
-      this.activeTool?.onMouseMove?.(this.getContext(), e);
-    };
-    this.mouseUpHandler = (e: any) => {
-      this.activeTool?.onMouseUp?.(this.getContext(), e);
-    };
-
-    this.canvas.on('mouse:down', this.mouseDownHandler);
-    this.canvas.on('mouse:move', this.mouseMoveHandler);
-    this.canvas.on('mouse:up', this.mouseUpHandler);
-  }
-
-  destroy() {
-    if (this.canvas) {
-      if (this.mouseDownHandler) {
-        this.canvas.off('mouse:down', this.mouseDownHandler);
-      }
-      if (this.mouseMoveHandler) {
-        this.canvas.off('mouse:move', this.mouseMoveHandler);
-      }
-      if (this.mouseUpHandler) {
-        this.canvas.off('mouse:up', this.mouseUpHandler);
-      }
-      if (this.activeTool) {
-        this.activeTool.deactivate(this.getContext());
-      }
-    }
-    this.activeTool = null;
-    this.tools.clear();
-    this.canvas = null;
-    this.store = null;
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/index.ts b/web/apps/web-ele/src/components/zq-whiteboard/index.ts
deleted file mode 100644
index 1e45b91..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as ZqWhiteboard } from './ZqWhiteboard.vue';
-export type { WhiteboardData, WhiteboardProps } from './types';
-export { useWhiteboardStore } from './store/whiteboard-store';
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/store/whiteboard-store.ts b/web/apps/web-ele/src/components/zq-whiteboard/store/whiteboard-store.ts
deleted file mode 100644
index 38d2355..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/store/whiteboard-store.ts
+++ /dev/null
@@ -1,1557 +0,0 @@
-import * as fabric from 'fabric';
-import { defineStore } from 'pinia';
-import { ElMessage } from 'element-plus';
-import { markRaw, ref } from 'vue';
-
-import { $t } from '@vben/locales';
-
-import {
-  DEFAULT_BACKGROUND,
-  DEFAULT_FILL_COLOR,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_STROKE_COLOR,
-  DEFAULT_STROKE_WIDTH,
-  CONNECTOR_LABEL_MAX_WIDTH,
-  CONNECTOR_LABEL_MEASURE_WIDTH,
-  SHAPE_TEXT_FONT_SIZE,
-  SHAPE_TEXT_PADDING,
-  WHITEBOARD_VERSION,
-} from '../constants';
-import { CanvasManager } from '../core/canvas-manager';
-import { ClipboardManager } from '../core/clipboard-manager';
-import { ExportManager } from '../core/export-manager';
-import { HistoryManager } from '../core/history-manager';
-import { ShortcutManager } from '../core/shortcut-manager';
-import { SnapManager } from '../core/snap-manager';
-import { ToolManager } from '../core/tool-manager';
-import { ConnectorTool } from '../tools/connector-tool';
-import { EraserTool } from '../tools/eraser-tool';
-import { HandTool } from '../tools/hand-tool';
-import { HighlighterTool } from '../tools/highlighter-tool';
-import { ImageTool } from '../tools/image-tool';
-import { PenTool } from '../tools/pen-tool';
-import { SelectTool } from '../tools/select-tool';
-import { ShapeTool } from '../tools/shape-tool';
-import { StickyNoteTool } from '../tools/sticky-note-tool';
-import { TextTool } from '../tools/text-tool';
-import type { ConnectorRouteType, EndpointStyle, ViewportState, WhiteboardData } from '../types';
-import { BackgroundType, ConnectorSubType, ShapeSubType, ToolType } from '../types';
-
-export const useWhiteboardStore = defineStore('whiteboard', () => {
-  const canvasManager = markRaw(new CanvasManager());
-  const toolManager = markRaw(new ToolManager());
-  const historyManager = markRaw(new HistoryManager());
-  const clipboardManager = markRaw(new ClipboardManager());
-  const shortcutManager = markRaw(new ShortcutManager());
-  const snapManager = markRaw(new SnapManager());
-  const exportManager = markRaw(new ExportManager());
-
-  const canUndo = ref(false);
-  const canRedo = ref(false);
-
-  const currentTool = ref<ToolType>(ToolType.Select);
-  const currentShapeSubType = ref<ShapeSubType>(ShapeSubType.Rect);
-  const currentConnectorSubType = ref<ConnectorSubType>(ConnectorSubType.ElbowConnector);
-  const viewport = ref<ViewportState>({ x: 0, y: 0, zoom: 1 });
-  const fillColor = ref(DEFAULT_FILL_COLOR);
-  const strokeColor = ref(DEFAULT_STROKE_COLOR);
-  const strokeWidth = ref(DEFAULT_STROKE_WIDTH);
-  const backgroundType = ref<BackgroundType>(DEFAULT_BACKGROUND.type);
-  /** 与画布底色一致（含点阵/网格的基色），用于连线标签背景等 */
-  const backgroundSolidColor = ref<string>(DEFAULT_BACKGROUND.color);
-  const selectedObjectCount = ref(0);
-  const selectionVersion = ref(0);
-  const isReadonly = ref(false);
-  const isCanvasReady = ref(false);
-
-  interface ConnectorLink {
-    source: fabric.FabricObject;
-    target: fabric.FabricObject;
-    path: fabric.Path;
-    startStyle: EndpointStyle;
-    endStyle: EndpointStyle;
-    routeType: ConnectorRouteType;
-    label?: fabric.Textbox;
-  }
-  const connectorLinks: ConnectorLink[] = [];
-
-  function ensureWbId(obj: fabric.FabricObject) {
-    const o = obj as any;
-    if (o.wbId && typeof o.wbId === 'string') return;
-    o.wbId = crypto.randomUUID();
-  }
-
-  function copyConnectorPathMetadata(from: fabric.Path, to: fabric.Path) {
-    const a = from as any;
-    const b = to as any;
-    b.connectorLinkId = a.connectorLinkId;
-    b.connectorSourceId = a.connectorSourceId;
-    b.connectorTargetId = a.connectorTargetId;
-    b.connectorRouteType = a.connectorRouteType;
-    b.connectorStartStyle = a.connectorStartStyle;
-    b.connectorEndStyle = a.connectorEndStyle;
-  }
-
-  /** loadFromJSON / undo / redo 后根据对象上的 wbId 与连线元数据重建内存中的 connectorLinks */
-  function rebuildConnectorLinks() {
-    connectorLinks.length = 0;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-
-    const byWbId = new Map<string, fabric.FabricObject>();
-    for (const o of canvas.getObjects()) {
-      const id = (o as any).wbId;
-      if (id && typeof id === 'string') byWbId.set(id, o);
-    }
-
-    const labelByLinkId = new Map<string, fabric.Textbox>();
-    for (const o of canvas.getObjects()) {
-      if ((o as any).isConnectorLabel && o instanceof fabric.Textbox) {
-        const lid = (o as any).connectorLinkId;
-        if (lid && typeof lid === 'string') labelByLinkId.set(lid, o);
-      }
-    }
-
-    for (const o of canvas.getObjects()) {
-      if (!(o as any).isDynamicConnector || !(o instanceof fabric.Path)) continue;
-      const p = o as any;
-      const sid = p.connectorSourceId;
-      const tid = p.connectorTargetId;
-      const linkId = p.connectorLinkId;
-      if (!sid || !tid || !linkId || typeof sid !== 'string' || typeof tid !== 'string' || typeof linkId !== 'string') {
-        continue;
-      }
-      const source = byWbId.get(sid);
-      const target = byWbId.get(tid);
-      if (!source || !target) continue;
-
-      connectorLinks.push({
-        source,
-        target,
-        path: o as fabric.Path,
-        startStyle: (p.connectorStartStyle ?? 'none') as EndpointStyle,
-        endStyle: (p.connectorEndStyle ?? 'arrow') as EndpointStyle,
-        routeType: (p.connectorRouteType ?? 'orthogonal') as ConnectorRouteType,
-        label: labelByLinkId.get(linkId),
-      });
-    }
-  }
-
-  function getCanvasSolidBackgroundColor(): string {
-    return backgroundSolidColor.value;
-  }
-
-  /** 连线标签背景与画布基色一致 */
-  function syncConnectorLabelBackgroundColors() {
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const bg = backgroundSolidColor.value;
-    for (const link of connectorLinks) {
-      if (link.label) {
-        link.label.set({ backgroundColor: bg, textBackgroundColor: '' });
-      }
-    }
-    for (const obj of canvas.getObjects()) {
-      if ((obj as any).isConnectorLabel && obj instanceof fabric.Textbox) {
-        obj.set({ backgroundColor: bg, textBackgroundColor: '' });
-      }
-    }
-    canvas.requestRenderAll();
-  }
-
-  function initCanvas(canvasEl: HTMLCanvasElement, containerEl: HTMLElement) {
-    const canvas = canvasManager.init(canvasEl, containerEl, {
-      onViewportChange: (state) => {
-        viewport.value = state;
-      },
-    });
-
-    if (!canvas) return;
-
-    toolManager.init(canvas, { fillColor, strokeColor, strokeWidth, connectObjects, setTool });
-
-    toolManager.register(new SelectTool());
-    toolManager.register(new HandTool());
-    toolManager.register(new PenTool());
-    toolManager.register(new HighlighterTool());
-    toolManager.register(new EraserTool());
-    toolManager.register(new ShapeTool());
-    toolManager.register(new TextTool());
-    toolManager.register(new StickyNoteTool());
-    toolManager.register(new ImageTool());
-    toolManager.register(new ConnectorTool());
-
-    toolManager.activate(ToolType.Select);
-
-    canvas.on('selection:created', updateSelectionCount);
-    canvas.on('selection:updated', updateSelectionCount);
-    canvas.on('selection:cleared', updateSelectionCount);
-    canvas.on('object:moving', onObjectMovingUpdateConnectors);
-    canvas.on('object:scaling', onObjectMovingUpdateConnectors);
-    canvas.on('object:rotating', onObjectMovingUpdateConnectors);
-    canvas.on('object:modified', onObjectMovingUpdateConnectors);
-    canvas.on('object:removed', onObjectRemovedCleanConnectors);
-
-    canvas.on('object:added', (e: any) => {
-      const t = e.target;
-      if (t && !(t as any).isPortIndicator) ensureWbId(t);
-      if (t && (t as any).isConnectorLabel && t instanceof fabric.Textbox) {
-        t.set({
-          backgroundColor: backgroundSolidColor.value,
-          textBackgroundColor: '',
-        });
-        fitConnectorLabelTextboxWidth(t);
-        canvas.requestRenderAll();
-      }
-    });
-
-    canvas.on('text:changed', (e: any) => {
-      const t = e.target;
-      if (t && (t as any).isConnectorLabel && t instanceof fabric.Textbox) {
-        fitConnectorLabelTextboxWidth(t);
-        canvas.requestRenderAll();
-      }
-    });
-
-    canvas.on('mouse:dblclick', (e: any) => {
-      if (isReadonly.value || !e.target) return;
-      if (e.target instanceof fabric.Group && (e.target as any).shapeSubType) {
-        enterShapeTextEditing(e.target);
-      } else if ((e.target as any).isDynamicConnector) {
-        enterConnectorLabelEditing(e.target);
-      }
-    });
-
-    canvas.on('object:modified', (e: any) => {
-      const target = e.target;
-      if (target instanceof fabric.Textbox && (target as any).isConnectorLabel) {
-        fitConnectorLabelTextboxWidth(target);
-        canvas.requestRenderAll();
-        return;
-      }
-      if (target instanceof fabric.Group && (target as any).shapeSubType) {
-        const textbox = ShapeTool.getTextChild(target);
-        if (textbox) {
-          const shapeChild = target.getObjects()[0];
-          const sw = (shapeChild?.width ?? target.width) * (target.scaleX ?? 1);
-          textbox.set({ width: Math.max(sw - SHAPE_TEXT_PADDING * 2, 20) });
-          target.setCoords();
-          canvas.requestRenderAll();
-        }
-      }
-    });
-
-    backgroundSolidColor.value = DEFAULT_BACKGROUND.color;
-    canvasManager.setBackground(backgroundType.value, DEFAULT_BACKGROUND.color);
-
-    historyManager.init(canvas, () => {
-      canUndo.value = historyManager.canUndo;
-      canRedo.value = historyManager.canRedo;
-    });
-    clipboardManager.init(canvas);
-    snapManager.init(canvas);
-    exportManager.init(canvas);
-    shortcutManager.init({
-      undo: () => undo(),
-      redo: () => redo(),
-      copy: () => clipboardManager.copy(),
-      cut: () => clipboardManager.cut(),
-      paste: () => clipboardManager.paste(),
-      duplicate: () => clipboardManager.duplicate(),
-      delete: () => deleteSelected(),
-      selectAll: () => selectAll(),
-      group: () => groupSelected(),
-      ungroup: () => ungroupSelected(),
-      zoomIn: () => zoomIn(),
-      zoomOut: () => zoomOut(),
-      zoomToFit: () => zoomToFit(),
-      resetZoom: () => resetZoom(),
-      copyAsImage: () => copyAsImage(),
-      copyStyle: () => copyStyle(),
-      pasteStyle: () => pasteStyle(),
-      flipH: () => flipSelected('horizontal'),
-      flipV: () => flipSelected('vertical'),
-      setTool: (tool) => setTool(tool),
-      enterTextEditing: () => handleEnterTextEditing(),
-    });
-
-    isCanvasReady.value = true;
-  }
-
-  let glowConnector: fabric.FabricObject | null = null;
-
-  function updateSelectionCount() {
-    const canvas = canvasManager.canvas;
-    if (!canvas) {
-      selectedObjectCount.value = 0;
-      return;
-    }
-
-    if (glowConnector) {
-      glowConnector.set({ shadow: null });
-      glowConnector = null;
-    }
-
-    const activeObjects = canvas.getActiveObjects();
-    selectedObjectCount.value = activeObjects.length;
-    selectionVersion.value++;
-
-    const active = canvas.getActiveObject();
-    if (active && (active as any).isDynamicConnector) {
-      active.set({
-        shadow: new fabric.Shadow({
-          color: 'rgba(74,144,217,0.35)',
-          blur: 10,
-          offsetX: 0,
-          offsetY: 0,
-        }),
-      });
-      glowConnector = active;
-    }
-
-    canvas.requestRenderAll();
-  }
-
-  function syncBrush(tool: PenTool | HighlighterTool) {
-    const canvas = canvasManager.canvas;
-    if (canvas) {
-      tool.updateBrush({ canvas, store: { fillColor, strokeColor, strokeWidth } });
-    }
-  }
-
-  function setTool(type: ToolType) {
-    if (isReadonly.value) return;
-    const success = toolManager.activate(type);
-    if (success) {
-      currentTool.value = type;
-    }
-  }
-
-  function setShapeSubType(subType: ShapeSubType) {
-    currentShapeSubType.value = subType;
-    if (currentTool.value !== ToolType.Shape) {
-      setTool(ToolType.Shape);
-    }
-    const shapeTool = toolManager.getActiveTool();
-    if (shapeTool instanceof ShapeTool) {
-      shapeTool.setShapeType(subType);
-    }
-  }
-
-  function setConnectorSubType(subType: ConnectorSubType) {
-    currentConnectorSubType.value = subType;
-    if (currentTool.value !== ToolType.Connector) {
-      setTool(ToolType.Connector);
-    }
-    const connTool = toolManager.getTool(ToolType.Connector);
-    if (connTool instanceof ConnectorTool) {
-      connTool.setSubType(subType);
-    }
-  }
-
-  function handleEnterTextEditing() {
-    const canvas = canvasManager.canvas;
-    if (!canvas || isReadonly.value) return;
-    const active = canvas.getActiveObject();
-    if (!active) return;
-    if (active instanceof fabric.Group && (active as any).shapeSubType) {
-      enterShapeTextEditing(active);
-    } else if ((active as any).isDynamicConnector) {
-      enterConnectorLabelEditing(active);
-    }
-  }
-
-  function enterShapeTextEditing(group: fabric.Group) {
-    if (isReadonly.value) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const textbox = ShapeTool.getTextChild(group);
-    if (!textbox) return;
-
-    group.set({ interactive: true });
-    canvas.setActiveObject(textbox);
-    textbox.enterEditing();
-    textbox.selectAll();
-    canvas.requestRenderAll();
-
-    const onExit = () => {
-      textbox.off('editing:exited', onExit);
-      group.set({ interactive: false });
-      canvas.setActiveObject(group);
-      canvas.requestRenderAll();
-    };
-    textbox.on('editing:exited', onExit);
-  }
-
-  /**
-   * Fabric Textbox 在 initDimensions 时若内容比 width 更宽会放大，但不会随内容变窄；
-   * 连线标签背景会因此长期保持创建时的宽度（如 120）。按文字实际占位收紧 width。
-   * splitByGrapheme 时 getMinWidth() 等价于「最宽一个词」，中文会退化成单字宽导致每行一字；
-   * 先用极大 width 测量自然行宽，再夹在 [minWidth, CONNECTOR_LABEL_MAX_WIDTH]。
-   */
-  function fitConnectorLabelTextboxWidth(tb: fabric.Textbox) {
-    const minW = tb.minWidth ?? 20;
-    if (!tb.text?.trim()) {
-      tb.set({ width: minW });
-      tb.initDimensions();
-      tb.setCoords();
-      return;
-    }
-    tb.set({ width: CONNECTOR_LABEL_MEASURE_WIDTH });
-    tb.initDimensions();
-    const natural = Math.max(minW, tb.calcTextWidth());
-    const w = Math.min(natural, CONNECTOR_LABEL_MAX_WIDTH);
-    tb.set({ width: w });
-    tb.initDimensions();
-    tb.setCoords();
-  }
-
-  function getConnectorMidpoint(link: ConnectorLink): { x: number; y: number } {
-    const points = computeRoute(link.source, link.target, link.routeType);
-    if (points.length === 0) return { x: 0, y: 0 };
-    if (points.length === 1) return { x: points[0]!.x, y: points[0]!.y };
-    const midIdx = Math.floor(points.length / 2);
-    const p1 = points[midIdx - 1]!;
-    const p2 = points[midIdx]!;
-    return { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2 };
-  }
-
-  function enterConnectorLabelEditing(pathObj: fabric.FabricObject) {
-    if (isReadonly.value) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const link = findConnectorLink(pathObj);
-    if (!link) return;
-
-    if (!link.label) {
-      const mid = getConnectorMidpoint(link);
-      const label = new fabric.Textbox('', {
-        left: mid.x,
-        top: mid.y,
-        originX: 'center',
-        originY: 'center',
-        fontSize: SHAPE_TEXT_FONT_SIZE,
-        fontFamily: DEFAULT_FONT_FAMILY,
-        fill: DEFAULT_STROKE_COLOR,
-        textAlign: 'center',
-        backgroundColor: backgroundSolidColor.value,
-        textBackgroundColor: '',
-        width: 20,
-        minWidth: 20,
-        editable: true,
-        splitByGrapheme: true,
-        selectable: true,
-        evented: true,
-      });
-      (label as any).isConnectorLabel = true;
-      const pathAny = link.path as any;
-      if (!pathAny.connectorLinkId) pathAny.connectorLinkId = crypto.randomUUID();
-      (label as any).connectorLinkId = pathAny.connectorLinkId;
-      canvas.add(label);
-      link.label = label;
-    }
-
-    canvas.setActiveObject(link.label);
-    link.label.enterEditing();
-    link.label.selectAll();
-    canvas.requestRenderAll();
-
-    const onExit = () => {
-      link.label?.off('editing:exited', onExit);
-      if (link.label && !link.label.text?.trim()) {
-        canvas.remove(link.label);
-        link.label = undefined;
-      }
-      canvas.requestRenderAll();
-    };
-    link.label.on('editing:exited', onExit);
-  }
-
-  function connectObjects(
-    source: fabric.FabricObject,
-    target: fabric.FabricObject,
-    routeType: ConnectorRouteType = 'orthogonal',
-    startStyle: EndpointStyle = 'none',
-    endStyle: EndpointStyle = 'arrow',
-  ): fabric.Path | null {
-    const canvas = canvasManager.canvas;
-    if (!canvas) return null;
-
-    ensureWbId(source);
-    ensureWbId(target);
-    const linkId = crypto.randomUUID();
-    const points = computeRoute(source, target, routeType);
-    const connPath = createConnectorPath(points, startStyle, endStyle);
-    connPath.set({ selectable: false, evented: false });
-    const p = connPath as any;
-    p.connectorLinkId = linkId;
-    p.connectorSourceId = (source as any).wbId;
-    p.connectorTargetId = (target as any).wbId;
-    p.connectorRouteType = routeType;
-    p.connectorStartStyle = startStyle;
-    p.connectorEndStyle = endStyle;
-    canvas.add(connPath);
-    canvas.sendObjectToBack(connPath);
-
-    connectorLinks.push({
-      source, target, path: connPath,
-      startStyle, endStyle, routeType,
-    });
-
-    canvas.requestRenderAll();
-    return connPath;
-  }
-
-  function screenToCanvasPos(screenX: number, screenY: number): { x: number; y: number } | null {
-    const canvas = canvasManager.canvas;
-    if (!canvas) return null;
-    const el = canvas.lowerCanvasEl ?? canvas.upperCanvasEl;
-    if (!el) return null;
-    const rect = el.getBoundingClientRect();
-    const vpt = canvas.viewportTransform;
-    const zoom = canvas.getZoom();
-    if (!vpt) return null;
-    return {
-      x: (screenX - rect.left - vpt[4]) / zoom,
-      y: (screenY - rect.top - vpt[5]) / zoom,
-    };
-  }
-
-  function isPointInCanvas(screenX: number, screenY: number): boolean {
-    const canvas = canvasManager.canvas;
-    if (!canvas) return false;
-    const el = canvas.lowerCanvasEl ?? canvas.upperCanvasEl;
-    if (!el) return false;
-    const rect = el.getBoundingClientRect();
-    return screenX >= rect.left && screenX <= rect.right && screenY >= rect.top && screenY <= rect.bottom;
-  }
-
-  let dragPreviewShape: fabric.FabricObject | null = null;
-
-  function startDragPreview(subType: ShapeSubType, screenX: number, screenY: number) {
-    cancelDragPreview();
-
-    const shapeTool = toolManager.getTool(ToolType.Shape) as ShapeTool | undefined;
-    if (!shapeTool || !canvasManager.canvas) return;
-
-    currentShapeSubType.value = subType;
-    shapeTool.setShapeType(subType);
-
-    const pos = screenToCanvasPos(screenX, screenY);
-    const ctx = { canvas: canvasManager.canvas, store: { fillColor, strokeColor, strokeWidth } };
-    dragPreviewShape = shapeTool.createDefaultShape(ctx, pos ?? undefined);
-    if (dragPreviewShape) {
-      dragPreviewShape.set({ opacity: 0.5, selectable: false, evented: false });
-      canvasManager.canvas.discardActiveObject();
-      canvasManager.canvas.requestRenderAll();
-    }
-  }
-
-  function updateDragPreview(screenX: number, screenY: number) {
-    if (!dragPreviewShape || !canvasManager.canvas) return;
-    const pos = screenToCanvasPos(screenX, screenY);
-    if (!pos) return;
-    const w = dragPreviewShape.width ?? 120;
-    const h = dragPreviewShape.height ?? 100;
-    dragPreviewShape.set({
-      left: pos.x - w / 2,
-      top: pos.y - h / 2,
-    });
-    dragPreviewShape.setCoords();
-    canvasManager.canvas.requestRenderAll();
-  }
-
-  function finalizeDragPreview() {
-    if (!dragPreviewShape || !canvasManager.canvas) return;
-    dragPreviewShape.set({ opacity: 1, selectable: true, evented: true });
-    dragPreviewShape.setCoords();
-    canvasManager.canvas.setActiveObject(dragPreviewShape);
-    canvasManager.canvas.requestRenderAll();
-    dragPreviewShape = null;
-    setTool(ToolType.Select);
-  }
-
-  function cancelDragPreview() {
-    if (!dragPreviewShape || !canvasManager.canvas) return;
-    canvasManager.canvas.remove(dragPreviewShape);
-    canvasManager.canvas.requestRenderAll();
-    dragPreviewShape = null;
-  }
-
-  function placeShapeOnCanvas(subType: ShapeSubType, screenPos?: { x: number; y: number }) {
-    currentShapeSubType.value = subType;
-
-    const shapeTool = toolManager.getTool(ToolType.Shape) as ShapeTool | undefined;
-    if (!shapeTool || !canvasManager.canvas) return;
-
-    shapeTool.setShapeType(subType);
-
-    const canvasPos = screenPos ? screenToCanvasPos(screenPos.x, screenPos.y) : undefined;
-
-    const ctx = { canvas: canvasManager.canvas, store: { fillColor, strokeColor, strokeWidth } };
-    shapeTool.createDefaultShape(ctx, canvasPos ?? undefined);
-    setTool(ToolType.Select);
-  }
-
-  function setFillColor(color: string) {
-    fillColor.value = color;
-    const tool = toolManager.getActiveTool();
-    if (tool instanceof ShapeTool) {
-      tool.setFill(color);
-    }
-    const canvas = canvasManager.canvas;
-    const active = canvas?.getActiveObject();
-    if (active) {
-      ShapeTool.getShapeChild(active).set('fill', color);
-      canvas?.requestRenderAll();
-    }
-  }
-
-  function setStrokeColor(color: string) {
-    strokeColor.value = color;
-    const tool = toolManager.getActiveTool();
-    if (tool instanceof ShapeTool) {
-      tool.setStroke(color);
-    } else if (tool instanceof PenTool) {
-      tool.setColor(color);
-      syncBrush(tool);
-    } else if (tool instanceof HighlighterTool) {
-      tool.setColor(color);
-      syncBrush(tool);
-    }
-    const canvas = canvasManager.canvas;
-    const active = canvas?.getActiveObject();
-    if (active) {
-      ShapeTool.getShapeChild(active).set('stroke', color);
-      canvas?.requestRenderAll();
-    }
-  }
-
-  function setStrokeWidth(width: number) {
-    strokeWidth.value = width;
-    const tool = toolManager.getActiveTool();
-    if (tool instanceof ShapeTool) {
-      tool.setStrokeWidth(width);
-    } else if (tool instanceof PenTool) {
-      tool.setWidth(width);
-      syncBrush(tool);
-    } else if (tool instanceof HighlighterTool) {
-      tool.setWidth(width);
-      syncBrush(tool);
-    }
-    const canvas = canvasManager.canvas;
-    const active = canvas?.getActiveObject();
-    if (active) {
-      ShapeTool.getShapeChild(active).set('strokeWidth', width);
-      canvas?.requestRenderAll();
-    }
-  }
-
-  function setBackground(type: BackgroundType) {
-    backgroundType.value = type;
-    const colorMap: Record<BackgroundType, string> = {
-      [BackgroundType.None]: '#ffffff',
-      [BackgroundType.Dots]: '#f8f9fa',
-      [BackgroundType.Lines]: '#f8f9fa',
-      [BackgroundType.Grid]: '#f8f9fa',
-    };
-    const color = colorMap[type];
-    backgroundSolidColor.value = color;
-    canvasManager.setBackground(type, color);
-    syncConnectorLabelBackgroundColors();
-  }
-
-  async function undo() {
-    await historyManager.undo();
-    rebuildConnectorLinks();
-    canUndo.value = historyManager.canUndo;
-    canRedo.value = historyManager.canRedo;
-  }
-
-  async function redo() {
-    await historyManager.redo();
-    rebuildConnectorLinks();
-    canUndo.value = historyManager.canUndo;
-    canRedo.value = historyManager.canRedo;
-  }
-
-  function deleteSelected() {
-    if (isReadonly.value) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const active = canvas.getActiveObjects();
-    if (active.length === 0) return;
-    active.forEach((obj) => canvas.remove(obj));
-    canvas.discardActiveObject();
-    canvas.requestRenderAll();
-  }
-
-  function groupSelected() {
-    if (isReadonly.value) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const activeObj = canvas.getActiveObject();
-    if (!activeObj || !(activeObj instanceof fabric.ActiveSelection)) return;
-
-    const objects = activeObj.getObjects();
-    if (objects.length < 2) return;
-
-    canvas.discardActiveObject();
-    const group = new fabric.Group(objects, { canvas });
-    objects.forEach((obj) => canvas.remove(obj));
-    canvas.add(group);
-    canvas.setActiveObject(group);
-    canvas.requestRenderAll();
-  }
-
-  function ungroupSelected() {
-    if (isReadonly.value) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const activeObj = canvas.getActiveObject();
-    if (!activeObj || !(activeObj instanceof fabric.Group)) return;
-    if ((activeObj as any).shapeSubType) return;
-
-    const items = activeObj.getObjects();
-    activeObj._restoreObjectsState();
-    canvas.remove(activeObj);
-    items.forEach((item) => {
-      canvas.add(item);
-    });
-    const sel = new fabric.ActiveSelection(items, { canvas });
-    canvas.setActiveObject(sel);
-    canvas.requestRenderAll();
-  }
-
-  function flipSelected(direction: 'horizontal' | 'vertical') {
-    if (isReadonly.value) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const active = canvas.getActiveObject();
-    if (!active) return;
-
-    if (direction === 'horizontal') {
-      active.set('flipX', !active.flipX);
-    } else {
-      active.set('flipY', !active.flipY);
-    }
-    active.setCoords();
-    canvas.requestRenderAll();
-  }
-
-  function alignObjects(action: string) {
-    if (isReadonly.value) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-
-    const objects = canvas.getActiveObjects();
-    if (objects.length < 2) return;
-
-    const bounds = objects.map((obj) => {
-      const b = obj.getBoundingRect();
-      return { obj, left: b.left, top: b.top, width: b.width, height: b.height };
-    });
-
-    const zoom = canvas.getZoom();
-
-    switch (action) {
-      case 'alignLeft': {
-        const minLeft = Math.min(...bounds.map((b) => b.left));
-        for (const b of bounds) {
-          const dx = minLeft - b.left;
-          b.obj.set('left', (b.obj.left ?? 0) + dx / zoom);
-          b.obj.setCoords();
-        }
-        break;
-      }
-      case 'alignRight': {
-        const maxRight = Math.max(...bounds.map((b) => b.left + b.width));
-        for (const b of bounds) {
-          const objRight = b.left + b.width;
-          const dx = maxRight - objRight;
-          b.obj.set('left', (b.obj.left ?? 0) + dx / zoom);
-          b.obj.setCoords();
-        }
-        break;
-      }
-      case 'alignCenter': {
-        const minLeft = Math.min(...bounds.map((b) => b.left));
-        const maxRight = Math.max(...bounds.map((b) => b.left + b.width));
-        const centerX = (minLeft + maxRight) / 2;
-        for (const b of bounds) {
-          const objCenterX = b.left + b.width / 2;
-          const dx = centerX - objCenterX;
-          b.obj.set('left', (b.obj.left ?? 0) + dx / zoom);
-          b.obj.setCoords();
-        }
-        break;
-      }
-      case 'alignTop': {
-        const minTop = Math.min(...bounds.map((b) => b.top));
-        for (const b of bounds) {
-          const dy = minTop - b.top;
-          b.obj.set('top', (b.obj.top ?? 0) + dy / zoom);
-          b.obj.setCoords();
-        }
-        break;
-      }
-      case 'alignBottom': {
-        const maxBottom = Math.max(...bounds.map((b) => b.top + b.height));
-        for (const b of bounds) {
-          const objBottom = b.top + b.height;
-          const dy = maxBottom - objBottom;
-          b.obj.set('top', (b.obj.top ?? 0) + dy / zoom);
-          b.obj.setCoords();
-        }
-        break;
-      }
-      case 'alignMiddle': {
-        const minTop = Math.min(...bounds.map((b) => b.top));
-        const maxBottom = Math.max(...bounds.map((b) => b.top + b.height));
-        const centerY = (minTop + maxBottom) / 2;
-        for (const b of bounds) {
-          const objCenterY = b.top + b.height / 2;
-          const dy = centerY - objCenterY;
-          b.obj.set('top', (b.obj.top ?? 0) + dy / zoom);
-          b.obj.setCoords();
-        }
-        break;
-      }
-      case 'distributeH': {
-        if (objects.length < 3) break;
-        const sorted = [...bounds].sort((a, b) => a.left - b.left);
-        const totalSpan = sorted[sorted.length - 1]!.left + sorted[sorted.length - 1]!.width - sorted[0]!.left;
-        const totalObjWidth = sorted.reduce((s, b) => s + b.width, 0);
-        const gap = (totalSpan - totalObjWidth) / (sorted.length - 1);
-        let x = sorted[0]!.left;
-        for (const b of sorted) {
-          const dx = x - b.left;
-          b.obj.set('left', (b.obj.left ?? 0) + dx / zoom);
-          b.obj.setCoords();
-          x += b.width + gap;
-        }
-        break;
-      }
-      case 'distributeV': {
-        if (objects.length < 3) break;
-        const sorted = [...bounds].sort((a, b) => a.top - b.top);
-        const totalSpan = sorted[sorted.length - 1]!.top + sorted[sorted.length - 1]!.height - sorted[0]!.top;
-        const totalObjHeight = sorted.reduce((s, b) => s + b.height, 0);
-        const gap = (totalSpan - totalObjHeight) / (sorted.length - 1);
-        let y = sorted[0]!.top;
-        for (const b of sorted) {
-          const dy = y - b.top;
-          b.obj.set('top', (b.obj.top ?? 0) + dy / zoom);
-          b.obj.setCoords();
-          y += b.height + gap;
-        }
-        break;
-      }
-    }
-
-    canvas.requestRenderAll();
-  }
-
-  function changeShapeType(newType: ShapeSubType) {
-    if (isReadonly.value) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const active = canvas.getActiveObject();
-    if (!active) return;
-
-    const shapeTool = toolManager.getTool(ToolType.Shape) as ShapeTool | undefined;
-    if (!shapeTool) return;
-
-    const shapeChild = ShapeTool.getShapeChild(active);
-    const existingText = ShapeTool.getTextChild(active)?.text ?? '';
-
-    const props = {
-      fill: shapeChild.fill,
-      stroke: shapeChild.stroke,
-      strokeWidth: shapeChild.strokeWidth,
-      strokeDashArray: shapeChild.strokeDashArray,
-      opacity: active.opacity,
-      angle: active.angle,
-      selectable: true,
-      evented: true,
-    };
-    const w = active.getScaledWidth?.() ?? (active as any).width ?? 120;
-    const h = active.getScaledHeight?.() ?? (active as any).height ?? 100;
-    const l = active.left ?? 0;
-    const t = active.top ?? 0;
-
-    const linkedConnectors = connectorLinks.filter(
-      (link) => link.source === active || link.target === active,
-    );
-
-    cleaningConnectors = true;
-    canvas.remove(active);
-    cleaningConnectors = false;
-
-    shapeTool.setShapeType(newType);
-    const newShape = shapeTool.createShapeWithProps(l, t, w, h, props, existingText);
-    if (newShape) {
-      canvas.add(newShape);
-      canvas.setActiveObject(newShape);
-
-      for (const link of linkedConnectors) {
-        if (link.source === active) link.source = newShape;
-        if (link.target === active) link.target = newShape;
-        updateConnectorGeometry(link);
-      }
-
-      canvas.requestRenderAll();
-    }
-    currentShapeSubType.value = newType;
-  }
-
-  function setStrokeDash(dash: number[] | null) {
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const objects = canvas.getActiveObjects();
-    for (const obj of objects) {
-      const target = ShapeTool.getShapeChild(obj);
-      target.set('strokeDashArray', dash && dash.length > 0 ? [...dash] : undefined);
-    }
-    canvas.requestRenderAll();
-  }
-
-  let copiedStyle: Record<string, any> | null = null;
-
-  function copyStyle() {
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const active = canvas.getActiveObject();
-    if (!active) return;
-    const shapeChild = ShapeTool.getShapeChild(active);
-    copiedStyle = {
-      fill: shapeChild.fill,
-      stroke: shapeChild.stroke,
-      strokeWidth: shapeChild.strokeWidth,
-      strokeDashArray: shapeChild.strokeDashArray,
-      opacity: active.opacity,
-    };
-  }
-
-  function pasteStyle() {
-    if (!copiedStyle) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const objects = canvas.getActiveObjects();
-    for (const obj of objects) {
-      const target = ShapeTool.getShapeChild(obj);
-      const { opacity, ...shapeProps } = copiedStyle;
-      target.set(shapeProps);
-      if (opacity !== undefined) obj.set('opacity', opacity);
-    }
-    canvas.requestRenderAll();
-  }
-
-  function hasCopiedStyle() {
-    return copiedStyle !== null;
-  }
-
-  async function copyAsImage() {
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const active = canvas.getActiveObject();
-    if (!active) return;
-
-    const bound = active.getBoundingRect();
-    const zoom = canvas.getZoom();
-    const vpt = canvas.viewportTransform;
-    if (!vpt) return;
-
-    const left = (bound.left - vpt[4]) / zoom;
-    const top = (bound.top - vpt[5]) / zoom;
-    const width = bound.width / zoom;
-    const height = bound.height / zoom;
-
-    try {
-      const dataUrl = canvas.toDataURL({
-        format: 'png',
-        quality: 1,
-        multiplier: 2,
-        left,
-        top,
-        width,
-        height,
-      });
-      const res = await fetch(dataUrl);
-      const blob = await res.blob();
-      await navigator.clipboard.write([
-        new ClipboardItem({ 'image/png': blob }),
-      ]);
-      ElMessage.success($t('whiteboard.menu.copiedToClipboard'));
-    } catch {
-      ElMessage.warning($t('whiteboard.menu.copyFailed'));
-    }
-  }
-
-  function rotateSelected(angle: number) {
-    if (isReadonly.value) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const active = canvas.getActiveObject();
-    if (!active) return;
-    active.rotate((active.angle ?? 0) + angle);
-    active.setCoords();
-    canvas.requestRenderAll();
-  }
-
-  function selectAll() {
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const objects = canvas.getObjects().filter((obj) => {
-      if ((obj as any).isPortIndicator) return false;
-      if ((obj as any).isConnectorLabel) return false;
-      if (!obj.selectable) return false;
-      return true;
-    });
-    if (objects.length === 0) return;
-    canvas.discardActiveObject();
-    const selection = new fabric.ActiveSelection(objects, { canvas });
-    canvas.setActiveObject(selection);
-    canvas.requestRenderAll();
-  }
-
-  function zoomIn() {
-    canvasManager.zoomIn();
-    viewport.value = canvasManager.getViewport();
-  }
-
-  function zoomOut() {
-    canvasManager.zoomOut();
-    viewport.value = canvasManager.getViewport();
-  }
-
-  function zoomToFit() {
-    canvasManager.zoomToFit();
-    viewport.value = canvasManager.getViewport();
-  }
-
-  function resetZoom() {
-    canvasManager.resetZoom();
-    viewport.value = canvasManager.getViewport();
-  }
-
-  function toJSON(): WhiteboardData {
-    return {
-      version: WHITEBOARD_VERSION,
-      viewport: viewport.value,
-      background: {
-        type: backgroundType.value,
-        color: backgroundSolidColor.value,
-      },
-      objects: canvasManager.toJSON().objects || [],
-      thumbnail: canvasManager.toDataURL({ format: 'png', quality: 0.6 }),
-    };
-  }
-
-  async function loadFromJSON(data: WhiteboardData) {
-    if (!data) return;
-    if (data.viewport) {
-      viewport.value = data.viewport;
-    }
-    if (data.background) {
-      backgroundType.value = data.background.type;
-      backgroundSolidColor.value = data.background.color;
-      canvasManager.setBackground(
-        data.background.type,
-        data.background.color,
-      );
-    }
-    if (data.objects) {
-      await canvasManager.loadFromJSON({ objects: data.objects });
-    }
-    if (data.viewport) {
-      canvasManager.setViewport(data.viewport);
-    }
-    rebuildConnectorLinks();
-    syncConnectorLabelBackgroundColors();
-    historyManager.resetBaseline();
-  }
-
-  function getObjBounds(obj: fabric.FabricObject) {
-    const c = obj.getCenterPoint();
-    const w = (obj.width ?? 0) * (obj.scaleX ?? 1);
-    const h = (obj.height ?? 0) * (obj.scaleY ?? 1);
-    return { cx: c.x, cy: c.y, hw: w / 2, hh: h / 2 };
-  }
-
-  function edgePoint(
-    b: { cx: number; cy: number; hw: number; hh: number },
-    dx: number,
-    dy: number,
-  ): { x: number; y: number } {
-    const absDx = Math.abs(dx);
-    const absDy = Math.abs(dy);
-    if (absDx === 0 && absDy === 0) return { x: b.cx, y: b.cy };
-    if (absDx * b.hh > absDy * b.hw) {
-      return { x: b.cx + (dx > 0 ? b.hw : -b.hw), y: b.cy + dy * b.hw / absDx };
-    }
-    return { x: b.cx + dx * b.hh / absDy, y: b.cy + (dy > 0 ? b.hh : -b.hh) };
-  }
-
-  function computeOrthogonalRoute(
-    source: fabric.FabricObject,
-    target: fabric.FabricObject,
-  ): { x: number; y: number }[] {
-    const s = getObjBounds(source);
-    const t = getObjBounds(target);
-    const dx = t.cx - s.cx;
-    const dy = t.cy - s.cy;
-    const absDx = Math.abs(dx);
-    const absDy = Math.abs(dy);
-
-    if (absDx >= absDy) {
-      const exitX = s.cx + (dx > 0 ? s.hw : -s.hw);
-      const entryX = t.cx + (dx > 0 ? -t.hw : t.hw);
-      const midX = (exitX + entryX) / 2;
-      if (Math.abs(s.cy - t.cy) < 1) {
-        return [{ x: exitX, y: s.cy }, { x: entryX, y: t.cy }];
-      }
-      return [
-        { x: exitX, y: s.cy },
-        { x: midX, y: s.cy },
-        { x: midX, y: t.cy },
-        { x: entryX, y: t.cy },
-      ];
-    }
-    const exitY = s.cy + (dy > 0 ? s.hh : -s.hh);
-    const entryY = t.cy + (dy > 0 ? -t.hh : t.hh);
-    const midY = (exitY + entryY) / 2;
-    if (Math.abs(s.cx - t.cx) < 1) {
-      return [{ x: s.cx, y: exitY }, { x: t.cx, y: entryY }];
-    }
-    return [
-      { x: s.cx, y: exitY },
-      { x: s.cx, y: midY },
-      { x: t.cx, y: midY },
-      { x: t.cx, y: entryY },
-    ];
-  }
-
-  function computeStraightRoute(
-    source: fabric.FabricObject,
-    target: fabric.FabricObject,
-  ): { x: number; y: number }[] {
-    const s = getObjBounds(source);
-    const t = getObjBounds(target);
-    const dx = t.cx - s.cx;
-    const dy = t.cy - s.cy;
-    return [edgePoint(s, dx, dy), edgePoint(t, -dx, -dy)];
-  }
-
-  function computeRoute(
-    source: fabric.FabricObject,
-    target: fabric.FabricObject,
-    routeType: ConnectorRouteType,
-  ): { x: number; y: number }[] {
-    return routeType === 'straight'
-      ? computeStraightRoute(source, target)
-      : computeOrthogonalRoute(source, target);
-  }
-
-  function appendArrowMarker(d: string, tip: { x: number; y: number }, prev: { x: number; y: number }): string {
-    const HL = 10;
-    const angle = Math.atan2(tip.y - prev.y, tip.x - prev.x);
-    const a1x = tip.x - HL * Math.cos(angle - Math.PI / 6);
-    const a1y = tip.y - HL * Math.sin(angle - Math.PI / 6);
-    const a2x = tip.x - HL * Math.cos(angle + Math.PI / 6);
-    const a2y = tip.y - HL * Math.sin(angle + Math.PI / 6);
-    return `${d} M ${a1x} ${a1y} L ${tip.x} ${tip.y} L ${a2x} ${a2y}`;
-  }
-
-  function buildConnectorPathStr(
-    points: { x: number; y: number }[],
-    startStyle: EndpointStyle = 'none',
-    endStyle: EndpointStyle = 'arrow',
-  ): string {
-    if (points.length < 2) return '';
-    let d = `M ${points[0]!.x} ${points[0]!.y}`;
-    for (let i = 1; i < points.length; i++) {
-      d += ` L ${points[i]!.x} ${points[i]!.y}`;
-    }
-    if (endStyle === 'arrow') {
-      d = appendArrowMarker(d, points[points.length - 1]!, points[points.length - 2]!);
-    }
-    if (startStyle === 'arrow') {
-      d = appendArrowMarker(d, points[0]!, points[1]!);
-    }
-    return d;
-  }
-
-  function createConnectorPath(
-    points: { x: number; y: number }[],
-    startStyle: EndpointStyle = 'none',
-    endStyle: EndpointStyle = 'arrow',
-  ): fabric.Path {
-    const d = buildConnectorPathStr(points, startStyle, endStyle);
-    const p = new fabric.Path(d, {
-      stroke: strokeColor.value,
-      strokeWidth: 2,
-      strokeLineCap: 'round',
-      strokeLineJoin: 'round',
-      fill: 'transparent',
-      selectable: true,
-      evented: true,
-      objectCaching: false,
-      lockMovementX: true,
-      lockMovementY: true,
-      hasControls: false,
-      hasBorders: false,
-      perPixelTargetFind: true,
-      strokeUniform: true,
-      padding: 8,
-    });
-    (p as any).isDynamicConnector = true;
-    return p;
-  }
-
-  function updateConnectorGeometry(link: ConnectorLink, preserveSelection = false) {
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-    const points = computeRoute(link.source, link.target, link.routeType);
-    const oldPath = link.path;
-    const wasSelected = canvas.getActiveObject() === oldPath;
-
-    const prevStroke = oldPath.stroke;
-    const prevStrokeWidth = oldPath.strokeWidth;
-    const prevDash = oldPath.strokeDashArray;
-    const prevOpacity = oldPath.opacity;
-
-    const newPath = createConnectorPath(points, link.startStyle, link.endStyle);
-    newPath.set({ stroke: prevStroke, strokeWidth: prevStrokeWidth, strokeDashArray: prevDash, opacity: prevOpacity });
-    copyConnectorPathMetadata(oldPath, newPath);
-
-    cleaningConnectors = true;
-    canvas.remove(oldPath);
-    cleaningConnectors = false;
-
-    canvas.add(newPath);
-    canvas.sendObjectToBack(newPath);
-    link.path = newPath;
-
-    if (preserveSelection && wasSelected) {
-      canvas.setActiveObject(newPath);
-    }
-
-    if (link.label) {
-      const mid = getConnectorMidpoint(link);
-      link.label.set({ left: mid.x, top: mid.y });
-      link.label.setCoords();
-    }
-  }
-
-  function findConnectorLink(pathObj: fabric.FabricObject): ConnectorLink | undefined {
-    return connectorLinks.find(link => link.path === pathObj);
-  }
-
-  function updateConnectorProp(
-    pathObj: fabric.FabricObject,
-    props: {
-      startStyle?: EndpointStyle;
-      endStyle?: EndpointStyle;
-      routeType?: ConnectorRouteType;
-      stroke?: string;
-      strokeWidth?: number;
-      strokeDashArray?: number[] | undefined;
-      opacity?: number;
-    },
-  ): fabric.Path | null {
-    const link = findConnectorLink(pathObj);
-    if (!link) return null;
-
-    const needsRebuild = props.startStyle !== undefined
-      || props.endStyle !== undefined
-      || props.routeType !== undefined;
-
-    if (props.startStyle !== undefined) link.startStyle = props.startStyle;
-    if (props.endStyle !== undefined) link.endStyle = props.endStyle;
-    if (props.routeType !== undefined) link.routeType = props.routeType;
-
-    if (needsRebuild) {
-      if (props.stroke !== undefined) link.path.set('stroke', props.stroke);
-      if (props.strokeWidth !== undefined) link.path.set('strokeWidth', props.strokeWidth);
-      if ('strokeDashArray' in props) link.path.set('strokeDashArray', props.strokeDashArray);
-      if (props.opacity !== undefined) link.path.set('opacity', props.opacity);
-      updateConnectorGeometry(link, true);
-    } else {
-      if (props.stroke !== undefined) link.path.set('stroke', props.stroke);
-      if (props.strokeWidth !== undefined) link.path.set('strokeWidth', props.strokeWidth);
-      if ('strokeDashArray' in props) link.path.set('strokeDashArray', props.strokeDashArray);
-      if (props.opacity !== undefined) link.path.set('opacity', props.opacity);
-      link.path.setCoords();
-    }
-
-    canvasManager.canvas?.requestRenderAll();
-    return link.path;
-  }
-
-  function swapConnectorDirection(pathObj: fabric.FabricObject): fabric.Path | null {
-    const link = findConnectorLink(pathObj);
-    if (!link) return null;
-    [link.source, link.target] = [link.target, link.source];
-    [link.startStyle, link.endStyle] = [link.endStyle, link.startStyle];
-    const pa = link.path as any;
-    if (pa.connectorSourceId && pa.connectorTargetId) {
-      const x = pa.connectorSourceId;
-      pa.connectorSourceId = pa.connectorTargetId;
-      pa.connectorTargetId = x;
-    }
-    updateConnectorGeometry(link, true);
-    canvasManager.canvas?.requestRenderAll();
-    return link.path;
-  }
-
-  function getAffectedObjects(target: fabric.FabricObject): fabric.FabricObject[] {
-    if (target instanceof fabric.ActiveSelection) {
-      return target.getObjects();
-    }
-    return [target];
-  }
-
-  function onObjectMovingUpdateConnectors(e: any) {
-    const movedObj = e.target;
-    if (!movedObj) return;
-    const affected = getAffectedObjects(movedObj);
-    let updated = false;
-    for (const link of connectorLinks) {
-      if (affected.includes(link.source) || affected.includes(link.target)) {
-        updateConnectorGeometry(link);
-        updated = true;
-      }
-    }
-    if (updated) {
-      canvasManager.canvas?.requestRenderAll();
-    }
-  }
-
-  let cleaningConnectors = false;
-
-  function onObjectRemovedCleanConnectors(e: any) {
-    if (cleaningConnectors) return;
-    const removed = e.target;
-    if (!removed) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-
-    cleaningConnectors = true;
-    try {
-      for (let i = connectorLinks.length - 1; i >= 0; i--) {
-        const link = connectorLinks[i]!;
-        if (link.label === removed) {
-          link.label = undefined;
-          continue;
-        }
-        if (link.source === removed || link.target === removed || link.path === removed) {
-          if (link.path !== removed) canvas.remove(link.path);
-          if (link.label) canvas.remove(link.label);
-          connectorLinks.splice(i, 1);
-        }
-      }
-    } finally {
-      cleaningConnectors = false;
-    }
-  }
-
-  type Direction = 'top' | 'right' | 'bottom' | 'left';
-
-  function addConnectedShape(
-    sourceObj: fabric.FabricObject,
-    direction: Direction,
-    subType: ShapeSubType,
-  ) {
-    if (isReadonly.value) return;
-    const canvas = canvasManager.canvas;
-    if (!canvas) return;
-
-    const shapeTool = toolManager.getTool(ToolType.Shape) as ShapeTool | undefined;
-    if (!shapeTool) return;
-
-    const bound = sourceObj.getBoundingRect();
-    const zoom = canvas.getZoom();
-    const vpt = canvas.viewportTransform;
-    if (!vpt) return;
-
-    const srcLeft = (bound.left - vpt[4]) / zoom;
-    const srcTop = (bound.top - vpt[5]) / zoom;
-    const srcW = bound.width / zoom;
-    const srcH = bound.height / zoom;
-    const srcCX = srcLeft + srcW / 2;
-    const srcCY = srcTop + srcH / 2;
-
-    const GAP = 80;
-    const newW = Math.max(srcW, 60);
-    const newH = Math.max(srcH, 40);
-
-    let newCX: number;
-    let newCY: number;
-
-    switch (direction) {
-      case 'top':
-        newCX = srcCX;
-        newCY = srcCY - srcH / 2 - GAP - newH / 2;
-        break;
-      case 'bottom':
-        newCX = srcCX;
-        newCY = srcCY + srcH / 2 + GAP + newH / 2;
-        break;
-      case 'left':
-        newCX = srcCX - srcW / 2 - GAP - newW / 2;
-        newCY = srcCY;
-        break;
-      case 'right':
-      default:
-        newCX = srcCX + srcW / 2 + GAP + newW / 2;
-        newCY = srcCY;
-        break;
-    }
-
-    const prevType = shapeTool.shapeType;
-    shapeTool.setShapeType(subType);
-    const newShape = shapeTool.createShapeWithProps(
-      newCX - newW / 2, newCY - newH / 2, newW, newH,
-      { fill: fillColor.value, stroke: strokeColor.value, strokeWidth: strokeWidth.value },
-    );
-    shapeTool.setShapeType(prevType);
-    if (!newShape) return;
-    newShape.set({ selectable: true, evented: true });
-    canvas.add(newShape);
-    newShape.setCoords();
-
-    ensureWbId(sourceObj);
-    ensureWbId(newShape);
-    const linkId = crypto.randomUUID();
-    const routePoints = computeOrthogonalRoute(sourceObj, newShape);
-    const connPath = createConnectorPath(routePoints, 'none', 'arrow');
-    const cp = connPath as any;
-    cp.connectorLinkId = linkId;
-    cp.connectorSourceId = (sourceObj as any).wbId;
-    cp.connectorTargetId = (newShape as any).wbId;
-    cp.connectorRouteType = 'orthogonal';
-    cp.connectorStartStyle = 'none';
-    cp.connectorEndStyle = 'arrow';
-    canvas.add(connPath);
-    canvas.sendObjectToBack(connPath);
-
-    connectorLinks.push({
-      source: sourceObj,
-      target: newShape,
-      path: connPath,
-      startStyle: 'none',
-      endStyle: 'arrow',
-      routeType: 'orthogonal',
-    });
-
-    canvas.setActiveObject(newShape);
-    canvas.requestRenderAll();
-
-    return newShape;
-  }
-
-  function getCanvas() {
-    return canvasManager.canvas;
-  }
-
-  function getThumbnail(): string {
-    return canvasManager.toDataURL({ format: 'png', quality: 0.6 });
-  }
-
-  function exportPNG() {
-    exportManager.exportPNG();
-  }
-
-  function exportSVG() {
-    exportManager.exportSVG();
-  }
-
-  function exportJSON() {
-    exportManager.exportJSON();
-  }
-
-  function destroy() {
-    isCanvasReady.value = false;
-    shortcutManager.destroy();
-    snapManager.destroy();
-    clipboardManager.destroy();
-    exportManager.destroy();
-    historyManager.destroy();
-    toolManager.destroy();
-    canvasManager.destroy();
-  }
-
-  return {
-    canvasManager,
-    toolManager,
-    historyManager,
-    clipboardManager,
-    snapManager,
-    exportManager,
-    canUndo,
-    canRedo,
-    undo,
-    redo,
-    exportPNG,
-    exportSVG,
-    exportJSON,
-    currentTool,
-    currentShapeSubType,
-    currentConnectorSubType,
-    viewport,
-    fillColor,
-    strokeColor,
-    strokeWidth,
-    backgroundType,
-    backgroundSolidColor,
-    selectedObjectCount,
-    selectionVersion,
-    isReadonly,
-    isCanvasReady,
-    initCanvas,
-    setTool,
-    setShapeSubType,
-    setConnectorSubType,
-    connectObjects,
-    placeShapeOnCanvas,
-    startDragPreview,
-    updateDragPreview,
-    finalizeDragPreview,
-    cancelDragPreview,
-    isPointInCanvas,
-    setFillColor,
-    setStrokeColor,
-    setStrokeWidth,
-    setBackground,
-    getCanvasSolidBackgroundColor,
-    syncConnectorLabelBackgroundColors,
-    changeShapeType,
-    setStrokeDash,
-    copyStyle,
-    pasteStyle,
-    hasCopiedStyle,
-    deleteSelected,
-    groupSelected,
-    ungroupSelected,
-    flipSelected,
-    alignObjects,
-    copyAsImage,
-    rotateSelected,
-    addConnectedShape,
-    findConnectorLink,
-    updateConnectorProp,
-    swapConnectorDirection,
-    screenToCanvasPos,
-    selectAll,
-    zoomIn,
-    zoomOut,
-    zoomToFit,
-    resetZoom,
-    toJSON,
-    loadFromJSON,
-    getCanvas,
-    getThumbnail,
-    destroy,
-  };
-});
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/arrow-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/arrow-tool.ts
deleted file mode 100644
index 73eebd0..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/arrow-tool.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import * as fabric from 'fabric';
-
-import {
-  DEFAULT_STROKE_COLOR,
-  DEFAULT_STROKE_WIDTH,
-} from '../constants';
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-export class ArrowTool implements BaseTool {
-  name = ToolType.Arrow;
-  cursor = 'crosshair';
-
-  private isDrawing = false;
-  private startPoint: { x: number; y: number } | null = null;
-  private linePart: fabric.Line | null = null;
-  private color = DEFAULT_STROKE_COLOR;
-  private width = DEFAULT_STROKE_WIDTH;
-
-  setColor(color: string) {
-    this.color = color;
-  }
-
-  setWidth(width: number) {
-    this.width = width;
-  }
-
-  activate(ctx: ToolContext) {
-    ctx.canvas.selection = false;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = false;
-      obj.evented = false;
-    });
-  }
-
-  deactivate(ctx: ToolContext) {
-    if (this.isDrawing && this.linePart) {
-      ctx.canvas.remove(this.linePart);
-    }
-    this.cleanup();
-    ctx.canvas.selection = true;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = true;
-      obj.evented = true;
-    });
-    ctx.canvas.requestRenderAll();
-  }
-
-  onMouseDown(ctx: ToolContext, e: any) {
-    if (e.e.button !== 0) return;
-    const pointer = ctx.canvas.getScenePoint(e.e);
-    this.isDrawing = true;
-    this.startPoint = { x: pointer.x, y: pointer.y };
-
-    this.linePart = new fabric.Line(
-      [pointer.x, pointer.y, pointer.x, pointer.y],
-      {
-        stroke: this.color,
-        strokeWidth: this.width,
-        strokeLineCap: 'round',
-        selectable: false,
-        evented: false,
-      },
-    );
-    ctx.canvas.add(this.linePart);
-  }
-
-  onMouseMove(ctx: ToolContext, e: any) {
-    if (!this.isDrawing || !this.linePart || !this.startPoint) return;
-    const pointer = ctx.canvas.getScenePoint(e.e);
-
-    let x2 = pointer.x;
-    let y2 = pointer.y;
-
-    if (e.e.shiftKey) {
-      const dx = Math.abs(x2 - this.startPoint.x);
-      const dy = Math.abs(y2 - this.startPoint.y);
-      if (dx > dy) {
-        y2 = this.startPoint.y;
-      } else {
-        x2 = this.startPoint.x;
-      }
-    }
-
-    this.linePart.set({ x2, y2 });
-    ctx.canvas.requestRenderAll();
-  }
-
-  onMouseUp(ctx: ToolContext, _e: any) {
-    if (!this.isDrawing || !this.linePart || !this.startPoint) return;
-    this.isDrawing = false;
-
-    const x1 = this.linePart.x1!;
-    const y1 = this.linePart.y1!;
-    const x2 = this.linePart.x2!;
-    const y2 = this.linePart.y2!;
-    const len = Math.hypot(x2 - x1, y2 - y1);
-
-    if (len < 5) {
-      ctx.canvas.remove(this.linePart);
-      this.cleanup();
-      return;
-    }
-
-    ctx.canvas.remove(this.linePart);
-
-    const headLen = Math.max(10, this.width * 4);
-    const angle = Math.atan2(y2 - y1, x2 - x1);
-
-    const headPoints = [
-      { x: x2, y: y2 },
-      {
-        x: x2 - headLen * Math.cos(angle - Math.PI / 6),
-        y: y2 - headLen * Math.sin(angle - Math.PI / 6),
-      },
-      {
-        x: x2 - headLen * Math.cos(angle + Math.PI / 6),
-        y: y2 - headLen * Math.sin(angle + Math.PI / 6),
-      },
-    ];
-
-    const line = new fabric.Line([x1, y1, x2, y2], {
-      stroke: this.color,
-      strokeWidth: this.width,
-      strokeLineCap: 'round',
-    });
-
-    const head = new fabric.Polygon(headPoints, {
-      fill: this.color,
-      stroke: this.color,
-      strokeWidth: 1,
-    });
-
-    const group = new fabric.Group([line, head], {
-      selectable: true,
-      evented: true,
-    });
-
-    ctx.canvas.add(group);
-    ctx.canvas.setActiveObject(group);
-    ctx.canvas.requestRenderAll();
-    this.cleanup();
-  }
-
-  private cleanup() {
-    this.isDrawing = false;
-    this.startPoint = null;
-    this.linePart = null;
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/connector-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/connector-tool.ts
deleted file mode 100644
index a4c6249..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/connector-tool.ts
+++ /dev/null
@@ -1,388 +0,0 @@
-import * as fabric from 'fabric';
-
-import type { BaseTool, ConnectorRouteType, EndpointStyle, ToolContext } from '../types';
-import { ConnectorSubType, ToolType } from '../types';
-
-interface SnapPort {
-  x: number;
-  y: number;
-  dir: 'top' | 'right' | 'bottom' | 'left';
-}
-
-const SNAP_DIST = 20;
-const HOVER_MARGIN = 30;
-const PORT_R = 4;
-const PORT_R_ACTIVE = 6;
-
-export class ConnectorTool implements BaseTool {
-  name = ToolType.Connector;
-  cursor = 'crosshair';
-  subType = ConnectorSubType.ElbowConnector;
-
-  private isDrawing = false;
-  private sourceObj: fabric.FabricObject | null = null;
-  private sourcePort: SnapPort | null = null;
-  private previewPath: fabric.Path | null = null;
-  private portDots: fabric.Circle[] = [];
-
-  get routeType(): ConnectorRouteType {
-    return this.subType === ConnectorSubType.ElbowConnector
-      ? 'orthogonal'
-      : 'straight';
-  }
-
-  get endStyle(): EndpointStyle {
-    return this.subType === ConnectorSubType.StraightLine ? 'none' : 'arrow';
-  }
-
-  setSubType(st: ConnectorSubType) {
-    this.subType = st;
-  }
-
-  activate(ctx: ToolContext) {
-    ctx.canvas.selection = false;
-    ctx.canvas.defaultCursor = this.cursor;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = false;
-      obj.evented = false;
-    });
-    for (let i = 0; i < 4; i++) {
-      const dot = new fabric.Circle({
-        radius: PORT_R,
-        fill: 'rgba(74,144,217,0.6)',
-        stroke: '#fff',
-        strokeWidth: 1.5,
-        visible: false,
-        selectable: false,
-        evented: false,
-        originX: 'center',
-        originY: 'center',
-        objectCaching: false,
-      });
-      (dot as any).isPortIndicator = true;
-      this.portDots.push(dot);
-      ctx.canvas.add(dot);
-    }
-  }
-
-  deactivate(ctx: ToolContext) {
-    this.cleanup(ctx);
-    ctx.canvas.selection = true;
-    ctx.canvas.forEachObject((obj) => {
-      if (!(obj as any).isPortIndicator) {
-        obj.selectable = true;
-        obj.evented = true;
-      }
-    });
-    ctx.canvas.requestRenderAll();
-  }
-
-  onMouseDown(ctx: ToolContext, e: any) {
-    if (e.e.button !== 0) return;
-    const p = ctx.canvas.getScenePoint(e.e);
-    const { shape, port } = this.nearestPort(ctx, p);
-    this.isDrawing = true;
-    this.sourceObj = shape;
-    this.sourcePort = port ?? { x: p.x, y: p.y, dir: 'right' };
-  }
-
-  onMouseMove(ctx: ToolContext, e: any) {
-    const p = ctx.canvas.getScenePoint(e.e);
-    if (this.isDrawing) {
-      this.drawPreview(ctx, p);
-      this.showPorts(ctx, p, this.sourceObj);
-    } else {
-      this.showPorts(ctx, p);
-    }
-  }
-
-  onMouseUp(ctx: ToolContext, e: any) {
-    if (!this.isDrawing) return;
-    this.isDrawing = false;
-    const p = ctx.canvas.getScenePoint(e.e);
-
-    if (this.previewPath) {
-      ctx.canvas.remove(this.previewPath);
-      this.previewPath = null;
-    }
-
-    const { shape: tgt } = this.nearestPort(
-      ctx,
-      p,
-      this.sourceObj ?? undefined,
-    );
-
-    let created = false;
-
-    if (this.sourceObj && tgt && tgt !== this.sourceObj) {
-      ctx.store.connectObjects?.(
-        this.sourceObj,
-        tgt,
-        this.routeType,
-        'none' as EndpointStyle,
-        this.endStyle,
-      );
-      created = true;
-    } else if (this.sourcePort) {
-      const len = Math.hypot(
-        p.x - this.sourcePort.x,
-        p.y - this.sourcePort.y,
-      );
-      if (len >= 5) {
-        this.createStaticPath(ctx, this.sourcePort, p);
-        created = true;
-      }
-    }
-
-    this.sourceObj = null;
-    this.sourcePort = null;
-    this.hidePorts();
-    ctx.canvas.requestRenderAll();
-
-    if (created) {
-      ctx.store.setTool?.(ToolType.Select);
-    }
-  }
-
-  /* ---------- internal helpers ---------- */
-
-  private getShapePorts(obj: fabric.FabricObject): SnapPort[] {
-    const c = obj.getCenterPoint();
-    const hw = ((obj.width ?? 0) * (obj.scaleX ?? 1)) / 2;
-    const hh = ((obj.height ?? 0) * (obj.scaleY ?? 1)) / 2;
-    return [
-      { x: c.x, y: c.y - hh, dir: 'top' },
-      { x: c.x + hw, y: c.y, dir: 'right' },
-      { x: c.x, y: c.y + hh, dir: 'bottom' },
-      { x: c.x - hw, y: c.y, dir: 'left' },
-    ];
-  }
-
-  private isHelper(obj: fabric.FabricObject): boolean {
-    return !!(
-      (obj as any).isPortIndicator ||
-      (obj as any).isDynamicConnector ||
-      (obj as any).isConnectorLabel ||
-      obj === this.previewPath
-    );
-  }
-
-  private nearestPort(
-    ctx: ToolContext,
-    pt: { x: number; y: number },
-    exclude?: fabric.FabricObject,
-  ): { shape: fabric.FabricObject | null; port: SnapPort | null } {
-    let best: { shape: fabric.FabricObject; port: SnapPort } | null = null;
-    let bestD = SNAP_DIST;
-    for (const obj of ctx.canvas.getObjects()) {
-      if (this.isHelper(obj) || obj === exclude) continue;
-      for (const sp of this.getShapePorts(obj)) {
-        const d = Math.hypot(pt.x - sp.x, pt.y - sp.y);
-        if (d < bestD) {
-          bestD = d;
-          best = { shape: obj, port: sp };
-        }
-      }
-    }
-    return best ?? { shape: null, port: null };
-  }
-
-  private nearestShape(
-    ctx: ToolContext,
-    pt: { x: number; y: number },
-    exclude?: fabric.FabricObject,
-  ): fabric.FabricObject | null {
-    let best: fabric.FabricObject | null = null;
-    let bestD = Infinity;
-    for (const obj of ctx.canvas.getObjects()) {
-      if (this.isHelper(obj) || obj === exclude) continue;
-      const c = obj.getCenterPoint();
-      const hw = ((obj.width ?? 0) * (obj.scaleX ?? 1)) / 2;
-      const hh = ((obj.height ?? 0) * (obj.scaleY ?? 1)) / 2;
-      if (
-        pt.x < c.x - hw - HOVER_MARGIN ||
-        pt.x > c.x + hw + HOVER_MARGIN ||
-        pt.y < c.y - hh - HOVER_MARGIN ||
-        pt.y > c.y + hh + HOVER_MARGIN
-      )
-        continue;
-      const d = Math.hypot(pt.x - c.x, pt.y - c.y);
-      if (d < bestD) {
-        bestD = d;
-        best = obj;
-      }
-    }
-    return best;
-  }
-
-  private showPorts(
-    ctx: ToolContext,
-    pt: { x: number; y: number },
-    exclude?: fabric.FabricObject | null,
-  ) {
-    const shape = this.nearestShape(ctx, pt, exclude ?? undefined);
-    if (!shape) {
-      this.hidePorts();
-      ctx.canvas.requestRenderAll();
-      return;
-    }
-    const ports = this.getShapePorts(shape);
-    const { port: nearPort } = this.nearestPort(
-      ctx,
-      pt,
-      exclude ?? undefined,
-    );
-    for (let i = 0; i < 4; i++) {
-      const dot = this.portDots[i]!;
-      const sp = ports[i]!;
-      const active =
-        nearPort &&
-        Math.abs(nearPort.x - sp.x) < 1 &&
-        Math.abs(nearPort.y - sp.y) < 1;
-      dot.set({
-        left: sp.x,
-        top: sp.y,
-        visible: true,
-        radius: active ? PORT_R_ACTIVE : PORT_R,
-        fill: active ? '#4a90d9' : 'rgba(74,144,217,0.5)',
-      });
-      dot.setCoords();
-    }
-    ctx.canvas.requestRenderAll();
-  }
-
-  private hidePorts() {
-    for (const d of this.portDots) d.set({ visible: false });
-  }
-
-  private drawPreview(ctx: ToolContext, end: { x: number; y: number }) {
-    if (this.previewPath) ctx.canvas.remove(this.previewPath);
-    if (!this.sourcePort) return;
-    const { port: snapPort } = this.nearestPort(
-      ctx,
-      end,
-      this.sourceObj ?? undefined,
-    );
-    const to = snapPort ?? end;
-    const s = this.sourcePort;
-    let d: string;
-
-    if (this.routeType === 'orthogonal') {
-      const dx = to.x - s.x;
-      const dy = to.y - s.y;
-      if (Math.abs(dx) >= Math.abs(dy)) {
-        const mx = (s.x + to.x) / 2;
-        d = `M ${s.x} ${s.y} L ${mx} ${s.y} L ${mx} ${to.y} L ${to.x} ${to.y}`;
-      } else {
-        const my = (s.y + to.y) / 2;
-        d = `M ${s.x} ${s.y} L ${s.x} ${my} L ${to.x} ${my} L ${to.x} ${to.y}`;
-      }
-    } else {
-      d = `M ${s.x} ${s.y} L ${to.x} ${to.y}`;
-    }
-
-    this.previewPath = new fabric.Path(d, {
-      stroke: '#4a90d9',
-      strokeWidth: 2,
-      strokeDashArray: [6, 3],
-      fill: 'transparent',
-      selectable: false,
-      evented: false,
-      objectCaching: false,
-    });
-    ctx.canvas.add(this.previewPath);
-  }
-
-  private createStaticPath(
-    ctx: ToolContext,
-    start: SnapPort,
-    end: { x: number; y: number },
-  ) {
-    let d: string;
-    if (this.routeType === 'orthogonal') {
-      const dx = end.x - start.x;
-      const dy = end.y - start.y;
-      if (Math.abs(dx) >= Math.abs(dy)) {
-        const mx = (start.x + end.x) / 2;
-        d = `M ${start.x} ${start.y} L ${mx} ${start.y} L ${mx} ${end.y} L ${end.x} ${end.y}`;
-      } else {
-        const my = (start.y + end.y) / 2;
-        d = `M ${start.x} ${start.y} L ${start.x} ${my} L ${end.x} ${my} L ${end.x} ${end.y}`;
-      }
-    } else {
-      d = `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
-    }
-
-    if (this.endStyle === 'arrow') {
-      const pts =
-        this.routeType === 'orthogonal'
-          ? this.getOrthogonalPoints(start, end)
-          : [start, end];
-      const last = pts[pts.length - 1]!;
-      const prev = pts[pts.length - 2]!;
-      const angle = Math.atan2(last.y - prev.y, last.x - prev.x);
-      const HL = 10;
-      const a1x = last.x - HL * Math.cos(angle - Math.PI / 6);
-      const a1y = last.y - HL * Math.sin(angle - Math.PI / 6);
-      const a2x = last.x - HL * Math.cos(angle + Math.PI / 6);
-      const a2y = last.y - HL * Math.sin(angle + Math.PI / 6);
-      d += ` M ${a1x} ${a1y} L ${last.x} ${last.y} L ${a2x} ${a2y}`;
-    }
-
-    const path = new fabric.Path(d, {
-      stroke: ctx.store.strokeColor?.value ?? '#1e1e1e',
-      strokeWidth: ctx.store.strokeWidth?.value ?? 2,
-      strokeLineCap: 'round',
-      strokeLineJoin: 'round',
-      fill: 'transparent',
-      selectable: true,
-      evented: true,
-      objectCaching: false,
-      perPixelTargetFind: true,
-      strokeUniform: true,
-      padding: 8,
-      hasBorders: false,
-      hasControls: false,
-      lockMovementX: true,
-      lockMovementY: true,
-    });
-    (path as any).isDynamicConnector = true;
-    ctx.canvas.add(path);
-  }
-
-  private getOrthogonalPoints(
-    start: { x: number; y: number },
-    end: { x: number; y: number },
-  ): { x: number; y: number }[] {
-    const dx = end.x - start.x;
-    const dy = end.y - start.y;
-    if (Math.abs(dx) >= Math.abs(dy)) {
-      const mx = (start.x + end.x) / 2;
-      return [
-        start,
-        { x: mx, y: start.y },
-        { x: mx, y: end.y },
-        end,
-      ];
-    }
-    const my = (start.y + end.y) / 2;
-    return [
-      start,
-      { x: start.x, y: my },
-      { x: end.x, y: my },
-      end,
-    ];
-  }
-
-  private cleanup(ctx: ToolContext) {
-    for (const dot of this.portDots) ctx.canvas.remove(dot);
-    this.portDots = [];
-    if (this.previewPath) {
-      ctx.canvas.remove(this.previewPath);
-      this.previewPath = null;
-    }
-    this.isDrawing = false;
-    this.sourceObj = null;
-    this.sourcePort = null;
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/eraser-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/eraser-tool.ts
deleted file mode 100644
index 639fd95..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/eraser-tool.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { ERASER_CURSOR } from '../constants';
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-const ERASER_RADIUS = 10;
-
-export class EraserTool implements BaseTool {
-  name = ToolType.Eraser;
-  cursor = ERASER_CURSOR;
-
-  private isErasing = false;
-  private erasedObjects = new Set<any>();
-  private originalOpacity = new Map<any, number>();
-
-  activate(ctx: ToolContext) {
-    ctx.canvas.selection = false;
-    ctx.canvas.defaultCursor = this.cursor;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = false;
-      obj.evented = false;
-    });
-  }
-
-  deactivate(ctx: ToolContext) {
-    if (this.isErasing) {
-      this.restoreOpacity(ctx);
-    }
-    this.isErasing = false;
-    this.erasedObjects.clear();
-    this.originalOpacity.clear();
-    ctx.canvas.selection = true;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = true;
-      obj.evented = true;
-    });
-    ctx.canvas.requestRenderAll();
-  }
-
-  private restoreOpacity(ctx: ToolContext) {
-    for (const [obj, opacity] of this.originalOpacity) {
-      obj.set('opacity', opacity);
-    }
-    ctx.canvas.requestRenderAll();
-  }
-
-  onMouseDown(_ctx: ToolContext, e: any) {
-    if (e.e.button !== 0) return;
-    this.isErasing = true;
-    this.erasedObjects.clear();
-    this.originalOpacity.clear();
-    this.eraseAtPoint(_ctx, e);
-  }
-
-  onMouseMove(ctx: ToolContext, e: any) {
-    if (!this.isErasing) return;
-    this.eraseAtPoint(ctx, e);
-  }
-
-  onMouseUp(ctx: ToolContext, _e: any) {
-    if (!this.isErasing) return;
-    this.isErasing = false;
-
-    if (this.erasedObjects.size > 0) {
-      this.erasedObjects.forEach((obj) => {
-        ctx.canvas.remove(obj);
-      });
-      ctx.canvas.requestRenderAll();
-    }
-    this.erasedObjects.clear();
-    this.originalOpacity.clear();
-  }
-
-  private eraseAtPoint(ctx: ToolContext, e: any) {
-    const pointer = ctx.canvas.getScenePoint(e.e);
-    const objects = ctx.canvas.getObjects();
-
-    for (const obj of objects) {
-      if (this.erasedObjects.has(obj)) continue;
-      const bound = obj.getBoundingRect();
-      const inBounds =
-        pointer.x >= bound.left - ERASER_RADIUS &&
-        pointer.x <= bound.left + bound.width + ERASER_RADIUS &&
-        pointer.y >= bound.top - ERASER_RADIUS &&
-        pointer.y <= bound.top + bound.height + ERASER_RADIUS;
-
-      if (inBounds) {
-        this.originalOpacity.set(obj, (obj.opacity as number) ?? 1);
-        this.erasedObjects.add(obj);
-        obj.set('opacity', 0.3);
-        ctx.canvas.requestRenderAll();
-      }
-    }
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/hand-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/hand-tool.ts
deleted file mode 100644
index 3ef250e..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/hand-tool.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-export class HandTool implements BaseTool {
-  name = ToolType.Hand;
-  cursor = 'grab';
-
-  private isPanning = false;
-  private lastPoint: { x: number; y: number } | null = null;
-
-  activate(ctx: ToolContext) {
-    ctx.canvas.selection = false;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = false;
-      obj.evented = false;
-    });
-    ctx.canvas.setCursor('grab');
-  }
-
-  deactivate(ctx: ToolContext) {
-    this.isPanning = false;
-    this.lastPoint = null;
-    ctx.canvas.selection = true;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = true;
-      obj.evented = true;
-    });
-    ctx.canvas.setCursor('default');
-  }
-
-  onMouseDown(ctx: ToolContext, e: any) {
-    if (e.e.button !== 0) return;
-    this.isPanning = true;
-    this.lastPoint = { x: e.e.clientX, y: e.e.clientY };
-    ctx.canvas.setCursor('grabbing');
-  }
-
-  onMouseMove(ctx: ToolContext, e: any) {
-    if (!this.isPanning || !this.lastPoint) return;
-    const vpt = ctx.canvas.viewportTransform;
-    if (!vpt) return;
-    vpt[4] += e.e.clientX - this.lastPoint.x;
-    vpt[5] += e.e.clientY - this.lastPoint.y;
-    this.lastPoint = { x: e.e.clientX, y: e.e.clientY };
-    ctx.canvas.setViewportTransform(vpt);
-    ctx.canvas.requestRenderAll();
-  }
-
-  onMouseUp(ctx: ToolContext, _e: any) {
-    this.isPanning = false;
-    this.lastPoint = null;
-    ctx.canvas.setCursor('grab');
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/highlighter-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/highlighter-tool.ts
deleted file mode 100644
index 8060a99..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/highlighter-tool.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { PencilBrush } from 'fabric';
-
-import { HIGHLIGHTER_CURSOR } from '../constants';
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-const DEFAULT_HIGHLIGHTER_COLOR = 'rgba(255, 230, 0, 0.4)';
-const DEFAULT_HIGHLIGHTER_WIDTH = 20;
-
-export class HighlighterTool implements BaseTool {
-  name = ToolType.Highlighter;
-  cursor = HIGHLIGHTER_CURSOR;
-
-  private color = DEFAULT_HIGHLIGHTER_COLOR;
-  private width = DEFAULT_HIGHLIGHTER_WIDTH;
-
-  setColor(color: string) {
-    this.color = color;
-  }
-
-  setWidth(width: number) {
-    this.width = width;
-  }
-
-  activate(ctx: ToolContext) {
-    const { canvas } = ctx;
-    canvas.isDrawingMode = true;
-    canvas.freeDrawingCursor = HIGHLIGHTER_CURSOR;
-    const brush = new PencilBrush(canvas);
-    brush.color = this.color;
-    brush.width = this.width;
-    brush.strokeLineCap = 'square';
-    brush.strokeLineJoin = 'round';
-    canvas.freeDrawingBrush = brush;
-    canvas.selection = false;
-  }
-
-  deactivate(ctx: ToolContext) {
-    ctx.canvas.isDrawingMode = false;
-    ctx.canvas.selection = true;
-  }
-
-  updateBrush(ctx: ToolContext) {
-    const brush = ctx.canvas.freeDrawingBrush;
-    if (brush) {
-      brush.color = this.color;
-      brush.width = this.width;
-    }
-  }
-
-  onMouseDown() {}
-  onMouseMove() {}
-  onMouseUp() {}
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/image-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/image-tool.ts
deleted file mode 100644
index eb59db0..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/image-tool.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { FabricImage } from 'fabric';
-
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-export class ImageTool implements BaseTool {
-  name = ToolType.Image;
-  cursor = 'crosshair';
-
-  private fileInput: HTMLInputElement | null = null;
-  private pendingCtx: ToolContext | null = null;
-
-  activate(ctx: ToolContext) {
-    this.pendingCtx = ctx;
-    this.openFilePicker(ctx);
-  }
-
-  deactivate(_ctx: ToolContext) {
-    this.pendingCtx = null;
-    if (this.fileInput) {
-      this.fileInput.remove();
-      this.fileInput = null;
-    }
-  }
-
-  private openFilePicker(ctx: ToolContext) {
-    if (this.fileInput) {
-      this.fileInput.remove();
-      this.fileInput = null;
-    }
-
-    const input = document.createElement('input');
-    input.type = 'file';
-    input.accept = 'image/*';
-    input.style.display = 'none';
-    document.body.appendChild(input);
-    this.fileInput = input;
-
-    input.addEventListener('change', (e) => {
-      const files = (e.target as HTMLInputElement).files;
-      if (files && files[0]) {
-        this.loadImage(ctx, files[0]);
-      }
-      input.remove();
-      if (this.fileInput === input) this.fileInput = null;
-    });
-
-    input.addEventListener('cancel', () => {
-      input.remove();
-      if (this.fileInput === input) this.fileInput = null;
-    });
-
-    input.click();
-  }
-
-  private loadImage(ctx: ToolContext, file: File) {
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const dataUrl = e.target?.result as string;
-      if (!dataUrl) return;
-
-      FabricImage.fromURL(dataUrl).then((img) => {
-        const maxSize = 400;
-        const scale = Math.min(
-          maxSize / (img.width || maxSize),
-          maxSize / (img.height || maxSize),
-          1,
-        );
-        img.scale(scale);
-
-        const center = ctx.canvas.getCenterPoint();
-        img.set({
-          left: center.x,
-          top: center.y,
-          originX: 'center',
-          originY: 'center',
-        });
-
-        ctx.canvas.add(img);
-        ctx.canvas.setActiveObject(img);
-        ctx.canvas.requestRenderAll();
-      });
-    };
-    reader.readAsDataURL(file);
-  }
-
-  onMouseDown() {}
-  onMouseMove() {}
-  onMouseUp() {}
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/line-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/line-tool.ts
deleted file mode 100644
index 2ec6881..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/line-tool.ts
+++ /dev/null
@@ -1,113 +0,0 @@
-import * as fabric from 'fabric';
-
-import {
-  DEFAULT_STROKE_COLOR,
-  DEFAULT_STROKE_WIDTH,
-} from '../constants';
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-export class LineTool implements BaseTool {
-  name = ToolType.Line;
-  cursor = 'crosshair';
-
-  private isDrawing = false;
-  private startPoint: { x: number; y: number } | null = null;
-  private currentLine: fabric.Line | null = null;
-  private color = DEFAULT_STROKE_COLOR;
-  private width = DEFAULT_STROKE_WIDTH;
-
-  setColor(color: string) {
-    this.color = color;
-  }
-
-  setWidth(width: number) {
-    this.width = width;
-  }
-
-  activate(ctx: ToolContext) {
-    ctx.canvas.selection = false;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = false;
-      obj.evented = false;
-    });
-  }
-
-  deactivate(ctx: ToolContext) {
-    if (this.isDrawing && this.currentLine) {
-      ctx.canvas.remove(this.currentLine);
-    }
-    this.isDrawing = false;
-    this.currentLine = null;
-    this.startPoint = null;
-    ctx.canvas.selection = true;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = true;
-      obj.evented = true;
-    });
-    ctx.canvas.requestRenderAll();
-  }
-
-  onMouseDown(ctx: ToolContext, e: any) {
-    if (e.e.button !== 0) return;
-    const pointer = ctx.canvas.getScenePoint(e.e);
-    this.isDrawing = true;
-    this.startPoint = { x: pointer.x, y: pointer.y };
-
-    this.currentLine = new fabric.Line(
-      [pointer.x, pointer.y, pointer.x, pointer.y],
-      {
-        stroke: this.color,
-        strokeWidth: this.width,
-        strokeLineCap: 'round',
-        selectable: false,
-        evented: false,
-        originX: 'center',
-        originY: 'center',
-      },
-    );
-    ctx.canvas.add(this.currentLine);
-  }
-
-  onMouseMove(ctx: ToolContext, e: any) {
-    if (!this.isDrawing || !this.currentLine) return;
-    const pointer = ctx.canvas.getScenePoint(e.e);
-
-    let x2 = pointer.x;
-    let y2 = pointer.y;
-
-    if (e.e.shiftKey && this.startPoint) {
-      const dx = Math.abs(x2 - this.startPoint.x);
-      const dy = Math.abs(y2 - this.startPoint.y);
-      if (dx > dy) {
-        y2 = this.startPoint.y;
-      } else {
-        x2 = this.startPoint.x;
-      }
-    }
-
-    this.currentLine.set({ x2, y2 });
-    ctx.canvas.requestRenderAll();
-  }
-
-  onMouseUp(ctx: ToolContext, _e: any) {
-    if (!this.isDrawing || !this.currentLine) return;
-    this.isDrawing = false;
-
-    const len = Math.hypot(
-      this.currentLine.x2! - this.currentLine.x1!,
-      this.currentLine.y2! - this.currentLine.y1!,
-    );
-    if (len < 3) {
-      ctx.canvas.remove(this.currentLine);
-    } else {
-      this.currentLine.set({ selectable: true, evented: true });
-      this.currentLine.setCoords();
-      ctx.canvas.setActiveObject(this.currentLine);
-    }
-
-    this.currentLine = null;
-    this.startPoint = null;
-    ctx.canvas.requestRenderAll();
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/pen-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/pen-tool.ts
deleted file mode 100644
index 49e9f58..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/pen-tool.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { PencilBrush } from 'fabric';
-
-import {
-  DEFAULT_STROKE_COLOR,
-  DEFAULT_STROKE_WIDTH,
-  PEN_CURSOR,
-} from '../constants';
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-export class PenTool implements BaseTool {
-  name = ToolType.Pen;
-  cursor = PEN_CURSOR;
-
-  private color = DEFAULT_STROKE_COLOR;
-  private width = DEFAULT_STROKE_WIDTH;
-
-  setColor(color: string) {
-    this.color = color;
-  }
-
-  setWidth(width: number) {
-    this.width = width;
-  }
-
-  activate(ctx: ToolContext) {
-    const { canvas } = ctx;
-    canvas.isDrawingMode = true;
-    canvas.freeDrawingCursor = PEN_CURSOR;
-    const brush = new PencilBrush(canvas);
-    brush.color = this.color;
-    brush.width = this.width;
-    brush.strokeLineCap = 'round';
-    brush.strokeLineJoin = 'round';
-    canvas.freeDrawingBrush = brush;
-    canvas.selection = false;
-  }
-
-  deactivate(ctx: ToolContext) {
-    ctx.canvas.isDrawingMode = false;
-    ctx.canvas.selection = true;
-  }
-
-  updateBrush(ctx: ToolContext) {
-    const brush = ctx.canvas.freeDrawingBrush;
-    if (brush) {
-      brush.color = this.color;
-      brush.width = this.width;
-    }
-  }
-
-  onMouseDown() {}
-  onMouseMove() {}
-  onMouseUp() {}
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/select-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/select-tool.ts
deleted file mode 100644
index 8aad8cd..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/select-tool.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-export class SelectTool implements BaseTool {
-  name = ToolType.Select;
-  cursor = 'default';
-
-  activate(ctx: ToolContext) {
-    const { canvas } = ctx;
-    canvas.selection = true;
-    canvas.forEachObject((obj) => {
-      obj.selectable = true;
-      obj.evented = true;
-    });
-    canvas.setCursor(this.cursor);
-  }
-
-  deactivate(ctx: ToolContext) {
-    ctx.canvas.discardActiveObject();
-    ctx.canvas.requestRenderAll();
-  }
-
-  onMouseDown(_ctx: ToolContext, _e: any) {}
-  onMouseMove(_ctx: ToolContext, _e: any) {}
-  onMouseUp(_ctx: ToolContext, _e: any) {}
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/shape-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/shape-tool.ts
deleted file mode 100644
index ad7d86b..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/shape-tool.ts
+++ /dev/null
@@ -1,458 +0,0 @@
-import * as fabric from 'fabric';
-
-import {
-  DEFAULT_FILL_COLOR,
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_STROKE_COLOR,
-  DEFAULT_STROKE_WIDTH,
-  SHAPE_TEXT_FONT_SIZE,
-  SHAPE_TEXT_PADDING,
-} from '../constants';
-import type { BaseTool, ToolContext } from '../types';
-import { ShapeSubType, ToolType } from '../types';
-
-function getShapeDimensions(shape: fabric.FabricObject): { width: number; height: number } {
-  if (shape instanceof fabric.Ellipse) {
-    return { width: (shape.rx ?? 0) * 2, height: (shape.ry ?? 0) * 2 };
-  }
-  return { width: shape.width ?? 0, height: shape.height ?? 0 };
-}
-
-const GROUP_LEVEL_KEYS = new Set(['opacity', 'angle', 'selectable', 'evented']);
-
-function makePolygonPoints(sides: number, w: number, h: number): Array<{ x: number; y: number }> {
-  const points: Array<{ x: number; y: number }> = [];
-  const cx = w / 2;
-  const cy = h / 2;
-  for (let i = 0; i < sides; i++) {
-    const angle = (2 * Math.PI * i) / sides - Math.PI / 2;
-    points.push({
-      x: cx + cx * Math.cos(angle),
-      y: cy + cy * Math.sin(angle),
-    });
-  }
-  return points;
-}
-
-function makeStarPoints(points: number, w: number, h: number, innerRatio = 0.4): Array<{ x: number; y: number }> {
-  const result: Array<{ x: number; y: number }> = [];
-  const cx = w / 2;
-  const cy = h / 2;
-  for (let i = 0; i < points * 2; i++) {
-    const angle = (Math.PI * i) / points - Math.PI / 2;
-    const r = i % 2 === 0 ? 1 : innerRatio;
-    result.push({
-      x: cx + cx * r * Math.cos(angle),
-      y: cy + cy * r * Math.sin(angle),
-    });
-  }
-  return result;
-}
-
-function makeHeartPoints(w: number, h: number): Array<{ x: number; y: number }> {
-  const pts: Array<{ x: number; y: number }> = [];
-  const steps = 30;
-  for (let i = 0; i <= steps; i++) {
-    const t = (2 * Math.PI * i) / steps;
-    const x = 16 * Math.sin(t) ** 3;
-    const y = -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
-    pts.push({ x: ((x + 16) / 32) * w, y: ((y + 16) / 32) * h });
-  }
-  return pts;
-}
-
-function makeCloudPoints(w: number, h: number): Array<{ x: number; y: number }> {
-  const pts: Array<{ x: number; y: number }> = [];
-  const steps = 36;
-  for (let i = 0; i < steps; i++) {
-    const t = (2 * Math.PI * i) / steps;
-    const wobble = 0.15 * Math.sin(5 * t) + 0.1 * Math.sin(3 * t);
-    const r = 0.4 + wobble;
-    pts.push({
-      x: w / 2 + w * r * Math.cos(t),
-      y: h / 2 + h * r * Math.sin(t),
-    });
-  }
-  return pts;
-}
-
-function makeArrowRightPoints(w: number, h: number): Array<{ x: number; y: number }> {
-  const aw = w * 0.4;
-  const sh = h * 0.3;
-  return [
-    { x: 0, y: sh },
-    { x: w - aw, y: sh },
-    { x: w - aw, y: 0 },
-    { x: w, y: h / 2 },
-    { x: w - aw, y: h },
-    { x: w - aw, y: h - sh },
-    { x: 0, y: h - sh },
-  ];
-}
-
-function makeArrowUpPoints(w: number, h: number): Array<{ x: number; y: number }> {
-  const ah = h * 0.4;
-  const sw = w * 0.3;
-  return [
-    { x: w / 2, y: 0 },
-    { x: w, y: ah },
-    { x: w - sw, y: ah },
-    { x: w - sw, y: h },
-    { x: sw, y: h },
-    { x: sw, y: ah },
-    { x: 0, y: ah },
-  ];
-}
-
-function makeChatBubblePoints(w: number, h: number): Array<{ x: number; y: number }> {
-  const r = Math.min(w, h) * 0.15;
-  const tailH = h * 0.2;
-  const bodyH = h - tailH;
-  return [
-    { x: r, y: 0 },
-    { x: w - r, y: 0 },
-    { x: w, y: r },
-    { x: w, y: bodyH - r },
-    { x: w - r, y: bodyH },
-    { x: w * 0.35, y: bodyH },
-    { x: w * 0.15, y: h },
-    { x: w * 0.25, y: bodyH },
-    { x: r, y: bodyH },
-    { x: 0, y: bodyH - r },
-    { x: 0, y: r },
-  ];
-}
-
-export class ShapeTool implements BaseTool {
-  name = ToolType.Shape;
-  cursor = 'crosshair';
-
-  shapeType: ShapeSubType = ShapeSubType.Rect;
-  private isDrawing = false;
-  private startPoint: { x: number; y: number } | null = null;
-  private currentShape: fabric.FabricObject | null = null;
-
-  private fillColor = DEFAULT_FILL_COLOR;
-  private strokeColor = DEFAULT_STROKE_COLOR;
-  private strokeWidth = DEFAULT_STROKE_WIDTH;
-
-  static getShapeChild(obj: fabric.FabricObject): fabric.FabricObject {
-    if (obj instanceof fabric.Group && (obj as any).shapeSubType) {
-      return obj.getObjects()[0] ?? obj;
-    }
-    return obj;
-  }
-
-  static getTextChild(obj: fabric.FabricObject): fabric.Textbox | null {
-    if (obj instanceof fabric.Group && (obj as any).shapeSubType) {
-      const found = obj.getObjects().find((o) => o instanceof fabric.Textbox);
-      return (found as fabric.Textbox) ?? null;
-    }
-    return null;
-  }
-
-  private wrapShapeWithText(shape: fabric.FabricObject, text = ''): fabric.Group {
-    const { width, height } = getShapeDimensions(shape);
-    const left = shape.left ?? 0;
-    const top = shape.top ?? 0;
-
-    const textbox = new fabric.Textbox(text, {
-      width: Math.max(width - SHAPE_TEXT_PADDING * 2, 20),
-      fontSize: SHAPE_TEXT_FONT_SIZE,
-      fontFamily: DEFAULT_FONT_FAMILY,
-      fill: DEFAULT_STROKE_COLOR,
-      textAlign: 'center',
-      originX: 'center',
-      originY: 'center',
-      left: left + width / 2,
-      top: top + height / 2,
-      editable: true,
-      splitByGrapheme: true,
-    });
-
-    const group = new fabric.Group([shape, textbox], {
-      subTargetCheck: true,
-      interactive: false,
-    });
-    (group as any).shapeSubType = (shape as any).shapeSubType;
-    return group;
-  }
-
-  setShapeType(type: ShapeSubType) {
-    this.shapeType = type;
-  }
-
-  setFill(color: string) {
-    this.fillColor = color;
-  }
-
-  setStroke(color: string) {
-    this.strokeColor = color;
-  }
-
-  setStrokeWidth(width: number) {
-    this.strokeWidth = width;
-  }
-
-  activate(ctx: ToolContext) {
-    ctx.canvas.selection = false;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = false;
-      obj.evented = false;
-    });
-    ctx.canvas.setCursor(this.cursor);
-  }
-
-  deactivate(ctx: ToolContext) {
-    if (this.isDrawing && this.currentShape) {
-      ctx.canvas.remove(this.currentShape);
-    }
-    this.isDrawing = false;
-    this.currentShape = null;
-    this.startPoint = null;
-    ctx.canvas.selection = true;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = true;
-      obj.evented = true;
-    });
-    ctx.canvas.requestRenderAll();
-  }
-
-  createDefaultShape(ctx: ToolContext, position?: { x: number; y: number }): fabric.FabricObject | null {
-    const w = 120;
-    const h = 100;
-    let left: number;
-    let top: number;
-    if (position) {
-      left = position.x - w / 2;
-      top = position.y - h / 2;
-    } else {
-      const center = ctx.canvas.getCenterPoint();
-      left = center.x - w / 2;
-      top = center.y - h / 2;
-    }
-    const shape = this.createShape(left, top, w, h);
-    if (shape) {
-      const group = this.wrapShapeWithText(shape);
-      group.set({ selectable: true, evented: true });
-      ctx.canvas.add(group);
-      group.setCoords();
-      ctx.canvas.setActiveObject(group);
-      ctx.canvas.requestRenderAll();
-      return group;
-    }
-    return null;
-  }
-
-  onMouseDown(ctx: ToolContext, e: any) {
-    if (e.e.button !== 0) return;
-    const pointer = ctx.canvas.getScenePoint(e.e);
-    this.isDrawing = true;
-    this.startPoint = { x: pointer.x, y: pointer.y };
-    this.currentShape = this.createShape(pointer.x, pointer.y, 0, 0);
-
-    if (this.currentShape) {
-      ctx.canvas.add(this.currentShape);
-      ctx.canvas.requestRenderAll();
-    }
-  }
-
-  onMouseMove(ctx: ToolContext, e: any) {
-    if (!this.isDrawing || !this.startPoint || !this.currentShape) return;
-
-    const pointer = ctx.canvas.getScenePoint(e.e);
-    const width = Math.abs(pointer.x - this.startPoint.x);
-    const height = Math.abs(pointer.y - this.startPoint.y);
-    const left = Math.min(pointer.x, this.startPoint.x);
-    const top = Math.min(pointer.y, this.startPoint.y);
-
-    this.updateShape(this.currentShape, left, top, width, height);
-    ctx.canvas.requestRenderAll();
-  }
-
-  onMouseUp(ctx: ToolContext, _e: any) {
-    if (!this.isDrawing || !this.currentShape) return;
-
-    this.isDrawing = false;
-
-    const bounds = this.currentShape.getBoundingRect();
-    if (bounds.width < 3 && bounds.height < 3) {
-      ctx.canvas.remove(this.currentShape);
-    } else {
-      ctx.canvas.remove(this.currentShape);
-      const group = this.wrapShapeWithText(this.currentShape);
-      group.set({ selectable: true, evented: true });
-      ctx.canvas.add(group);
-      group.setCoords();
-      ctx.canvas.setActiveObject(group);
-    }
-
-    this.currentShape = null;
-    this.startPoint = null;
-    ctx.canvas.requestRenderAll();
-  }
-
-  private createShape(
-    left: number,
-    top: number,
-    width: number,
-    height: number,
-  ): fabric.FabricObject | null {
-    const baseOpts = {
-      left,
-      top,
-      fill: this.fillColor,
-      stroke: this.strokeColor,
-      strokeWidth: this.strokeWidth,
-      strokeUniform: true,
-      originX: 'left' as const,
-      originY: 'top' as const,
-    };
-
-    let shape: fabric.FabricObject;
-    switch (this.shapeType) {
-      case ShapeSubType.RoundedRect:
-        shape = new fabric.Rect({ ...baseOpts, width, height, rx: 12, ry: 12 });
-        break;
-      case ShapeSubType.Circle:
-        shape = new fabric.Ellipse({ ...baseOpts, rx: width / 2, ry: height / 2 });
-        break;
-      case ShapeSubType.Diamond:
-        shape = new fabric.Polygon(
-          [{ x: width / 2, y: 0 }, { x: width, y: height / 2 }, { x: width / 2, y: height }, { x: 0, y: height / 2 }],
-          baseOpts,
-        );
-        break;
-      case ShapeSubType.Triangle:
-        shape = new fabric.Triangle({ ...baseOpts, width, height });
-        break;
-      case ShapeSubType.Star:
-        shape = new fabric.Polygon(makeStarPoints(5, width, height), baseOpts);
-        break;
-      case ShapeSubType.Hexagon:
-        shape = new fabric.Polygon(makePolygonPoints(6, width, height), baseOpts);
-        break;
-      case ShapeSubType.Pentagon:
-        shape = new fabric.Polygon(makePolygonPoints(5, width, height), baseOpts);
-        break;
-      case ShapeSubType.Octagon:
-        shape = new fabric.Polygon(makePolygonPoints(8, width, height), baseOpts);
-        break;
-      case ShapeSubType.Parallelogram: {
-        const offset = width * 0.2;
-        shape = new fabric.Polygon(
-          [{ x: offset, y: 0 }, { x: width, y: 0 }, { x: width - offset, y: height }, { x: 0, y: height }],
-          baseOpts,
-        );
-        break;
-      }
-      case ShapeSubType.Cylinder:
-        shape = new fabric.Ellipse({ ...baseOpts, rx: width / 2, ry: height / 2 });
-        break;
-      case ShapeSubType.ArrowRight:
-        shape = new fabric.Polygon(makeArrowRightPoints(width, height), baseOpts);
-        break;
-      case ShapeSubType.ArrowUp:
-        shape = new fabric.Polygon(makeArrowUpPoints(width, height), baseOpts);
-        break;
-      case ShapeSubType.Heart:
-        shape = new fabric.Polygon(makeHeartPoints(width, height), baseOpts);
-        break;
-      case ShapeSubType.Cloud:
-        shape = new fabric.Polygon(makeCloudPoints(width, height), baseOpts);
-        break;
-      case ShapeSubType.ChatBubble:
-        shape = new fabric.Polygon(makeChatBubblePoints(width, height), baseOpts);
-        break;
-      default:
-        shape = new fabric.Rect({ ...baseOpts, width, height });
-    }
-    (shape as any).shapeSubType = this.shapeType;
-    return shape;
-  }
-
-  createShapeWithProps(
-    left: number, top: number, width: number, height: number,
-    overrides?: Record<string, any>,
-    existingText?: string,
-  ): fabric.FabricObject | null {
-    const shape = this.createShape(left, top, width, height);
-    if (!shape) return null;
-
-    if (overrides) {
-      const shapeOverrides: Record<string, any> = {};
-      for (const [key, value] of Object.entries(overrides)) {
-        if (!GROUP_LEVEL_KEYS.has(key)) shapeOverrides[key] = value;
-      }
-      if (Object.keys(shapeOverrides).length > 0) {
-        shape.set(shapeOverrides);
-      }
-    }
-
-    const group = this.wrapShapeWithText(shape, existingText);
-
-    if (overrides) {
-      const groupOverrides: Record<string, any> = {};
-      for (const key of GROUP_LEVEL_KEYS) {
-        if (key in overrides) groupOverrides[key] = (overrides as any)[key];
-      }
-      if (Object.keys(groupOverrides).length > 0) {
-        group.set(groupOverrides);
-      }
-    }
-
-    group.setCoords();
-    return group;
-  }
-
-  private updateShape(
-    shape: fabric.FabricObject,
-    left: number,
-    top: number,
-    width: number,
-    height: number,
-  ) {
-    if (shape instanceof fabric.Ellipse) {
-      shape.set({ left, top, rx: width / 2, ry: height / 2 });
-    } else if (shape instanceof fabric.Polygon) {
-      const newPoints = this.getPointsForType(width, height);
-      if (newPoints) {
-        shape.set({ left, top, points: newPoints });
-      } else {
-        shape.set({ left, top });
-      }
-    } else {
-      shape.set({ left, top, width, height });
-    }
-    shape.setCoords();
-  }
-
-  private getPointsForType(w: number, h: number): Array<{ x: number; y: number }> | null {
-    switch (this.shapeType) {
-      case ShapeSubType.Diamond:
-        return [{ x: w / 2, y: 0 }, { x: w, y: h / 2 }, { x: w / 2, y: h }, { x: 0, y: h / 2 }];
-      case ShapeSubType.Star:
-        return makeStarPoints(5, w, h);
-      case ShapeSubType.Hexagon:
-        return makePolygonPoints(6, w, h);
-      case ShapeSubType.Pentagon:
-        return makePolygonPoints(5, w, h);
-      case ShapeSubType.Octagon:
-        return makePolygonPoints(8, w, h);
-      case ShapeSubType.Parallelogram:
-        return [{ x: w * 0.2, y: 0 }, { x: w, y: 0 }, { x: w * 0.8, y: h }, { x: 0, y: h }];
-      case ShapeSubType.ArrowRight:
-        return makeArrowRightPoints(w, h);
-      case ShapeSubType.ArrowUp:
-        return makeArrowUpPoints(w, h);
-      case ShapeSubType.Heart:
-        return makeHeartPoints(w, h);
-      case ShapeSubType.Cloud:
-        return makeCloudPoints(w, h);
-      case ShapeSubType.ChatBubble:
-        return makeChatBubblePoints(w, h);
-      default:
-        return null;
-    }
-  }
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/sticky-note-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/sticky-note-tool.ts
deleted file mode 100644
index 3cfff54..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/sticky-note-tool.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as fabric from 'fabric';
-
-import {
-  DEFAULT_FONT_FAMILY,
-  STICKY_NOTE_COLORS,
-} from '../constants';
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-const STICKY_SIZE = 160;
-const STICKY_FONT_SIZE = 14;
-const STICKY_PADDING = 12;
-const STICKY_RADIUS = 8;
-
-export class StickyNoteTool implements BaseTool {
-  name = ToolType.StickyNote;
-  cursor = 'crosshair';
-
-  private colorIndex = 0;
-
-  activate(ctx: ToolContext) {
-    ctx.canvas.selection = false;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = false;
-      obj.evented = false;
-    });
-    ctx.canvas.setCursor(this.cursor);
-  }
-
-  deactivate(ctx: ToolContext) {
-    ctx.canvas.selection = true;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = true;
-      obj.evented = true;
-    });
-  }
-
-  onMouseDown(ctx: ToolContext, e: any) {
-    if (e.e.button !== 0) return;
-    const pointer = ctx.canvas.getScenePoint(e.e);
-    const color = STICKY_NOTE_COLORS[this.colorIndex % STICKY_NOTE_COLORS.length]!;
-    this.colorIndex++;
-
-    const bg = new fabric.Rect({
-      width: STICKY_SIZE,
-      height: STICKY_SIZE,
-      fill: color,
-      rx: STICKY_RADIUS,
-      ry: STICKY_RADIUS,
-      shadow: new fabric.Shadow({
-        color: 'rgba(0,0,0,0.1)',
-        blur: 8,
-        offsetX: 2,
-        offsetY: 2,
-      }),
-    });
-
-    const text = new fabric.Textbox('', {
-      width: STICKY_SIZE - STICKY_PADDING * 2,
-      fontSize: STICKY_FONT_SIZE,
-      fontFamily: DEFAULT_FONT_FAMILY,
-      fill: '#1e1e1e',
-      left: STICKY_PADDING,
-      top: STICKY_PADDING,
-      editable: true,
-      splitByGrapheme: true,
-    });
-
-    const group = new fabric.Group([bg, text], {
-      left: pointer.x - STICKY_SIZE / 2,
-      top: pointer.y - STICKY_SIZE / 2,
-      subTargetCheck: true,
-    });
-
-    ctx.canvas.add(group);
-    ctx.canvas.setActiveObject(group);
-    ctx.canvas.requestRenderAll();
-  }
-
-  onMouseMove() {}
-  onMouseUp() {}
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/tools/text-tool.ts b/web/apps/web-ele/src/components/zq-whiteboard/tools/text-tool.ts
deleted file mode 100644
index d6319a4..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/tools/text-tool.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { IText } from 'fabric';
-
-import {
-  DEFAULT_FONT_FAMILY,
-  DEFAULT_FONT_SIZE,
-  DEFAULT_STROKE_COLOR,
-} from '../constants';
-import type { BaseTool, ToolContext } from '../types';
-import { ToolType } from '../types';
-
-export class TextTool implements BaseTool {
-  name = ToolType.Text;
-  cursor = 'text';
-
-  private color = DEFAULT_STROKE_COLOR;
-  private fontSize = DEFAULT_FONT_SIZE;
-  private fontFamily = DEFAULT_FONT_FAMILY;
-
-  setColor(color: string) {
-    this.color = color;
-  }
-
-  setFontSize(size: number) {
-    this.fontSize = size;
-  }
-
-  setFontFamily(family: string) {
-    this.fontFamily = family;
-  }
-
-  activate(ctx: ToolContext) {
-    ctx.canvas.selection = false;
-    ctx.canvas.defaultCursor = this.cursor;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = false;
-      obj.evented = false;
-    });
-  }
-
-  deactivate(ctx: ToolContext) {
-    ctx.canvas.selection = true;
-    ctx.canvas.forEachObject((obj) => {
-      obj.selectable = true;
-      obj.evented = true;
-    });
-  }
-
-  onMouseDown(ctx: ToolContext, e: any) {
-    if (e.e.button !== 0) return;
-    if (e.target && e.target instanceof IText) return;
-
-    const pointer = ctx.canvas.getScenePoint(e.e);
-
-    const text = new IText('', {
-      left: pointer.x,
-      top: pointer.y,
-      fontSize: this.fontSize,
-      fontFamily: this.fontFamily,
-      fill: this.color,
-      editable: true,
-      cursorColor: this.color,
-      cursorWidth: 2,
-      padding: 8,
-    });
-
-    ctx.canvas.add(text);
-    ctx.canvas.setActiveObject(text);
-    text.enterEditing();
-    ctx.canvas.requestRenderAll();
-
-    ctx.store.setTool?.(ToolType.Select);
-  }
-
-  onMouseMove() {}
-  onMouseUp() {}
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/types.ts b/web/apps/web-ele/src/components/zq-whiteboard/types.ts
deleted file mode 100644
index 8b5ae71..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/types.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import type { Canvas as FabricCanvas } from 'fabric';
-
-export enum ToolType {
-  Select = 'select',
-  Hand = 'hand',
-  Pen = 'pen',
-  Highlighter = 'highlighter',
-  Eraser = 'eraser',
-  Shape = 'shape',
-  Line = 'line',
-  Arrow = 'arrow',
-  Connector = 'connector',
-  Text = 'text',
-  StickyNote = 'stickyNote',
-  Image = 'image',
-  Frame = 'frame',
-  Laser = 'laser',
-}
-
-export enum ShapeSubType {
-  Rect = 'rect',
-  RoundedRect = 'roundedRect',
-  Circle = 'circle',
-  Diamond = 'diamond',
-  Triangle = 'triangle',
-  Star = 'star',
-  Hexagon = 'hexagon',
-  Pentagon = 'pentagon',
-  Octagon = 'octagon',
-  Parallelogram = 'parallelogram',
-  Cylinder = 'cylinder',
-  ArrowRight = 'arrowRight',
-  ArrowUp = 'arrowUp',
-  Heart = 'heart',
-  Cloud = 'cloud',
-  ChatBubble = 'chatBubble',
-}
-
-export enum BackgroundType {
-  None = 'none',
-  Dots = 'dots',
-  Lines = 'lines',
-  Grid = 'grid',
-}
-
-export interface ViewportState {
-  x: number;
-  y: number;
-  zoom: number;
-}
-
-export interface WhiteboardData {
-  version: string;
-  viewport: ViewportState;
-  background: {
-    type: BackgroundType;
-    color: string;
-  };
-  objects: any[];
-  thumbnail?: string;
-}
-
-export interface ToolContext {
-  canvas: FabricCanvas;
-  store: any;
-}
-
-export interface BaseTool {
-  name: ToolType;
-  cursor: string;
-  activate(ctx: ToolContext): void;
-  deactivate(ctx: ToolContext): void;
-  onMouseDown?(ctx: ToolContext, e: any): void;
-  onMouseMove?(ctx: ToolContext, e: any): void;
-  onMouseUp?(ctx: ToolContext, e: any): void;
-  onKeyDown?(ctx: ToolContext, e: KeyboardEvent): void;
-}
-
-export type EndpointStyle = 'none' | 'arrow';
-export type ConnectorRouteType = 'orthogonal' | 'straight';
-
-export enum ConnectorSubType {
-  StraightLine = 'straightLine',
-  StraightArrow = 'straightArrow',
-  ElbowConnector = 'elbowConnector',
-}
-
-export interface WhiteboardProps {
-  modelValue?: WhiteboardData;
-  readonly?: boolean;
-  width?: number | string;
-  height?: number | string;
-}
-
-export interface WhiteboardEmits {
-  (e: 'update:modelValue', data: WhiteboardData): void;
-  (e: 'change', data: WhiteboardData): void;
-  (e: 'save', data: WhiteboardData): void;
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/utils/connector-routing.ts b/web/apps/web-ele/src/components/zq-whiteboard/utils/connector-routing.ts
deleted file mode 100644
index 14b1e25..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/utils/connector-routing.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-interface Point {
-  x: number;
-  y: number;
-}
-
-const MIN_SEGMENT = 20;
-
-/**
- * Compute an orthogonal (right-angle) path between two points.
- * Produces a clean L-shaped or Z-shaped connector path.
- */
-export function computeOrthogonalPath(start: Point, end: Point): Point[] {
-  const dx = end.x - start.x;
-  const dy = end.y - start.y;
-
-  if (Math.abs(dx) < MIN_SEGMENT && Math.abs(dy) < MIN_SEGMENT) {
-    return [start, end];
-  }
-
-  // Predominantly horizontal
-  if (Math.abs(dx) >= Math.abs(dy)) {
-    const midX = start.x + dx / 2;
-    return [
-      start,
-      { x: midX, y: start.y },
-      { x: midX, y: end.y },
-      end,
-    ];
-  }
-
-  // Predominantly vertical
-  const midY = start.y + dy / 2;
-  return [
-    start,
-    { x: start.x, y: midY },
-    { x: end.x, y: midY },
-    end,
-  ];
-}
-
-/**
- * Compute a path that avoids a rectangular obstacle.
- */
-export function computeAvoidancePath(
-  start: Point,
-  end: Point,
-  obstacles: Array<{ left: number; top: number; width: number; height: number }>,
-): Point[] {
-  // Simple fallback: use orthogonal path
-  // Full obstacle avoidance would use A* or similar pathfinding
-  return computeOrthogonalPath(start, end);
-}
diff --git a/web/apps/web-ele/src/components/zq-whiteboard/utils/geometry.ts b/web/apps/web-ele/src/components/zq-whiteboard/utils/geometry.ts
deleted file mode 100644
index 79c8384..0000000
--- a/web/apps/web-ele/src/components/zq-whiteboard/utils/geometry.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-interface Point {
-  x: number;
-  y: number;
-}
-
-interface Rect {
-  left: number;
-  top: number;
-  width: number;
-  height: number;
-}
-
-export function distance(a: Point, b: Point): number {
-  return Math.hypot(b.x - a.x, b.y - a.y);
-}
-
-export function midpoint(a: Point, b: Point): Point {
-  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
-}
-
-export function angleBetween(a: Point, b: Point): number {
-  return Math.atan2(b.y - a.y, b.x - a.x);
-}
-
-export function pointInRect(p: Point, r: Rect): boolean {
-  return (
-    p.x >= r.left &&
-    p.x <= r.left + r.width &&
-    p.y >= r.top &&
-    p.y <= r.top + r.height
-  );
-}
-
-export function rectsOverlap(a: Rect, b: Rect): boolean {
-  return !(
-    a.left + a.width < b.left ||
-    b.left + b.width < a.left ||
-    a.top + a.height < b.top ||
-    b.top + b.height < a.top
-  );
-}
-
-export function rectCenter(r: Rect): Point {
-  return { x: r.left + r.width / 2, y: r.top + r.height / 2 };
-}
-
-export function expandRect(r: Rect, padding: number): Rect {
-  return {
-    left: r.left - padding,
-    top: r.top - padding,
-    width: r.width + padding * 2,
-    height: r.height + padding * 2,
-  };
-}
-
-export function clamp(val: number, min: number, max: number): number {
-  return Math.min(Math.max(val, min), max);
-}
-
-/**
- * Get the closest point on a rectangle's border to a given point.
- */
-export function closestPointOnRect(p: Point, r: Rect): Point {
-  const cx = clamp(p.x, r.left, r.left + r.width);
-  const cy = clamp(p.y, r.top, r.top + r.height);
-  return { x: cx, y: cy };
-}
diff --git a/web/apps/web-ele/src/composables/use-offline-cache.ts b/web/apps/web-ele/src/composables/use-offline-cache.ts
deleted file mode 100644
index 16d5c2c..0000000
--- a/web/apps/web-ele/src/composables/use-offline-cache.ts
+++ /dev/null
@@ -1,313 +0,0 @@
-import { ref, onMounted, onUnmounted } from 'vue'
-
-const DB_NAME = 'zq-smart-table-offline'
-const DB_VERSION = 1
-const STORE_TABLE_DATA = 'tableData'
-const STORE_PENDING_OPS = 'pendingOps'
-
-export interface PendingOperation {
-  id: string
-  type: 'updateCell' | 'createRecord' | 'deleteRecord'
-  tableId: string
-  recordId: string
-  payload: Record<string, any>
-  timestamp: number
-}
-
-let _db: IDBDatabase | null = null
-
-function openDB(): Promise<IDBDatabase> {
-  if (_db) return Promise.resolve(_db)
-
-  return new Promise((resolve, reject) => {
-    const req = indexedDB.open(DB_NAME, DB_VERSION)
-
-    req.onupgradeneeded = () => {
-      const db = req.result
-      if (!db.objectStoreNames.contains(STORE_TABLE_DATA)) {
-        db.createObjectStore(STORE_TABLE_DATA, { keyPath: 'id' })
-      }
-      if (!db.objectStoreNames.contains(STORE_PENDING_OPS)) {
-        const store = db.createObjectStore(STORE_PENDING_OPS, { keyPath: 'id' })
-        store.createIndex('byTable', 'tableId', { unique: false })
-        store.createIndex('byTimestamp', 'timestamp', { unique: false })
-      }
-    }
-
-    req.onsuccess = () => {
-      _db = req.result
-      resolve(_db)
-    }
-
-    req.onerror = () => reject(req.error)
-  })
-}
-
-function promisify<T>(req: IDBRequest<T>): Promise<T> {
-  return new Promise((resolve, reject) => {
-    req.onsuccess = () => resolve(req.result)
-    req.onerror = () => reject(req.error)
-  })
-}
-
-function waitTx(tx: IDBTransaction): Promise<void> {
-  return new Promise((resolve, reject) => {
-    tx.oncomplete = () => resolve()
-    tx.onerror = () => reject(tx.error)
-  })
-}
-
-function genId(): string {
-  return `${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
-}
-
-// ==================== Module-level exports (no Vue dependency) ====================
-
-export async function cacheTableData(tableId: string, data: any) {
-  try {
-    const db = await openDB()
-    const store = db.transaction(STORE_TABLE_DATA, 'readwrite').objectStore(STORE_TABLE_DATA)
-    await promisify(store.put({ id: tableId, data, cachedAt: Date.now() }))
-  } catch {
-    // silently fail
-  }
-}
-
-export async function getCachedTableData(tableId: string): Promise<any | null> {
-  try {
-    const db = await openDB()
-    const store = db.transaction(STORE_TABLE_DATA, 'readonly').objectStore(STORE_TABLE_DATA)
-    const result = await promisify(store.get(tableId))
-    if (!result) return null
-    const maxAge = 24 * 60 * 60 * 1000
-    if (Date.now() - result.cachedAt > maxAge) return null
-    return result.data
-  } catch {
-    return null
-  }
-}
-
-export async function addPendingOp(op: Omit<PendingOperation, 'id' | 'timestamp'>) {
-  try {
-    const db = await openDB()
-
-    if (op.type === 'updateCell') {
-      const readTx = db.transaction(STORE_PENDING_OPS, 'readonly')
-      const readStore = readTx.objectStore(STORE_PENDING_OPS)
-      const existing: PendingOperation[] = await promisify(
-        readStore.index('byTable').getAll(op.tableId),
-      )
-      const toRemove = existing
-        .filter(
-          (prev) =>
-            prev.type === 'updateCell' &&
-            prev.recordId === op.recordId &&
-            prev.payload.fieldId === op.payload.fieldId,
-        )
-        .map((prev) => prev.id)
-
-      const writeTx = db.transaction(STORE_PENDING_OPS, 'readwrite')
-      const writeStore = writeTx.objectStore(STORE_PENDING_OPS)
-      for (const id of toRemove) {
-        writeStore.delete(id)
-      }
-      writeStore.put({ ...op, id: genId(), timestamp: Date.now() })
-      await waitTx(writeTx)
-    } else {
-      const tx = db.transaction(STORE_PENDING_OPS, 'readwrite')
-      const store = tx.objectStore(STORE_PENDING_OPS)
-      store.put({ ...op, id: genId(), timestamp: Date.now() })
-      await waitTx(tx)
-    }
-  } catch {
-    // silently fail
-  }
-}
-
-export async function getPendingOps(): Promise<PendingOperation[]> {
-  try {
-    const db = await openDB()
-    const store = db.transaction(STORE_PENDING_OPS, 'readonly').objectStore(STORE_PENDING_OPS)
-    return await promisify(store.index('byTimestamp').getAll())
-  } catch {
-    return []
-  }
-}
-
-export async function getPendingCount(): Promise<number> {
-  try {
-    const db = await openDB()
-    const store = db.transaction(STORE_PENDING_OPS, 'readonly').objectStore(STORE_PENDING_OPS)
-    return await promisify(store.count())
-  } catch {
-    return 0
-  }
-}
-
-export async function removePendingOps(ids: string[]) {
-  if (ids.length === 0) return
-  try {
-    const db = await openDB()
-    const tx = db.transaction(STORE_PENDING_OPS, 'readwrite')
-    const store = tx.objectStore(STORE_PENDING_OPS)
-    for (const id of ids) {
-      store.delete(id)
-    }
-    await waitTx(tx)
-  } catch {
-    // silently fail
-  }
-}
-
-export async function syncAllPendingOps(): Promise<number> {
-  const ops = await getPendingOps()
-  if (ops.length === 0) return 0
-
-  const {
-    updateCellApi,
-    batchUpdateCellsApi,
-    createRecordApi,
-    deleteRecordApi,
-    batchUpdateMultiRecordCellsApi,
-  } = await import('#/api/smart-table')
-
-  const cellOpsByTable: Record<string, { recordId: string; fieldId: string; value: unknown; opId: string }[]> = {}
-  const otherOps: PendingOperation[] = []
-
-  for (const op of ops) {
-    if (op.type === 'updateCell') {
-      if (!cellOpsByTable[op.tableId]) cellOpsByTable[op.tableId] = []
-      cellOpsByTable[op.tableId]!.push({
-        recordId: op.recordId,
-        fieldId: op.payload.fieldId as string,
-        value: op.payload.value,
-        opId: op.id,
-      })
-    } else {
-      otherOps.push(op)
-    }
-  }
-
-  let synced = 0
-
-  for (const [tableId, cellOps] of Object.entries(cellOpsByTable)) {
-    const byRecord: Record<string, Record<string, unknown>> = {}
-    for (const cop of cellOps) {
-      if (!byRecord[cop.recordId]) byRecord[cop.recordId] = {}
-      byRecord[cop.recordId]![cop.fieldId] = cop.value
-    }
-
-    const recordIds = Object.keys(byRecord)
-    try {
-      if (recordIds.length > 1) {
-        await batchUpdateMultiRecordCellsApi(
-          tableId,
-          recordIds.map((rid) => ({ record_id: rid, cells: byRecord[rid]! })),
-        )
-      } else if (recordIds.length === 1) {
-        const rid = recordIds[0]!
-        const cells = byRecord[rid]!
-        const fieldIds = Object.keys(cells)
-        if (fieldIds.length === 1) {
-          await updateCellApi(rid, fieldIds[0]!, cells[fieldIds[0]!])
-        } else {
-          await batchUpdateCellsApi(rid, cells)
-        }
-      }
-      await removePendingOps(cellOps.map((c) => c.opId))
-      synced += cellOps.length
-    } catch {
-      // keep pending ops for retry
-    }
-  }
-
-  for (const op of otherOps) {
-    try {
-      if (op.type === 'createRecord') {
-        await createRecordApi(op.tableId, op.payload.values)
-      } else if (op.type === 'deleteRecord') {
-        await deleteRecordApi(op.recordId)
-      }
-      await removePendingOps([op.id])
-      synced++
-    } catch {
-      // keep for retry
-    }
-  }
-
-  return synced
-}
-
-export async function clearOfflineCache(tableId?: string) {
-  try {
-    const db = await openDB()
-    const store = db.transaction(STORE_TABLE_DATA, 'readwrite').objectStore(STORE_TABLE_DATA)
-    if (tableId) {
-      await promisify(store.delete(tableId))
-    } else {
-      await promisify(store.clear())
-    }
-  } catch {
-    // silently fail
-  }
-}
-
-// ==================== Vue Composable (for component usage with lifecycle) ====================
-
-export function useOfflineCache() {
-  const isOnline = ref(navigator.onLine)
-  const pendingCount = ref(0)
-  const syncing = ref(false)
-
-  async function handleOnline() {
-    isOnline.value = true
-    await doSync()
-  }
-
-  function handleOffline() {
-    isOnline.value = false
-  }
-
-  async function refreshCount() {
-    pendingCount.value = await getPendingCount()
-  }
-
-  async function doSync() {
-    if (syncing.value || !isOnline.value) return
-    syncing.value = true
-    try {
-      await syncAllPendingOps()
-    } finally {
-      syncing.value = false
-      await refreshCount()
-    }
-  }
-
-  onMounted(async () => {
-    window.addEventListener('online', handleOnline)
-    window.addEventListener('offline', handleOffline)
-    try {
-      await openDB()
-      await refreshCount()
-    } catch {
-      // IndexedDB not available
-    }
-  })
-
-  onUnmounted(() => {
-    window.removeEventListener('online', handleOnline)
-    window.removeEventListener('offline', handleOffline)
-  })
-
-  return {
-    isOnline,
-    pendingCount,
-    syncing,
-    cacheTableData,
-    getCachedTableData,
-    addPendingOp,
-    syncPendingOps: doSync,
-    clearCache: clearOfflineCache,
-    refreshCount,
-  }
-}
diff --git a/web/apps/web-ele/src/layouts/basic.vue b/web/apps/web-ele/src/layouts/basic.vue
index 6ada4b1..b914d30 100644
--- a/web/apps/web-ele/src/layouts/basic.vue
+++ b/web/apps/web-ele/src/layouts/basic.vue
@@ -6,15 +6,12 @@ import { useRouter } from 'vue-router';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { useWatermark } from '@vben/hooks';
-import { BookOpen } from '@vben/icons';
 import { BasicLayout, LockScreen, UserDropdown } from '@vben/layouts';
 import { $t } from '@vben/locales';
 import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
-import { ElTooltip } from 'element-plus';
-
 import NotificationPopup from '#/components/notification/NotificationPopup.vue';
 import { getFileUrl } from '#/composables/useFileUrl';
 import { useNotification } from '#/composables/useNotification';
@@ -98,7 +95,6 @@ const menus = computed(() => [
   // },
 ]);
 
-const ZQ_PLATFORM_GITHUB_URL = 'https://github.com/jiangzhikj/zq-platform';
 const ZQ_PLATFORM_OFFICIAL_URL = 'https://zq-platform.com/';
 /** 双列仅第一列窄条展示时的短文案 */
 const ZQ_PLATFORM_BRAND_SHORT = 'ZQ Platform';
@@ -125,11 +121,6 @@ watch(
   { immediate: true },
 );
 
-function handleOpenWiki() {
-  const url = router.resolve('/wiki').href;
-  window.open(url, '_blank');
-}
-
 async function handleLogout() {
   await authStore.logout(false);
 }
@@ -207,18 +198,6 @@ watch(
         @logout="handleLogout"
       />
     </template>
-    <template #header-right-55>
-      <ElTooltip :content="$t('wiki.title')" placement="bottom">
-        <div
-          class="flex-center mr-2 cursor-pointer"
-          @click="handleOpenWiki"
-        >
-          <BookOpen
-            class="size-4 text-[var(--el-text-color-regular)] hover:text-[var(--el-color-primary)]"
-          />
-        </div>
-      </ElTooltip>
-    </template>
     <template #notification>
       <NotificationPopup
         :dot="showDot || chatTotalUnread > 0"
diff --git a/web/apps/web-ele/src/locales/langs/en-US/contract-design.json b/web/apps/web-ele/src/locales/langs/en-US/contract-design.json
deleted file mode 100644
index 5ed1bde..0000000
--- a/web/apps/web-ele/src/locales/langs/en-US/contract-design.json
+++ /dev/null
@@ -1,205 +0,0 @@
-{
-  "elementPanel": "Element",
-  "templatePanel": "Template",
-  "variablePanel": "Variable",
-  "selectElement": "Please select an element",
-  "titleContent": "Title Content",
-  "titleLevel": "Title Level",
-  "alignment": "Alignment",
-  "fontSize": "Font Size",
-  "fontWeight": "Font Weight",
-  "normal": "Normal",
-  "bold": "Bold",
-  "paragraphContent": "Paragraph Content",
-  "lineHeight": "Line Height",
-  "indent": "First Line Indent (Characters)",
-  "selectVariable": "Select Variable",
-  "variableInfo": "Variable Information",
-  "required": "Required",
-  "optional": "Optional",
-  "placeholderText": "Placeholder Text",
-  "notFilledText": "Text displayed when not filled",
-  "minWidth": "Minimum Width",
-  "showUnderline": "Show Underline",
-  "usageInstructions": "Usage Instructions",
-  "variableUsageDesc": "After selecting a variable, it will be automatically added to the template's variable list. Users need to fill in the values of these variables during signing.",
-  "showBorder": "Show Border",
-  "headerBgColor": "Header Background Color",
-  "tableColumns": "Table Columns",
-  "column": "Column",
-  "delete": "Delete",
-  "columnTitle": "Column Title",
-  "width": "Width",
-  "left": "Left",
-  "center": "Center",
-  "right": "Right",
-  "addColumn": "Add Column",
-  "addRow": "Add Row",
-  "signatory": "Signatory",
-  "labelText": "Label Text",
-  "alignLeft": "Align Left",
-  "alignCenter": "Align Center",
-  "alignRight": "Align Right",
-  "height": "Height",
-  "showLabel": "Show Label",
-  "showDate": "Show Date",
-  "mustSign": "Must Sign",
-  "label": "Label",
-  "dateFormat": "Date Format",
-  "lineStyle": "Line Style",
-  "solid": "Solid",
-  "dashed": "Dashed",
-  "dotted": "Dotted",
-  "lineColor": "Line Color",
-  "marginVertical": "Vertical Margin",
-  "imageUrl": "Image URL",
-  "enterImageUrl": "Please enter image URL",
-  "minHeight": "Minimum Height",
-  "padding": "Padding",
-  "borderColor": "Border Color",
-  "backgroundColor": "Background Color",
-  "editTip": "Edit Tip",
-  "richTextEditDesc": "Double-click the rich text element to edit content directly on the canvas, supporting:",
-  "boldItalicUnderline": "Bold, Italic, Underline",
-  "headingListQuote": "Heading, List, Quote",
-  "insertContent": "Insert Link, Image, Table",
-  "templateName": "Template Name",
-  "templateCode": "Template Code",
-  "templateCategory": "Template Category",
-  "templateDescription": "Template Description",
-  "pageSettings": "Page Settings",
-  "pageSize": "Page Size",
-  "pageMargin": "Page Margin (px)",
-  "top": "Top",
-  "bottom": "Bottom",
-  "variableDescription": "Variable Description",
-  "noVariablesText": "No variables, please add variable placeholders in the canvas",
-  "clickToFill": "Click to fill",
-  "signature": "Signature",
-  "signed": "Signed",
-  "clickToSign": "Click to sign",
-  "sealArea": "Seal area",
-  "sealed": "Sealed",
-  "clickToSeal": "Click to seal",
-  "noContent": "No content",
-  "dateLabel": "Date",
-  "fillVariable": "Fill variable",
-  "enterVariableValue": "Please enter variable value",
-  "cancel": "Cancel",
-  "confirm": "Confirm",
-  "signHere": "Please sign here",
-  "undo": "Undo",
-  "clear": "Clear",
-  "contractTemplate": "Contract Template",
-  "elements": "elements",
-  "redo": "Redo",
-  "preview": "Preview",
-  "viewJSON": "View JSON",
-  "import": "Import",
-  "export": "Export",
-  "save": "Save",
-  "dragOrClickToAdd": "Drag or click left elements to add to canvas",
-  "releaseToAdd": "Release mouse to add elements",
-  "pageBreakLabel": "End of page {page1} / Start of page {page2}",
-  "margin": "Margin",
-  "uploadImageFileOnly": "Please upload image file",
-  "imageSizeExceeded": "Image size cannot exceed 2MB",
-  "pleaseSignFirst": "Please sign first",
-  "pleaseUploadSignatureImage": "Please upload signature image first",
-  "drawSignature": "Draw Signature",
-  "uploadSignature": "Upload Signature",
-  "signaturePreview": "Signature Preview",
-  "clickOrDragToUpload": "Click or drag to upload signature image",
-  "supportedFormatsAndSize": "Supports JPG, PNG formats, maximum 2MB",
-  "confirmSignature": "Confirm Signature",
-  "contract": "Contract",
-  "exportSuccess": "PDF exported successfully",
-  "contractPreview": "Contract Preview",
-  "totalPages": "Total {count} pages",
-  "pageLabel": "Page {current} / {total}",
-  "close": "Close",
-  "exportPdf": "Export PDF",
-  "exporting": "Exporting...",
-  "signer": "Signer",
-  "pleaseCompleteMandatoryFields": "Please complete mandatory fields: {fields}",
-  "signedSuccessfully": "Signed successfully",
-  "contractSigning": "Contract Signing",
-  "fillInformation": "Fill Information",
-  "previewContract": "Preview Contract",
-  "signatureConfirmation": "Signature Confirmation",
-  "pleaseEnter": "Please enter {field}",
-  "pleaseSelect": "Please select {field}",
-  "pleaseSignInArea": "Please sign in the area below",
-  "previousStep": "Previous Step",
-  "nextStep": "Next Step",
-  "confirmSigning": "Confirm Signing",
-  "signingTime": "Signing Time",
-  "textElements": "Text Elements",
-  "variableElements": "Variable Elements",
-  "signatureElements": "Signature Elements",
-  "layoutElements": "Layout Elements",
-  "searchElements": "Search elements...",
-  "dragOrClickAddElements": "Drag or click to add elements",
-  "sampleTemplates": "Sample Templates",
-  "selectTemplateToStart": "Select a template to get started. Clicking will replace the current canvas content",
-  "templateLoaded": "Template loaded: {name}",
-  "contractElements": "Contract Elements",
-  "partyAInfo": "Party A Information",
-  "partyBInfo": "Party B Information",
-  "contractInfo": "Contract Information",
-  "otherInfo": "Other Information",
-  "contractTitle": "Contract Title",
-  "paragraphText": "Paragraph Text",
-  "richText": "Rich Text",
-  "variablePlaceholder": "Variable Placeholder",
-  "table": "Table",
-  "signatureZone": "Signature Zone",
-  "sealZone": "Seal Zone",
-  "dateZone": "Date Zone",
-  "divider": "Divider",
-  "pageBreak": "Page Break",
-  "image": "Image",
-  "pleaseAddContractElements": "Please add contract elements first",
-  "saveSuccess": "Save successful",
-  "clearCanvasConfirm": "Are you sure you want to clear the canvas? This action cannot be undone.",
-  "tip": "Tip",
-  "confirm": "Confirm",
-  "cancel": "Cancel",
-  "cleared": "Cleared",
-  "exportSuccess": "Export successful",
-  "pleaseEnterConfig": "Please enter configuration content",
-  "importSuccess": "Import successful",
-  "configFormatError": "Configuration format error",
-  "copiedToClipboard": "Copied to clipboard",
-  "copyFailed": "Copy failed",
-  "undone": "Undone",
-  "redone": "Redone",
-  "copied": "Copied",
-  "pasted": "Pasted",
-  "deleted": "Deleted",
-  "jsonPreview": "JSON Preview",
-  "copyCode": "Copy Code",
-  "close": "Close",
-  "importConfig": "Import Configuration",
-  "pasteJsonConfig": "Please paste JSON configuration content...",
-  "import": "Import",
-  "variableDescText": "After adding a \"Variable Placeholder\" on the canvas and selecting a variable, it will be automatically added to this list. Users need to fill in the values of these variables during signing.",
-  "usedVariables": "Used Variables",
-  "remove": "Remove",
-  "availableVariables": "Available Variables List",
-  "partyA": "Party A",
-  "partyB": "Party B",
-  "partyC": "Party C",
-  "witness": "Witness",
-  "typeTitle": "Title",
-  "typeParagraph": "Paragraph",
-  "typeRichText": "Rich Text",
-  "typeVariable": "Variable",
-  "typeTable": "Table",
-  "typeSignatureZone": "Signature Zone",
-  "typeSealZone": "Seal Zone",
-  "typeDateZone": "Date Zone",
-  "typeDivider": "Divider",
-  "typePageBreak": "Page Break",
-  "typeImage": "Image"
-}
diff --git a/web/apps/web-ele/src/locales/langs/en-US/draw.json b/web/apps/web-ele/src/locales/langs/en-US/draw.json
deleted file mode 100644
index 52eefe1..0000000
--- a/web/apps/web-ele/src/locales/langs/en-US/draw.json
+++ /dev/null
@@ -1,164 +0,0 @@
-{
-  "tool": {
-    "selection": "Selection",
-    "hand": "Hand",
-    "rectangle": "Rectangle",
-    "ellipse": "Ellipse",
-    "diamond": "Diamond",
-    "line": "Line",
-    "arrow": "Arrow",
-    "freedraw": "Free Draw",
-    "text": "Text",
-    "image": "Image",
-    "eraser": "Eraser",
-    "frame": "Frame",
-    "laser": "Laser"
-  },
-  "action": {
-    "undo": "Undo",
-    "redo": "Redo",
-    "copy": "Copy",
-    "cut": "Cut",
-    "paste": "Paste",
-    "duplicate": "Duplicate",
-    "delete": "Delete",
-    "selectAll": "Select All",
-    "zoomIn": "Zoom In",
-    "zoomOut": "Zoom Out",
-    "zoomToFit": "Zoom to Fit",
-    "zoomToFitSelection": "Zoom to Fit Selection",
-    "resetZoom": "Reset Zoom",
-    "exportPng": "Export as PNG",
-    "exportSvg": "Export as SVG",
-    "exportJson": "Export as JSON",
-    "save": "Save",
-    "toggleGrid": "Toggle Grid",
-    "toggleDarkMode": "Toggle Dark Mode",
-    "toggleSnap": "Toggle Snap",
-    "toggleStats": "Toggle Stats Panel",
-    "toggleZenMode": "Toggle Zen Mode"
-  },
-  "property": {
-    "strokeColor": "Stroke Color",
-    "backgroundColor": "Background Color",
-    "fillStyle": "Fill Style",
-    "strokeWidth": "Stroke Width",
-    "strokeStyle": "Stroke Style",
-    "roughness": "Roughness",
-    "opacity": "Opacity",
-    "fontSize": "Font Size",
-    "fontFamily": "Font Family",
-    "textAlign": "Text Align",
-    "verticalAlign": "Vertical Align",
-    "arrowheadStart": "Start Arrowhead",
-    "arrowheadEnd": "End Arrowhead",
-    "arrowType": "Arrow Type",
-    "arrowTypeStraight": "Straight",
-    "arrowTypeRound": "Curved",
-    "arrowTypeElbow": "Elbow",
-    "arrowTypeSharp": "Sharp",
-    "roundness": "Roundness",
-    "edges": "Edges",
-    "edgesSharp": "Sharp",
-    "edgesRound": "Round",
-    "sloppiness": "Sloppiness",
-    "link": "Hyperlink",
-    "linkPlaceholder": "Enter link URL...",
-    "mixed": "Mixed values",
-    "alignDistribute": "Align & Distribute",
-    "customColor": "Custom Color",
-    "layers": "Layers",
-    "actions": "Actions"
-  },
-  "fillStyle": {
-    "hachure": "Hachure",
-    "crossHatch": "Cross Hatch",
-    "solid": "Solid",
-    "zigzag": "Zigzag",
-    "dots": "Dots",
-    "dashed": "Dashed",
-    "zigzagLine": "Zigzag Line"
-  },
-  "strokeStyle": {
-    "solid": "Solid",
-    "dashed": "Dashed",
-    "dotted": "Dotted"
-  },
-  "arrowhead": {
-    "none": "None",
-    "arrow": "Arrow",
-    "bar": "Bar",
-    "circle": "Circle",
-    "triangle": "Triangle",
-    "diamond": "Diamond"
-  },
-  "menu": {
-    "copy": "Copy",
-    "cut": "Cut",
-    "paste": "Paste",
-    "duplicate": "Duplicate",
-    "delete": "Delete",
-    "selectAll": "Select All",
-    "layer": "Layer",
-    "bringToFront": "Bring to Front",
-    "sendToBack": "Send to Back",
-    "bringForward": "Bring Forward",
-    "sendBackward": "Send Backward",
-    "flip": "Flip",
-    "flipH": "Flip Horizontal",
-    "flipV": "Flip Vertical",
-    "align": "Align",
-    "alignLeft": "Align Left",
-    "alignCenter": "Align Center",
-    "alignRight": "Align Right",
-    "alignTop": "Align Top",
-    "alignMiddle": "Align Middle",
-    "alignBottom": "Align Bottom",
-    "distributeH": "Distribute Horizontally",
-    "distributeV": "Distribute Vertically",
-    "group": "Group",
-    "ungroup": "Ungroup",
-    "lock": "Lock",
-    "unlock": "Unlock",
-    "addLink": "Add Hyperlink",
-    "editLink": "Edit Hyperlink",
-    "removeLink": "Remove Hyperlink",
-    "openLink": "Open Link",
-    "toggleGrid": "Toggle Grid",
-    "copyStyle": "Copy Style",
-    "pasteStyle": "Paste Style",
-    "openFile": "Open",
-    "saveTo": "Save to...",
-    "export": "Export",
-    "exportPng": "Export as PNG",
-    "exportSvg": "Export as SVG",
-    "exportJson": "Export as JSON",
-    "exportCopyPng": "Copy as PNG",
-    "exportCopySvg": "Copy as SVG"
-  },
-  "label": {
-    "thin": "Thin",
-    "bold": "Bold",
-    "extraBold": "Extra Bold",
-    "architect": "Architect",
-    "artist": "Artist",
-    "cartoonist": "Cartoonist"
-  },
-  "font": {
-    "handDrawn": "Hand-drawn",
-    "normal": "Normal",
-    "code": "Code",
-    "assistant": "Assistant"
-  },
-  "verticalAlign": {
-    "top": "Top",
-    "middle": "Middle",
-    "bottom": "Bottom"
-  },
-  "stats": {
-    "title": "Statistics",
-    "elements": "Elements",
-    "sceneSize": "Scene Size",
-    "multiSelected": "{count} elements selected"
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/en-US/whiteboard.json b/web/apps/web-ele/src/locales/langs/en-US/whiteboard.json
deleted file mode 100644
index 8f65102..0000000
--- a/web/apps/web-ele/src/locales/langs/en-US/whiteboard.json
+++ /dev/null
@@ -1,124 +0,0 @@
-{
-  "tool": {
-    "select": "Select",
-    "hand": "Pan",
-    "pen": "Pen",
-    "highlighter": "Highlighter",
-    "eraser": "Eraser",
-    "shape": "Shape",
-    "line": "Line",
-    "arrow": "Arrow",
-    "connector": "Connector",
-    "text": "Text",
-    "stickyNote": "Sticky Note",
-    "image": "Image",
-    "frame": "Frame",
-    "laser": "Laser"
-  },
-  "shape": {
-    "rect": "Rectangle",
-    "roundedRect": "Rounded Rect",
-    "circle": "Circle",
-    "ellipse": "Ellipse",
-    "diamond": "Diamond",
-    "triangle": "Triangle",
-    "star": "Star",
-    "hexagon": "Hexagon",
-    "pentagon": "Pentagon",
-    "octagon": "Octagon",
-    "parallelogram": "Parallelogram",
-    "cylinder": "Ellipse",
-    "arrowRight": "Arrow Right",
-    "arrowUp": "Arrow Up",
-    "heart": "Heart",
-    "cloud": "Cloud",
-    "chatBubble": "Chat Bubble"
-  },
-  "action": {
-    "undo": "Undo",
-    "redo": "Redo",
-    "zoomIn": "Zoom In",
-    "zoomOut": "Zoom Out",
-    "zoomToFit": "Zoom to Fit",
-    "resetZoom": "Reset Zoom",
-    "background": "Background",
-    "exportPng": "Export PNG",
-    "exportSvg": "Export SVG",
-    "exportJson": "Export JSON",
-    "save": "Save",
-    "menu": "Menu"
-  },
-  "background": {
-    "none": "None",
-    "dots": "Dots",
-    "grid": "Grid",
-    "lines": "Lines"
-  },
-  "property": {
-    "title": "Properties",
-    "fill": "Fill",
-    "stroke": "Stroke",
-    "opacity": "Opacity",
-    "fontSize": "Font Size",
-    "multiHint": "With multiple items selected, only opacity can be adjusted here. Edit fill and stroke on a single selection."
-  },
-  "menu": {
-    "copy": "Copy",
-    "cut": "Cut",
-    "paste": "Paste",
-    "duplicate": "Duplicate",
-    "delete": "Delete",
-    "selectAll": "Select All",
-    "bringToFront": "Bring to Front",
-    "sendToBack": "Send to Back",
-    "bringForward": "Bring Forward",
-    "sendBackward": "Send Backward",
-    "layer": "Layer",
-    "copyStyle": "Copy Style",
-    "pasteStyle": "Paste Style",
-    "lock": "Lock",
-    "unlock": "Unlock",
-    "group": "Group",
-    "ungroup": "Ungroup",
-    "copyAsImage": "Copy as Image",
-    "copiedToClipboard": "Copied to clipboard",
-    "copyFailed": "Copy failed, please check browser permissions",
-    "flipH": "Flip Horizontal",
-    "flipV": "Flip Vertical",
-    "rotate": "Rotate",
-    "rotateCW": "Rotate 90° CW",
-    "rotateCCW": "Rotate 90° CCW",
-    "rotate180": "Rotate 180°",
-    "align": "Align",
-    "alignLeft": "Align Left",
-    "alignCenter": "Align Center",
-    "alignRight": "Align Right",
-    "alignTop": "Align Top",
-    "alignMiddle": "Align Middle",
-    "alignBottom": "Align Bottom",
-    "distributeH": "Distribute Horizontally",
-    "distributeV": "Distribute Vertically"
-  },
-  "toolbar": {
-    "changeShape": "Change Shape",
-    "borderStyle": "Border Style",
-    "textStyle": "Text Style",
-    "textColor": "Text Color",
-    "bgColor": "Background Color"
-  },
-  "connector": {
-    "startStyle": "Start Style",
-    "endStyle": "End Style",
-    "swapDirection": "Swap Direction",
-    "lineStyle": "Line Style",
-    "endNone": "None",
-    "endArrow": "Arrow",
-    "orthogonal": "Orthogonal",
-    "straight": "Straight",
-    "straightLine": "Straight Line",
-    "straightArrow": "Arrow",
-    "elbowConnector": "Elbow Connector"
-  },
-  "penWidth": "Pen Width",
-  "penColor": "Pen Color"
-}
diff --git a/web/apps/web-ele/src/locales/langs/en-US/wiki.json b/web/apps/web-ele/src/locales/langs/en-US/wiki.json
deleted file mode 100644
index 8f20b1a..0000000
--- a/web/apps/web-ele/src/locales/langs/en-US/wiki.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-  "title": "Wiki",
-  "description": "Team knowledge management and document collaboration",
-  "createSpace": "New Wiki Space",
-  "spaceName": "Space Name",
-  "spaceNamePlaceholder": "Enter space name",
-  "spaceDescription": "Description",
-  "spaceDescriptionPlaceholder": "Briefly describe the purpose of this space",
-  "category": "Category",
-  "categoryDefault": "Default",
-  "categoryTech": "Technology",
-  "categoryProduct": "Product",
-  "categoryDesign": "Design",
-  "categoryBusiness": "Business",
-  "categoryOther": "Other",
-  "visibility": "Visibility",
-  "private": "Private",
-  "team": "Team",
-  "public": "Public",
-  "emptySpaces": "No wiki spaces yet",
-  "emptySpacesHint": "Create a wiki space to organize team knowledge",
-  "emptyDocuments": "No documents yet",
-  "emptyDocumentsHint": "Click the button above to create your first document",
-  "addDocument": "New Document",
-  "addSubPage": "New Sub Page",
-  "spaceSettings": "Space Settings",
-  "deleteSpace": "Delete Space",
-  "deleteSpaceConfirm": "Are you sure you want to delete wiki space \"{name}\"? All documents will be moved to trash.",
-  "deleteDocument": "Delete Document",
-  "deleteDocumentConfirm": "Are you sure you want to delete document \"{name}\"?",
-  "documentCount": "{count} documents",
-  "createdBy": "Created by",
-  "updatedAt": "Updated at",
-  "untitled": "Untitled Document",
-  "backToList": "Back to Wiki Spaces",
-  "rename": "Rename",
-  "searchPlaceholder": "Search wiki spaces...",
-  "searchDocPlaceholder": "Search documents...",
-  "saving": "Saving...",
-  "autoSaved": "Auto saved",
-  "allSpaces": "All Spaces",
-  "mySpaces": "My Spaces",
-  "icon": "Icon",
-  "cover": "Cover",
-  "avatar": "Avatar",
-  "avatarHint": "Choose an avatar for the wiki space",
-  "noResults": "No results found",
-  "myDocuments": "My Documents",
-  "wikiSpaces": "Wiki Spaces",
-  "emptyMyDocs": "No personal documents yet",
-  "emptyMyDocsHint": "Create personal documents that don't belong to any wiki space",
-  "newBlankDoc": "Blank Document",
-  "newFromTemplate": "From Template",
-  "editSpace": "Edit Wiki Space",
-  "editSpaceSuccess": "Wiki space updated"
-}
diff --git a/web/apps/web-ele/src/locales/langs/en-US/workflow-designer.json b/web/apps/web-ele/src/locales/langs/en-US/workflow-designer.json
deleted file mode 100644
index b30530b..0000000
--- a/web/apps/web-ele/src/locales/langs/en-US/workflow-designer.json
+++ /dev/null
@@ -1,738 +0,0 @@
-{
-  "designer": {
-    "title": "Workflow Designer",
-    "flowName": "Workflow Name",
-    "flowNamePlaceholder": "Enter workflow name",
-    "save": "Save",
-    "preview": "Preview",
-    "publish": "Publish",
-    "undo": "Undo",
-    "redo": "Redo",
-    "saveFirst": "Please save the workflow first",
-    "isDirty": "You have unsaved changes",
-    "saveSuccess": "Saved successfully",
-    "publishSuccess": "Published successfully",
-    "previewInfo": "Preview feature is under development",
-    "deleteNodeConfirm": "Are you sure you want to delete this node?",
-    "deleteBranchConfirm": "Are you sure you want to delete this condition branch?",
-    "tips": "Tips",
-    "readonlyTip": "Read-only mode, cannot be edited",
-    "embeddedTip": "Embedded mode",
-    "minimap": "Minimap"
-  },
-  "preview": {
-    "title": "Workflow Preview",
-    "unnamedFlow": "Unnamed Workflow",
-    "relatedForm": "Related Form",
-    "nodeDetail": "Node Details",
-    "statistics": {
-      "approval": " approval(s)",
-      "copy": " CC(s)",
-      "branch": " branch(es)"
-    },
-    "assigneeTypes": {
-      "user": "Specified Members",
-      "role": "Specified Roles",
-      "department": "Specified Departments",
-      "formField": "From Form",
-      "initiator": "Initiator",
-      "manager": "Direct Manager",
-      "superior": "Superior"
-    },
-    "multiApproval": {
-      "sequential": "Sequential",
-      "parallel": "Countersign (All approve)",
-      "any": "Any (One approves)"
-    },
-    "multiHandle": {
-      "sequential": "Sequential",
-      "all": "All",
-      "any": "Any"
-    },
-    "sections": {
-      "approvalSettings": "Approver Settings",
-      "handleSettings": "Handler Settings",
-      "copySettings": "CC Settings",
-      "delaySettings": "Delay Settings",
-      "notifySettings": "Notification Settings",
-      "serviceSettings": "Service Settings",
-      "subflowSettings": "Subflow Settings",
-      "dataUpdateSettings": "Field Update Settings",
-      "formPermissions": "Form Field Permissions",
-      "conditionBranches": "Condition Branches",
-      "parallelBranches": "Parallel Branches"
-    },
-    "labels": {
-      "approverType": "Approver Type",
-      "approvers": "Approvers",
-      "handlerType": "Handler Type",
-      "handlers": "Handlers",
-      "copyType": "CC Type",
-      "copyRecipients": "CC Recipients",
-      "specifiedRole": "Specified Roles",
-      "specifiedDept": "Specified Departments",
-      "superiorLevel": "Superior Level",
-      "level": "Level ",
-      "levelSuffix": "",
-      "superior": " Superior",
-      "manager": " Manager",
-      "multiApproval": "Multi-Approval",
-      "multiHandle": "Multi-Handle Mode",
-      "timeoutSettings": "Timeout Settings",
-      "hoursLater": " hours later",
-      "autoApprove": "Auto Approve",
-      "autoReject": "Auto Reject",
-      "waitDuration": "Wait Duration",
-      "notifyRecipient": "Recipients",
-      "notifyChannel": "Channels",
-      "notifyTitle": "Title",
-      "notSet": "Not Set",
-      "serviceName": "Service Name",
-      "requestMethod": "Method",
-      "requestUrl": "URL",
-      "timeoutDuration": "Timeout",
-      "seconds": " seconds",
-      "subflow": "Subflow",
-      "executionMode": "Execution Mode",
-      "syncExecution": "Synchronous",
-      "asyncExecution": "Asynchronous",
-      "variablePass": "Variable Passing",
-      "passAllVariables": "Pass all variables",
-      "passSelectedVariables": "Pass selected",
-      "noVariablePass": "No pass",
-      "branchCount": "Branch Count",
-      "nodeType": "Node Type",
-      "description": "Description"
-    },
-    "permissions": {
-      "editable": "Editable",
-      "readonly": "Read-only",
-      "hidden": "Hidden"
-    },
-    "descriptions": {
-      "delay": "The workflow will pause at this node and continue automatically after the specified time",
-      "notify": "Notifications will be sent automatically when the workflow reaches this node",
-      "service": "The configured service will be called automatically when the workflow reaches this node",
-      "subflow": "The subflow will be invoked when the workflow reaches this node",
-      "data_update": "Form field values will be updated automatically when the workflow reaches this node"
-    },
-    "conditionConfigured": "{count} condition group(s) configured",
-    "conditionNotConfigured": "Condition not configured",
-    "branchCountValue": "{count} branch(es)",
-    "parallelExecutionDesc": "All branches execute simultaneously and continue after all are completed",
-    "branch": "Branch ",
-    "startNodeDesc": "Everyone can initiate the workflow",
-    "endNodeDesc": "Workflow ends"
-  },
-  "nodes": {
-    "start": {
-      "name": "Initiator",
-      "title": "Initiator",
-      "desc": "Workflow initiator",
-      "placeholder": "Everyone"
-    },
-    "approval": {
-      "name": "Approver",
-      "title": "Approver",
-      "desc": "Add approver node",
-      "placeholder": "Please set approver",
-      "multiApproval": {
-        "sequential": "Sequential",
-        "parallel": "Countersign",
-        "any": "Any"
-      },
-      "summary": {
-        "department": " dept(s)",
-        "formField": "From Form",
-        "initiator": "Initiator",
-        "manager": " level manager",
-        "role": " role(s)",
-        "superior": " level superior",
-        "user": " member(s)",
-        "prefix": "Level "
-      }
-    },
-    "handle": {
-      "name": "Handler",
-      "title": "Handler",
-      "desc": "Add handler node",
-      "placeholder": "Please set handler",
-      "multiHandle": {
-        "sequential": "Sequential",
-        "all": "All",
-        "any": "Any"
-      },
-      "summary": {
-        "department": " dept(s)",
-        "formField": "From Form",
-        "initiator": "Initiator",
-        "manager": " level manager",
-        "role": " role(s)",
-        "superior": " level superior",
-        "user": " member(s)",
-        "prefix": "Level "
-      }
-    },
-    "copy": {
-      "name": "CC",
-      "title": "CC",
-      "desc": "Add CC node",
-      "placeholder": "Please set CC recipients",
-      "summary": {
-        "department": " dept(s)",
-        "formField": "From Form",
-        "initiator": "Initiator",
-        "role": " role(s)",
-        "user": " member(s)"
-      }
-    },
-    "delay": {
-      "name": "Delay",
-      "title": "Delay",
-      "desc": "Wait for specified time",
-      "placeholder": "Please set delay duration",
-      "summary": {
-        "minute": " minute(s)",
-        "hour": " hour(s)",
-        "day": " day(s)",
-        "workday": " workday(s)",
-        "wait": "Wait "
-      }
-    },
-    "notify": {
-      "name": "Notify",
-      "title": "Notify",
-      "desc": "Send notification",
-      "placeholder": "Please set notification recipients",
-      "summary": {
-        "department": " dept(s)",
-        "formField": "From Form",
-        "initiator": "Initiator",
-        "role": " role(s)",
-        "user": " member(s)",
-        "channels": "Channels"
-      }
-    },
-    "service": {
-      "name": "Service",
-      "title": "Service",
-      "desc": "Call external service or API",
-      "placeholder": "Please configure service call",
-      "summary": {
-        "url": "URL",
-        "notConfigured": "Not configured"
-      }
-    },
-    "subflow": {
-      "name": "Subflow",
-      "title": "Subflow",
-      "desc": "Call another workflow",
-      "placeholder": "Please select subflow",
-      "summary": {
-        "notSelected": "Not selected",
-        "sync": "Sync",
-        "async": "Async"
-      }
-    },
-    "data_update": {
-      "name": "Field Update",
-      "title": "Field Update",
-      "desc": "Auto update form field values",
-      "placeholder": "Please add update rules",
-      "summary": {
-        "ruleCount": "{count} update rule(s) configured",
-        "crossForm": "Cross-form update"
-      }
-    },
-    "condition": {
-      "name": "Condition",
-      "title": "Condition",
-      "desc": "Add condition branch",
-      "priority": "Priority ",
-      "conditionBranch": "Condition {num}",
-      "defaultBranch": "Default",
-      "defaultBranchDesc": "Other conditions enter this branch",
-      "pleaseSetCondition": "Please set condition",
-      "addCondition": "Add Condition"
-    },
-    "parallel": {
-      "name": "Parallel",
-      "title": "Parallel",
-      "desc": "Add parallel branches",
-      "branchFallback": "Branch {num}"
-    },
-    "end": {
-      "name": "End",
-      "title": "End",
-      "desc": "Workflow end"
-    }
-  },
-  "property": {
-    "title": {
-      "condition": "Condition Settings",
-      "start": "Initiator Settings",
-      "approval": "Approver Settings",
-      "handle": "Handler Settings",
-      "copy": "CC Settings",
-      "delay": "Delay Settings",
-      "notify": "Notification Settings",
-      "service": "Service Settings",
-      "subflow": "Subflow Settings",
-      "dataUpdate": "Field Update Settings",
-      "conditionBranch": "Branch Settings",
-      "parallelBranch": "Parallel Branch Settings",
-      "end": "End Settings",
-      "node": "Node Settings"
-    },
-    "base": {
-      "nodeName": "Node Name",
-      "nodeNamePlaceholder": "Please enter node name",
-      "nodeNameHint": "Custom names appear in the designer, flowchart, approval path, and records. Leave empty to use the default type label."
-    },
-    "assignee": {
-      "type": "Approver Type",
-      "handleType": "Handler Type",
-      "copyType": "CC Type",
-      "selectUser": "Select Members",
-      "selectRole": "Select Roles",
-      "selectDept": "Select Departments",
-      "userPlaceholder": "Please select approvers",
-      "rolePlaceholder": "Please select roles",
-      "deptPlaceholder": "Please select departments",
-      "superiorLevel": "Superior Level",
-      "superiorHint": "1 = Direct supervisor, 2 = Supervisor's supervisor, etc.",
-      "superiorLevelHint": "Superior level (1 for direct supervisor)",
-      "managerHint": "1 = Direct manager, 2 = Manager's manager, etc.",
-      "initiatorHint": "The approver is the workflow initiator",
-      "copyInitiatorHint": "CC to the workflow initiator",
-      "handleInitiatorHint": "The handler is the workflow initiator",
-      "selectField": "Select Field",
-      "fieldPlaceholder": "Please select a user-type form field",
-      "noUserField": "No user-type fields found in the current form",
-      "fieldSingle": "Single",
-      "fieldMultiple": "Multiple",
-      "fieldTypeUser": "User",
-      "fieldTypeForm": "Form",
-      "noSourceField": "No user selector or form selector fields found in the current form",
-      "formFieldHint": "At runtime, user IDs will be collected from the selected fields, supports multiple fields, merged and deduplicated",
-      "userFieldMapping": "User Field Mapping",
-      "userFieldPlaceholder": "Select a user field from the referenced form",
-      "userFieldHint": "Form selector stores linked record IDs. Specify which user field from the linked record to use as assignee",
-      "types": {
-        "user": "Members",
-        "role": "Roles",
-        "department": "Departments",
-        "superior": "Supervisor",
-        "manager": "Manager",
-        "initiator": "Initiator",
-        "form_field": "From Form Field"
-      }
-    },
-    "multiApproval": {
-      "label": "Multi-person Approval",
-      "any": "Or-sign (Any one approves)",
-      "parallel": "And-sign (Everyone approves)",
-      "sequential": "Sequential"
-    },
-    "multiHandle": {
-      "label": "Multi-person Handling",
-      "any": "Any (Any one completes)",
-      "all": "All (Everyone completes)",
-      "sequential": "Sequential"
-    },
-    "timeout": {
-      "label": "Timeout Settings",
-      "enable": "Enable Timeout Handling",
-      "time": "Timeout Duration",
-      "action": "Timeout Action",
-      "notifyType": "Notification Type",
-      "unit": {
-        "minute": "Minutes",
-        "hour": "Hours",
-        "day": "Days",
-        "workday": "Workdays"
-      },
-      "actions": {
-        "notify": "Notify only",
-        "auto_approve": "Auto Approve",
-        "auto_reject": "Auto Reject"
-      }
-    },
-    "notify": {
-      "label": "Notification Settings",
-      "approver": "Notify Approver",
-      "initiator": "Notify Initiator",
-      "recipient": "Recipient",
-      "recipientType": "Recipient Type",
-      "whenTaskCreated": "When task is created",
-      "onApprove": "When approved",
-      "onReject": "When rejected",
-      "onHandleComplete": "When completed",
-      "channels": "Channels",
-      "channelPlaceholder": "Select channels",
-      "title": "Title",
-      "titlePlaceholder": "Please enter title",
-      "content": "Content",
-      "contentPlaceholder": "Please enter content, use {'${field}'} to reference form fields",
-      "variableDesc": "Variable Guide",
-      "initiatorVar": "{'${Initiator}'} - Initiator Name",
-      "flowNameVar": "{'${Workflow}'} - Workflow Name",
-      "fieldVar": "{'${Field}'} - Field Value",
-      "channelTypes": {
-        "site": "In-site",
-        "chat": "Chat",
-        "email": "Email",
-        "sms": "SMS",
-        "wechat": "WeChat",
-        "dingtalk": "DingTalk",
-        "feishu": "Feishu",
-        "dingtalkTodo": "DingTalk Todo"
-      }
-    },
-    "signature": {
-      "label": "Signature Settings",
-      "required": "Require Signature",
-      "hint": "When enabled, approvers must sign when approving"
-    },
-    "action": {
-      "label": "Actions",
-      "hint": "Set available actions for approvers at this node",
-      "descriptions": {
-        "approve": "Approve, workflow continues",
-        "reject": "Reject, terminate workflow",
-        "return": "Return to previous node or initiator",
-        "delegate": "Delegate to others, return to self after completion",
-        "transfer": "Transfer to others, self no longer involved",
-        "add_sign": "Add approvers",
-        "reduce_sign": "Remove approvers (And-sign mode only)"
-      },
-      "tips": {
-        "title": "Action Guide",
-        "approveReject": "Approve/Reject: Basic actions, at least one is recommended",
-        "return": "Return: Can return to previous node or initiator",
-        "delegate": "Delegate: Temporary delegation, returns to delegatee",
-        "transfer": "Transfer: Permanent transfer, self no longer handles",
-        "addSign": "Add Sign: Add approvers at the current node",
-        "reduceSign": "Reduce Sign: Only available in And-sign mode"
-      },
-      "types": {
-        "approve": "Approve",
-        "reject": "Reject",
-        "return": "Return",
-        "delegate": "Delegate",
-        "transfer": "Transfer",
-        "add_sign": "Add Sign",
-        "reduce_sign": "Reduce Sign"
-      }
-    },
-    "permission": {
-      "label": "Field Permissions",
-      "hint": "Set form fields that can be viewed or edited at this node"
-    },
-    "segment": {
-      "approver": "Approver",
-      "actions": "Actions",
-      "permissions": "Permissions",
-      "handler": "Handler"
-    },
-    "delay": {
-      "title": "Delay Settings",
-      "duration": "Duration",
-      "hint": "Set the time to wait, and the process will automatically continue when the specified time is reached",
-      "minuteTip": "Calculated by natural minutes",
-      "hourTip": "Calculated by natural hours",
-      "dayTip": "Calculated by natural days (24 hours)",
-      "workdayTip": "Only workdays are calculated, skipping weekends and holidays"
-    },
-    "conditionBranch": {
-      "title": "Branch Settings",
-      "name": "Condition Name",
-      "namePlaceholder": "Please enter condition name",
-      "hint": "Set conditions to enter this branch",
-      "hintSub": "Condition groups are linked by 'OR', while conditions within a group are linked by 'AND'",
-      "noFormHint": "Please link a form first to configure conditions",
-      "defaultTitle": "Default Branch",
-      "defaultHint": "This branch is taken when no other conditions are met"
-    },
-    "parallelBranch": {
-      "name": "Branch Name",
-      "namePlaceholder": "Please enter branch name",
-      "addBranch": "Add Branch"
-    },
-    "startNode": {
-      "title": "Initiator Node",
-      "hint": "All authorized users can initiate this process",
-      "permissionHint": "Set field permissions (editable/readonly/hidden) for the initiator when filling in the form"
-    },
-    "service": {
-      "title": "Service Settings",
-      "baseSettings": "Base Settings",
-      "name": "Service Name",
-      "namePlaceholder": "Please enter service name (optional)",
-      "url": "URL",
-      "urlPlaceholder": "https://api.example.com/endpoint",
-      "method": "Method",
-      "headers": "Headers",
-      "headerName": "Header Name",
-      "headerValue": "Header Value",
-      "addHeader": "Add Header",
-      "params": "Params",
-      "body": "Body",
-      "advancedSettings": "Advanced Settings",
-      "timeout": "Timeout (s)",
-      "retry": "Retries",
-      "failAction": "On Failure",
-      "resultVar": "Result Variable",
-      "resultVarPlaceholder": "Variable name to store response (optional)",
-      "resultVarHint": "Response result will be stored in this variable for later use",
-      "variableDesc": "Variable Guide",
-      "paramFieldVar": "Use {'${field}'} to reference form fields in parameters",
-      "resultVarUsage": "Response results can be used in branches via variable name",
-      "failActions": {
-        "continue": "Continue",
-        "stop": "Terminate",
-        "retry": "Auto Retry"
-      }
-    },
-    "subflow": {
-      "title": "Subflow Settings",
-      "select": "Select Subflow",
-      "selectPlaceholder": "Please select a subflow",
-      "selectWarning": "Please select a subflow",
-      "flowId": "Flow ID",
-      "flowName": "Flow Name",
-      "unnamed": "Unnamed",
-      "varPass": "Variable Pass",
-      "varPassHint": "Configure variables passed to the subflow",
-      "varPassMode": "Pass Mode",
-      "selectVars": "Select Variables",
-      "selectVarsPlaceholder": "Please select variables to pass",
-      "selectVarsHint": "Select form fields to be passed to the subflow",
-      "varMapping": "Variable Mapping",
-      "mappingRule1": "Workflow variables will be mapped automatically by name",
-      "mappingRule2": "Same name variables will be overwritten, others ignored",
-      "executionSettings": "Execution Settings",
-      "executionMode": "Execution Mode",
-      "sync": "Sync",
-      "syncDesc": "Wait for completion",
-      "async": "Async",
-      "asyncDesc": "Continue immediately",
-      "resultMode": "Result Handling",
-      "ignoreResult": "Ignore result",
-      "saveResult": "Save result",
-      "resultVarName": "Result Variable Name",
-      "resultVarPlaceholder": "e.g., subflowResult",
-      "resultVarHint": "Approval result will be stored in this variable",
-      "asyncWarning": "Async Execution Notes",
-      "asyncWarning1": "Process won't wait for subflow",
-      "asyncWarning2": "Result cannot be obtained",
-      "asyncWarning3": "Subflow failure won't affect main flow",
-      "skipSubflow": "Skip subflow (treated as passed)",
-      "rejectSubflow": "Reject subflow",
-      "usageTips": "Usage Tips",
-      "usageTip1": "Subflow will inherit main flow initiator information",
-      "usageTip2": "Subflow has independent approval records and status",
-      "usageTip3": "Subsequent processing can be based on subflow results via branches",
-      "varPassModes": {
-        "all": "Pass All",
-        "selected": "Pass Selected",
-        "none": "Pass None"
-      }
-    },
-    "dataUpdate": {
-      "title": "Field Update Settings",
-      "description": "When the workflow reaches this node, form field values will be updated automatically based on the configured rules.",
-      "targetForm": "Target Form",
-      "targetFormPlaceholder": "Select a form to update",
-      "currentForm": "Current Form",
-      "matchCondition": "Match Condition",
-      "matchConditionHint": "Specify the field mapping between the current form and the target form to locate the target records.",
-      "sourceField": "Source Field",
-      "sourceFieldPlaceholder": "Select a field from current form",
-      "targetMatchField": "Target Field",
-      "targetMatchFieldPlaceholder": "Select a field from target form",
-      "updateScope": "Update Scope",
-      "updateScopeFirst": "First match only",
-      "updateScopeAll": "All matched records",
-      "rulesTitle": "Update Rules",
-      "targetField": "Target Field",
-      "targetFieldPlaceholder": "Select a field to update",
-      "valueType": "Value Type",
-      "value": "Value",
-      "constantPlaceholder": "Enter a constant value",
-      "fieldPlaceholder": "Select a source field",
-      "formulaPlaceholder": "Enter expression, e.g.: {{price}} * {{quantity}}",
-      "formulaHint": "Use {{field_name}} to reference form fields. Supports arithmetic (+, -, *, /)",
-      "systemPlaceholder": "Select a system variable",
-      "addRule": "Add Update Rule",
-      "noRulesHint": "No update rules yet. Click the button above to add one.",
-      "valueTypes": {
-        "constant": "Constant",
-        "field": "Field Reference",
-        "formula": "Expression",
-        "system": "System Variable"
-      },
-      "systemVars": {
-        "currentTime": "Current Time",
-        "currentDate": "Current Date",
-        "currentUser": "Current User",
-        "initiator": "Initiator",
-        "instanceNo": "Instance No.",
-        "instanceTitle": "Instance Title"
-      }
-    }
-  },
-  "condition": {
-    "title": "Condition Group",
-    "and": "AND",
-    "or": "OR",
-    "andHint": "Conditions within group are linked with AND",
-    "addCondition": "Add Condition",
-    "addGroup": "Add Group",
-    "emptyHint": "No conditions yet, click below to add",
-    "selectField": "Select Field",
-    "selectOperator": "Select Operator",
-    "inputValue": "Value",
-    "inputNumber": "Value",
-    "selectDate": "Select Date",
-    "selectValue": "Select Value",
-    "operators": {
-      "eq": "Equals",
-      "ne": "Not Equals",
-      "gt": "Greater Than",
-      "gte": "Greater Than or Equal",
-      "lt": "Less Than",
-      "lte": "Less Than or Equal",
-      "contains": "Contains",
-      "not_contains": "Not Contains",
-      "in": "In",
-      "not_in": "Not In",
-      "empty": "Is Empty",
-      "not_empty": "Is Not Empty"
-    }
-  },
-  "detail": {
-    "title": "Process Details",
-    "tabs": {
-      "progress": "Progress",
-      "form": "Form Content",
-      "flowchart": "Flowchart",
-      "flowProgress": "Approval Path"
-    },
-    "currentPending": "Current Pending",
-    "flowInfo": "Process Info",
-    "approvalRecord": "Approval Record",
-    "flowTitle": "Title",
-    "flowType": "Type",
-    "flowStatus": "Status",
-    "flowNo": "Process No.",
-    "initiator": "Initiator",
-    "currentNode": "Current Node",
-    "startTime": "Start Time",
-    "completeTime": "Complete Time",
-    "duration": "Duration",
-    "unknownNode": "Unknown Node",
-    "start": "Start",
-    "noData": "No Data",
-    "noApprovalRecord": "No Approval Record",
-    "noFormContent": "No Form Content",
-    "loadDataFailed": "Failed to load data",
-    "loadFormDataFailed": "Failed to load form data",
-    "systemAuto": "System Auto",
-    "person": "person(s)",
-    "timeout": "Timeout",
-    "waiting": "Waiting",
-    "daysLater": " days",
-    "hoursLater": " hours",
-    "minutesLater": " minutes",
-    "days": " days ",
-    "hours": " hours ",
-    "minutes": " minutes",
-    "status": {
-      "pending": "Pending",
-      "approved": "Approved",
-      "rejected": "Rejected",
-      "cancelled": "Cancelled"
-    },
-    "actions": {
-      "start": "Start Process",
-      "approve": "Approved",
-      "reject": "Rejected",
-      "return": "Returned",
-      "transfer": "Transferred",
-      "delegate": "Delegated",
-      "add_sign": "Add Sign",
-      "revise": "Resubmit",
-      "cancel": "Cancelled",
-      "copy": "Copied",
-      "handle": "Handled",
-      "urge": "Urged",
-      "task_timeout": "Task Timeout",
-      "task_timeout_notify": "Timeout Notify",
-      "task_auto_approve": "Auto Approved",
-      "task_auto_reject": "Auto Rejected",
-      "delay_start": "Delay Start",
-      "delay_complete": "Delay Complete",
-      "delay_skip": "Delay Skipped",
-      "notify": "Notified",
-      "parallel_start": "Parallel Start",
-      "parallel_complete": "Parallel Complete",
-      "subflow_start": "Subflow Start",
-      "subflow_complete": "Subflow Complete",
-      "data_update": "Field Update",
-      "condition": "Condition Branch"
-    },
-    "flowProgress": {
-      "returnRecords": "Return Records",
-      "noData": "No progress data",
-      "loadFailed": "Failed to load progress",
-      "delayWaiting": "Delay waiting, expected resume at: ",
-      "pending": "Pending",
-      "waiting": "Waiting",
-      "skipped": "Skipped",
-      "copied": "Copied",
-      "nodeTypes": {
-        "start": "Start",
-        "end": "End",
-        "approval": "Approval",
-        "handle": "Handle",
-        "copy": "Copy",
-        "condition": "Condition",
-        "parallel": "Parallel",
-        "delay": "Delay",
-        "notify": "Notify",
-        "service": "Service",
-        "subflow": "Subflow",
-        "data_update": "Field Update"
-      },
-      "nodeStatus": {
-        "completed": "Completed",
-        "active": "In Progress",
-        "pending": "Pending",
-        "skipped": "Skipped",
-        "rejected": "Rejected"
-      },
-      "actions": {
-        "approve": "Approved",
-        "reject": "Rejected",
-        "return": "Returned",
-        "transfer": "Transferred",
-        "delegate": "Delegated",
-        "handle": "Handled",
-        "add_sign": "Add Sign"
-      },
-      "signTypes": {
-        "before": "Before Sign",
-        "after": "After Sign",
-        "parallel": "Parallel Sign"
-      },
-      "extraActions": {
-        "add_sign": "Add Sign",
-        "reduce_sign": "Reduce Sign",
-        "transfer": "Transfer",
-        "delegate": "Delegate",
-        "return": "Return"
-      }
-    }
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/en-US/workflow-designer.json_new b/web/apps/web-ele/src/locales/langs/en-US/workflow-designer.json_new
deleted file mode 100644
index e69de29..0000000
diff --git a/web/apps/web-ele/src/locales/langs/en-US/workflow-designer.json_sync b/web/apps/web-ele/src/locales/langs/en-US/workflow-designer.json_sync
deleted file mode 100644
index e69de29..0000000
diff --git a/web/apps/web-ele/src/locales/langs/en-US/zq-editor.json b/web/apps/web-ele/src/locales/langs/en-US/zq-editor.json
deleted file mode 100644
index 7e023b9..0000000
--- a/web/apps/web-ele/src/locales/langs/en-US/zq-editor.json
+++ /dev/null
@@ -1,251 +0,0 @@
-{
-  "placeholder": "Type / to open command menu...",
-  "slash": {
-    "noResult": "No matching commands found",
-    "category": {
-      "text": "Text",
-      "list": "List",
-      "media": "Media",
-      "advanced": "Advanced",
-      "diagram": "Diagram"
-    },
-    "text": "Text",
-    "textDesc": "Plain paragraph text",
-    "heading1": "Heading 1",
-    "heading1Desc": "Large heading",
-    "heading2": "Heading 2",
-    "heading2Desc": "Medium heading",
-    "heading3": "Heading 3",
-    "heading3Desc": "Small heading",
-    "bulletList": "Bullet List",
-    "bulletListDesc": "Create a bulleted list",
-    "orderedList": "Numbered List",
-    "orderedListDesc": "Create a numbered list",
-    "taskList": "Task List",
-    "taskListDesc": "Create a task list with checkboxes",
-    "blockquote": "Quote",
-    "blockquoteDesc": "Create a quote block",
-    "codeBlock": "Code Block",
-    "codeBlockDesc": "Create a code block",
-    "divider": "Divider",
-    "dividerDesc": "Insert a horizontal divider",
-    "table": "Table",
-    "tableDesc": "Insert a table",
-    "image": "Image",
-    "imageDesc": "Upload or embed an image",
-    "callout": "Callout",
-    "calloutDesc": "Insert a highlighted callout",
-    "toggle": "Toggle",
-    "toggleDesc": "Create a collapsible content block",
-    "columns": "Columns",
-    "columnsDesc": "Insert a two-column layout",
-    "toc": "Table of Contents",
-    "tocDesc": "Auto-generate a table of contents from headings",
-    "inlineMath": "Inline Math",
-    "inlineMathDesc": "Insert an inline math formula",
-    "video": "Video",
-    "videoDesc": "Upload a video file",
-    "attachment": "Attachment",
-    "attachmentDesc": "Upload any type of file",
-    "embed": "Embed Link",
-    "embedDesc": "Insert a URL preview card",
-    "emoji": "Emoji",
-    "emojiDesc": "Insert an emoji",
-    "whiteboard": "Whiteboard",
-    "whiteboardDesc": "Create a drawable whiteboard",
-    "draw": "Draw",
-    "drawDesc": "Create a hand-drawn style drawing board"
-  },
-  "whiteboard": {
-    "title": "Whiteboard",
-    "edit": "Edit",
-    "close": "Close",
-    "delete": "Delete",
-    "saveAndClose": "Save & Close",
-    "clickToCreate": "Click to create whiteboard"
-  },
-  "draw": {
-    "title": "Drawing Board",
-    "edit": "Edit",
-    "close": "Close",
-    "delete": "Delete",
-    "saveAndClose": "Save & Close",
-    "clickToCreate": "Click to create drawing board",
-    "dblclickToEdit": "Double-click to edit"
-  },
-  "bubble": {
-    "turnInto": "Turn into",
-    "bold": "Bold",
-    "italic": "Italic",
-    "underline": "Underline",
-    "strikethrough": "Strikethrough",
-    "code": "Inline Code",
-    "highlight": "Highlight",
-    "link": "Link",
-    "alignLeft": "Align Left",
-    "alignCenter": "Align Center",
-    "alignRight": "Align Right",
-    "fontSize": "Font Size",
-    "fontSizeDefault": "Default",
-    "emoji": "Emoji"
-  },
-  "turnInto": {
-    "text": "Text",
-    "heading1": "Heading 1",
-    "heading2": "Heading 2",
-    "heading3": "Heading 3",
-    "bulletList": "Bullet List",
-    "orderedList": "Numbered List",
-    "taskList": "Task List",
-    "blockquote": "Quote",
-    "codeBlock": "Code Block"
-  },
-  "color": {
-    "textColor": "Text Color",
-    "highlightColor": "Highlight Color",
-    "default": "Default",
-    "gray": "Gray",
-    "brown": "Brown",
-    "orange": "Orange",
-    "yellow": "Yellow",
-    "green": "Green",
-    "blue": "Blue",
-    "purple": "Purple",
-    "pink": "Pink",
-    "red": "Red",
-    "none": "None",
-    "cyan": "Cyan"
-  },
-  "link": {
-    "placeholder": "Enter link URL...",
-    "confirm": "Confirm",
-    "cancel": "Cancel"
-  },
-  "table": {
-    "moveUp": "Move Row Up",
-    "moveDown": "Move Row Down",
-    "moveLeft": "Move Column Left",
-    "moveRight": "Move Column Right",
-    "insertRowAbove": "Insert Row Above",
-    "insertRowBelow": "Insert Row Below",
-    "insertColumnLeft": "Insert Column Left",
-    "insertColumnRight": "Insert Column Right",
-    "color": "Color",
-    "clearColumn": "Clear Column",
-    "duplicateRow": "Insert Row Below",
-    "duplicateColumn": "Insert Column Right",
-    "deleteRow": "Delete Row",
-    "deleteColumn": "Delete Column",
-    "defaultColor": "Default",
-    "lightGray": "Light Gray",
-    "lightRed": "Light Red",
-    "lightOrange": "Light Orange",
-    "lightYellow": "Light Yellow",
-    "lightGreen": "Light Green",
-    "lightBlue": "Light Blue",
-    "lightPurple": "Light Purple",
-    "lightPink": "Light Pink",
-    "mergeCells": "Merge Cells",
-    "splitCell": "Split Cell",
-    "toggleHeaderRow": "Toggle Header Row",
-    "toggleHeaderColumn": "Toggle Header Column",
-    "deleteTable": "Delete Table",
-    "cellAlign": "Cell Alignment",
-    "cellAlignLeft": "Align Left",
-    "cellAlignCenter": "Align Center",
-    "cellAlignRight": "Align Right",
-    "fullWidth": "Full Width",
-    "stripedRows": "Striped Rows",
-    "sortAsc": "Sort Ascending",
-    "sortDesc": "Sort Descending",
-    "clearCell": "Clear Cell",
-    "sizePicker": "Choose Table Size",
-    "sizePickerHint": "{rows} × {cols} table"
-  },
-  "callout": {
-    "info": "Info",
-    "warning": "Warning",
-    "success": "Success",
-    "error": "Error"
-  },
-  "toggle": {
-    "placeholder": "Toggle heading...",
-    "empty": "Empty content, expand to edit"
-  },
-  "toc": {
-    "title": "Table of Contents",
-    "empty": "Add headings and the table of contents will be generated automatically",
-    "untitled": "Untitled"
-  },
-  "image": {
-    "alignment": "Alignment",
-    "alignLeft": "Align Left",
-    "alignCenter": "Center",
-    "alignRight": "Align Right",
-    "size": "Size",
-    "small": "Small",
-    "medium": "Medium",
-    "large": "Large",
-    "reset": "Reset Size",
-    "delete": "Delete",
-    "caption": "Add a caption...",
-    "uploading": "Uploading...",
-    "uploadFailed": "Upload failed",
-    "loadFailed": "Failed to load image",
-    "retry": "Retry"
-  },
-  "video": {
-    "delete": "Delete",
-    "uploading": "Uploading..."
-  },
-  "attachment": {
-    "download": "Download",
-    "delete": "Delete",
-    "untitled": "Untitled File"
-  },
-  "upload": {
-    "fileSizeExceeds": "File size exceeds the limit",
-    "uploadFailed": "Upload failed, please try again",
-    "imageUploadFailed": "Image upload failed",
-    "videoUploadFailed": "Video upload failed",
-    "attachmentUploadFailed": "Attachment upload failed"
-  },
-  "mention": {
-    "noResults": "No matching users found",
-    "loading": "Searching..."
-  },
-  "embed": {
-    "placeholder": "Enter URL...",
-    "submit": "Embed",
-    "loading": "Loading...",
-    "open": "Open link",
-    "delete": "Delete"
-  },
-  "codeBlock": {
-    "copyCode": "Copy Code",
-    "copied": "Copied",
-    "searchLanguage": "Search language...",
-    "noLanguage": "No matching language"
-  },
-  "blockMenu": {
-    "delete": "Delete",
-    "duplicate": "Duplicate",
-    "moveUp": "Move Up",
-    "moveDown": "Move Down",
-    "turnInto": "Turn Into"
-  },
-  "search": {
-    "find": "Find",
-    "findPlaceholder": "Find...",
-    "replace": "Replace",
-    "replaceAll": "Replace All",
-    "replacePlaceholder": "Replace with...",
-    "noResults": "No results",
-    "caseSensitive": "Case Sensitive",
-    "previousMatch": "Previous",
-    "nextMatch": "Next",
-    "close": "Close",
-    "showReplace": "Show Replace",
-    "hideReplace": "Hide Replace"
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/en-US/zq-smart-table.json b/web/apps/web-ele/src/locales/langs/en-US/zq-smart-table.json
deleted file mode 100644
index d42204d..0000000
--- a/web/apps/web-ele/src/locales/langs/en-US/zq-smart-table.json
+++ /dev/null
@@ -1,550 +0,0 @@
-{
-  "common": {
-    "confirm": "Confirm",
-    "cancel": "Cancel",
-    "delete": "Delete",
-    "edit": "Edit",
-    "save": "Save",
-    "add": "Add",
-    "search": "Search",
-    "reset": "Reset",
-    "newLine": "new line",
-    "loading": "Loading...",
-    "noData": "No data",
-    "more": "More",
-    "close": "Close",
-    "rename": "Rename",
-    "duplicate": "Duplicate",
-    "export": "Export",
-    "import": "Import",
-    "deleteSuccess": "Deleted successfully",
-    "deleteFailed": "Delete failed"
-  },
-  "app": {
-    "title": "ZQ Workspace",
-    "description": "Tables & Documents collaboration platform"
-  },
-  "theme": {
-    "light": "Light Mode",
-    "dark": "Dark Mode",
-    "system": "Follow System"
-  },
-  "language": {
-    "zhCN": "简体中文",
-    "zhTW": "繁體中文",
-    "en": "English"
-  },
-  "sidebar": {
-    "allItems": "All Items",
-    "allTables": "All Tables",
-    "newTable": "New Table",
-    "newDocument": "New Document",
-    "newDocumentTitle": "New Document",
-    "dashboard": "Dashboard",
-    "deleteTable": "Delete",
-    "deleteTableConfirm": "Are you sure you want to delete \"{name}\"? This action cannot be undone.",
-    "renameTable": "Rename",
-    "newTableTitle": "New Table",
-    "searchPlaceholder": "Search items...",
-    "tables": "Tables",
-    "documents": "Documents",
-    "collapse": "Collapse sidebar",
-    "expand": "Expand sidebar",
-    "noResults": "No matching items",
-    "emptyTables": "No tables yet",
-    "emptyDocuments": "No documents yet",
-    "newSubPage": "New Sub Page",
-    "moveToRoot": "Move to Root"
-  },
-  "document": {
-    "placeholder": "Type / to open command menu...",
-    "untitled": "Untitled Document",
-    "titlePlaceholder": "Enter title",
-    "autoSaved": "Auto-saved",
-    "saving": "Saving...",
-    "modifiedToday": "Modified today",
-    "modifiedYesterday": "Modified yesterday",
-    "modified": " modified",
-    "unknownUser": "Unknown User",
-    "toc": "Table of Contents",
-    "export": "Export",
-    "exporting": "Exporting, please wait...",
-    "exportMarkdown": "Export Markdown",
-    "exportPdf": "Export PDF",
-    "exportWord": "Export Word",
-    "exportSuccess": "Export successful",
-    "exportFailed": "Export failed",
-    "moreActions": "More actions"
-  },
-  "table": {
-    "addRecord": "Add Record",
-    "addField": "Add Field",
-    "deleteRecord": "Delete Record",
-    "deleteField": "Delete Field",
-    "fieldName": "Field Name",
-    "fieldType": "Field Type",
-    "rowCount": "{count} records",
-    "selectedCount": "{count} selected",
-    "emptyTable": "Table is empty. Click to add the first record.",
-    "configField": "Configure Field",
-    "hideField": "Hide Field",
-    "sortAsc": "Sort Ascending",
-    "sortDesc": "Sort Descending",
-    "insertLeft": "Insert Left",
-    "insertRight": "Insert Right",
-    "expandRecord": "Expand Record",
-    "recordDetail": "Record Detail",
-    "batchDelete": "Batch Delete",
-    "selectAll": "Select All",
-    "noTitle": "(Untitled)",
-    "renameField": "Rename Field",
-    "duplicateField": "Duplicate Field",
-    "editField": "Edit Field",
-    "filterByField": "Filter by This Field",
-    "clearSort": "Clear Sort",
-    "fieldDescription": "Field Description",
-    "fieldOptions": "Options",
-    "maxRating": "Max Rating",
-    "numberFormat": "Number Format",
-    "numberFormatNumber": "Number",
-    "numberFormatCurrency": "Currency (¥)",
-    "numberFormatPercent": "Percent (%)",
-    "numberFormatYuan": "Yuan",
-    "precision": "Decimal Places",
-    "includeTime": "Include Time",
-    "currencySymbol": "Currency Symbol",
-    "formulaExpression": "Formula Expression",
-    "formulaResultType": "Result Type",
-    "fieldGroupBasic": "Basic Fields",
-    "fieldGroupAdvanced": "Advanced Fields",
-    "fieldGroupSystem": "System Fields",
-    "copyRecord": "Copy Record",
-    "insertAbove": "Insert Above",
-    "insertBelow": "Insert Below",
-    "deleteRecordConfirm": "Are you sure to delete this record?",
-    "copiedToClipboard": "Copied to clipboard",
-    "frozenField": "Freeze Up to This Field",
-    "unfreezeField": "Unfreeze",
-    "multipleSelect": "Allow Multiple",
-    "regionLevel": "Region Level",
-    "regionProvince": "Province",
-    "regionCity": "Province/City",
-    "regionDistrict": "Province/City/District",
-    "maxImageCount": "Max Image Count",
-    "currencyCNY": "¥ CNY",
-    "currencyUSD": "$ USD",
-    "currencyEUR": "€ EUR",
-    "currencyGBP": "£ GBP",
-    "currencyKRW": "₩ KRW",
-    "formulaPlaceholder": "e.g. {field1} + {field2}",
-    "keyboardShortcuts": "Keyboard Shortcuts",
-    "paste": "Paste",
-    "redo": "Redo",
-    "clearCell": "Clear Cell",
-    "editCell": "Edit Cell",
-    "cancelEdit": "Cancel Edit",
-    "navigate": "Navigate Cells",
-    "nextCell": "Next / Previous Cell",
-    "clearFilter": "Clear Filter for This Field"
-  },
-  "field": {
-    "text": "Text",
-    "number": "Number",
-    "singleSelect": "Single Select",
-    "multiSelect": "Multi Select",
-    "date": "Date",
-    "checkbox": "Checkbox",
-    "person": "Person",
-    "attachment": "Attachment",
-    "url": "URL",
-    "email": "Email",
-    "phone": "Phone",
-    "rating": "Rating",
-    "progress": "Progress",
-    "currency": "Currency",
-    "autoNumber": "Auto Number",
-    "location": "Location",
-    "createdTime": "Created Time",
-    "modifiedTime": "Modified Time",
-    "createdBy": "Created By",
-    "modifiedBy": "Modified By",
-    "formula": "Formula",
-    "richText": "Rich Text",
-    "user": "User",
-    "department": "Department",
-    "region": "Region",
-    "image": "Image",
-    "link": "Link",
-    "lookup": "Lookup",
-    "rollup": "Rollup"
-  },
-  "view": {
-    "grid": "Grid View",
-    "kanban": "Kanban View",
-    "gallery": "Gallery View",
-    "form": "Form View",
-    "addView": "Add View",
-    "deleteView": "Delete View",
-    "renameView": "Rename View",
-    "duplicateView": "Duplicate View",
-    "deleteViewConfirm": "Are you sure to delete view \"{name}\"?",
-    "calendar": "Calendar View",
-    "gantt": "Gantt View"
-  },
-  "toolbar": {
-    "filter": "Filter",
-    "sort": "Sort",
-    "group": "Group",
-    "hideFields": "Hide Fields",
-    "rowHeight": "Row Height",
-    "rowHeightShort": "Short",
-    "rowHeightMedium": "Medium",
-    "rowHeightTall": "Tall",
-    "rowHeightExtraTall": "Extra Tall",
-    "fieldVisibility": "Field Visibility",
-    "showAll": "Show All",
-    "hideAll": "Hide All",
-    "search": "Search",
-    "addFilter": "Add Filter",
-    "addSort": "Add Sort",
-    "addGroup": "Add Group",
-    "fields": "fields",
-    "undo": "Undo",
-    "copy": "Copy",
-    "zebra": "Zebra",
-    "export": "Export",
-    "exportCSV": "Export CSV",
-    "exportFailed": "Export failed",
-    "import": "Import",
-    "importCSV": "Import CSV",
-    "importSuccess": "Import succeeded",
-    "importFailed": "Import failed",
-    "conditionalFormat": "Conditional Format",
-    "noConditionalFormats": "No conditional format rules",
-    "addRule": "Add Rule",
-    "rule": "Rule",
-    "applyToRow": "Entire Row",
-    "bgColor": "Background",
-    "textColor": "Text Color",
-    "preview": "Preview",
-    "addRecord": "Add Record",
-    "resetData": "Reset Data",
-    "resetDataConfirm": "Are you sure you want to reset all data? This action cannot be undone.",
-    "confirmReset": "Confirm Reset",
-    "resetSampleData": "Reset Sample Data",
-    "exportExcel": "Export Excel",
-    "copiedRowCol": "Copied {rows} rows × {cols} columns",
-    "pastedRowCol": "Pasted {rows} rows × {cols} columns",
-    "collapseAll": "Collapse All",
-    "expandAll": "Expand All"
-  },
-  "filter": {
-    "equals": "Equals",
-    "notEquals": "Not Equals",
-    "contains": "Contains",
-    "notContains": "Not Contains",
-    "isEmpty": "Is Empty",
-    "isNotEmpty": "Is Not Empty",
-    "greaterThan": "Greater Than",
-    "lessThan": "Less Than",
-    "where": "Where",
-    "and": "And",
-    "or": "Or",
-    "noFilters": "No filters yet"
-  },
-  "kanban": {
-    "uncategorized": "Uncategorized",
-    "addCard": "Add Card",
-    "noGroupField": "Please select a group field",
-    "groupBy": "Group By",
-    "cardFields": "Card Fields",
-    "showFields": "Show Fields"
-  },
-  "gantt": {
-    "startField": "Start Date",
-    "endField": "End Date",
-    "taskName": "Task Name",
-    "noDateField": "Please add a date field first",
-    "zoomDay": "Day",
-    "zoomWeek": "Week",
-    "zoomMonth": "Month",
-    "durationDays": "{days} days",
-    "noDateCount": "{count} without date",
-    "todayMark": "Today",
-    "milestoneField": "Milestone Field",
-    "autoDetect": "Auto Detect",
-    "milestone": "Milestone",
-    "toggleDependencies": "Toggle Dependencies",
-    "toggleCriticalPath": "Toggle Critical Path",
-    "depType": "Dependency Type",
-    "depDesc_FS": "Finish-to-Start",
-    "depDesc_FF": "Finish-to-Finish",
-    "depDesc_SS": "Start-to-Start",
-    "depDesc_SF": "Start-to-Finish",
-    "deleteDep": "Delete Dependency",
-    "dragToMove": "Drag to move task",
-    "dragToResize": "Drag to resize duration"
-  },
-  "calendar": {
-    "today": "Today",
-    "dateField": "Start Date",
-    "endDateField": "End Date",
-    "noDateField": "Please add a date field first",
-    "none": "None",
-    "more": "more",
-    "allDay": "All Day",
-    "modeMonth": "Month",
-    "modeWeek": "Week",
-    "modeDay": "Day",
-    "weekSun": "Sun",
-    "weekMon": "Mon",
-    "weekTue": "Tue",
-    "weekWed": "Wed",
-    "weekThu": "Thu",
-    "weekFri": "Fri",
-    "weekSat": "Sat"
-  },
-  "gallery": {
-    "title": "Gallery View",
-    "coverField": "Cover Field",
-    "noCover": "No Cover",
-    "yes": "Yes",
-    "no": "No"
-  },
-  "form": {
-    "title": "Form View",
-    "formTitle": "Data Collection Form",
-    "formDescription": "Please fill in the following information",
-    "submit": "Submit",
-    "submitSuccess": "Submitted successfully!",
-    "required": "Required",
-    "fieldRequired": "{name} is required",
-    "invalidEmail": "Please enter a valid email address",
-    "invalidPhone": "Please enter a valid phone number",
-    "invalidUrl": "Please enter a valid URL",
-    "checkFormErrors": "Please check the form for errors"
-  },
-  "permission": {
-    "title": "Permissions",
-    "tabCollaborators": "Collaborators",
-    "tabFieldPerm": "Field Permissions",
-    "tabRowPerm": "Row Permissions",
-    "searchUser": "Search users",
-    "invite": "Invite",
-    "addSuccess": "Added successfully",
-    "addFailed": "Failed to add",
-    "updateFailed": "Failed to update",
-    "removeConfirm": "Are you sure you want to remove {name}?",
-    "removeCollaborator": "Remove Collaborator",
-    "removed": "Removed",
-    "roleOwner": "Owner",
-    "roleManager": "Manager",
-    "roleEditor": "Editor",
-    "roleViewer": "Viewer",
-    "roleCustom": "Custom",
-    "accessWrite": "Editable",
-    "accessRead": "Visible",
-    "accessHidden": "Hidden",
-    "fieldPermSaved": "Field permissions saved",
-    "saveFailed": "Failed to save",
-    "rowPermUpdated": "Row permissions updated",
-    "fieldPermTip": "Click field permission labels to cycle access levels (Editable / Visible / Hidden). Click \"Save\" to apply.",
-    "rowPermTip": "Row permissions control which records each role can view and edit.",
-    "viewRecords": "Can view records:",
-    "editRecords": "Can edit records:",
-    "allRecords": "All records",
-    "creatorOnly": "Own records only",
-    "noCollaborators": "No collaborators yet",
-    "noFieldPerm": "Not configured. Click \"Save\" to initialize.",
-    "subjectUser": "User",
-    "subjectDept": "Department",
-    "subjectRole": "Role",
-    "documentScopeHint": "Documents have no column or row dimension. Access is controlled by collaborator roles and capabilities (e.g. edit content, export). Field and row permissions do not apply."
-  },
-  "cellRenderer": {
-    "today": "Today",
-    "yesterday": "Yesterday",
-    "tomorrow": "Tomorrow",
-    "yuan": "Yuan"
-  },
-  "link": {
-    "targetTable": "Target Table",
-    "selectTable": "Select target table",
-    "linkField": "Link Field",
-    "selectLinkField": "Select link field",
-    "lookupField": "Lookup Field",
-    "rollupField": "Rollup Field",
-    "selectField": "Select field",
-    "aggregation": "Aggregation",
-    "aggCount": "Count (COUNT)",
-    "aggCounta": "Non-empty Count (COUNTA)",
-    "aggSum": "Sum (SUM)",
-    "aggAvg": "Average (AVG)",
-    "aggMin": "Minimum (MIN)",
-    "aggMax": "Maximum (MAX)",
-    "searchPlaceholder": "Search records..."
-  },
-  "dashboard": {
-    "title": "Dashboard",
-    "addChart": "Add Chart",
-    "barChart": "Bar Chart",
-    "lineChart": "Line Chart",
-    "pieChart": "Pie Chart",
-    "statNumber": "Stat Number",
-    "totalRecords": "Total Records",
-    "sum": "Sum",
-    "average": "Average",
-    "max": "Max",
-    "min": "Min",
-    "empty": "Empty",
-    "filled": "Filled",
-    "percentEmpty": "% Empty",
-    "percentFilled": "% Filled",
-    "completed": "Completed",
-    "completionRate": "Completion Rate",
-    "statusDist": "Status Distribution",
-    "priorityDist": "Priority Distribution",
-    "progressDist": "Progress Distribution",
-    "distribution": "Distribution",
-    "noSelectField": "Add a single-select field first",
-    "noNumberField": "Add a number / progress / rating field first",
-    "noCheckbox": "Add a checkbox field first"
-  },
-  "summary": {
-    "sum": "Sum",
-    "avg": "Average",
-    "min": "Min",
-    "max": "Max",
-    "count": "Count",
-    "counta": "Count Non-empty",
-    "countEmpty": "Count Empty",
-    "percentEmpty": "% Empty",
-    "percentFilled": "% Filled",
-    "clickToAdd": "Summary",
-    "none": "None",
-    "groupSubtotal": "Subtotal"
-  },
-  "formula": {
-    "availableFields": "Available Fields (click to insert)",
-    "placeholder": "Enter formula, e.g. IF({Status}=\"Done\", {Amount} * 1.1, {Amount})",
-    "functionReference": "Function Reference",
-    "resultText": "Text",
-    "resultNumber": "Number",
-    "resultDate": "Date",
-    "resultBoolean": "Boolean"
-  },
-  "validation": {
-    "title": "Validation",
-    "min": "Min Value",
-    "max": "Max Value",
-    "minLength": "Min Length",
-    "maxLength": "Max Length",
-    "pattern": "Regex Pattern",
-    "patternPlaceholder": "e.g. ^[A-Z]{2}\\d{4}$",
-    "unique": "Must be unique",
-    "customMessage": "Custom Error Message",
-    "customMessagePlaceholder": "Message shown on validation failure",
-    "noLimit": "No limit",
-    "required": "\"{name}\" is required",
-    "minError": "\"{name}\" must be at least {min}",
-    "maxError": "\"{name}\" must be at most {max}",
-    "minLengthError": "\"{name}\" must be at least {min} characters",
-    "maxLengthError": "\"{name}\" must be at most {max} characters",
-    "patternError": "\"{name}\" format is invalid",
-    "uniqueError": "\"{name}\" value already exists"
-  },
-  "comment": {
-    "title": "Comments",
-    "placeholder": "Write a comment, @ to mention...",
-    "send": "Send",
-    "reply": "Reply",
-    "edit": "Edit",
-    "delete": "Delete",
-    "deleteConfirm": "Delete this comment?",
-    "noComments": "No comments yet",
-    "mentionHint": "Type @ to search users",
-    "justNow": "Just now",
-    "minutesAgo": "{n} min ago",
-    "hoursAgo": "{n} hr ago",
-    "daysAgo": "{n} days ago",
-    "editComment": "Edit comment",
-    "cancelEdit": "Cancel",
-    "saveEdit": "Save",
-    "replyTo": "Reply to {name}",
-    "commentCount": "{count} comments",
-    "postFailed": "Failed to post comment",
-    "updateFailed": "Failed to update comment",
-    "deleteFailed": "Failed to delete comment"
-  },
-  "mention": {
-    "noResults": "No matching users found",
-    "navigate": "navigate",
-    "select": "select",
-    "close": "close"
-  },
-  "trash": {
-    "title": "Trash",
-    "empty": "Trash is empty",
-    "restore": "Restore",
-    "permanentDelete": "Permanently Delete",
-    "permanentDeleteConfirm": "Are you sure you want to permanently delete this record? This action cannot be undone.",
-    "emptyTrash": "Empty Trash",
-    "emptyTrashConfirm": "Are you sure you want to empty the trash? This action cannot be undone.",
-    "restoreSuccess": "Restored successfully",
-    "deleteSuccess": "Permanently deleted",
-    "emptySuccess": "Trash emptied",
-    "deletedAt": "Deleted at",
-    "recordCount": "{count} records",
-    "batchRestore": "Batch Restore",
-    "selectedCount": "{count} selected"
-  },
-  "version": {
-    "title": "Version History",
-    "empty": "No version records",
-    "createSnapshot": "Save Snapshot",
-    "manualSnapshot": "Manual save",
-    "createSuccess": "Version snapshot saved",
-    "createFailed": "Failed to save version snapshot",
-    "preview": "Preview Version",
-    "restore": "Restore This Version",
-    "restoreConfirm": "Restore Version",
-    "restoreConfirmMsg": "Are you sure you want to restore to version v{version}? Current content will be saved as a new version.",
-    "restoreSuccess": "Version restored",
-    "restoreFailed": "Failed to restore version",
-    "deleteConfirm": "Delete Version",
-    "deleteConfirmMsg": "Are you sure you want to delete this version? This action cannot be undone.",
-    "loadMore": "Load More"
-  },
-  "template": {
-    "selectTitle": "Select Document Template",
-    "blankDocument": "Blank Document",
-    "fromTemplate": "From Template",
-    "searchPlaceholder": "Search templates...",
-    "allCategories": "All",
-    "system": "System",
-    "empty": "No templates",
-    "loadFailed": "Failed to load template",
-    "usedCount": "Used {count} times",
-    "saveAsTemplate": "Save as Template",
-    "templateSuffix": "Template",
-    "name": "Template Name",
-    "namePlaceholder": "Enter template name",
-    "nameRequired": "Please enter a template name",
-    "description": "Description",
-    "descriptionPlaceholder": "Enter template description (optional)",
-    "categoryLabel": "Category",
-    "categoryPlaceholder": "Enter category",
-    "save": "Save",
-    "saveSuccess": "Template saved successfully",
-    "saveFailed": "Failed to save template",
-    "creating": "Creating, please wait...",
-    "category": {
-      "custom": "Custom",
-      "system": "System Templates",
-      "meeting": "Meeting",
-      "report": "Report",
-      "plan": "Plan",
-      "note": "Note"
-    }
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/contract-design.json b/web/apps/web-ele/src/locales/langs/zh-CN/contract-design.json
deleted file mode 100644
index 63e8d1b..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-CN/contract-design.json
+++ /dev/null
@@ -1,216 +0,0 @@
-{
-  "attributePanel": "属性配置",
-  "elementPanel": "元素",
-  "templatePanel": "模板",
-  "variablePanel": "变量",
-  "selectElement": "请选择一个元素",
-  "titleContent": "标题内容",
-  "titleLevel": "标题级别",
-  "alignment": "对齐方式",
-  "fontSize": "字体大小",
-  "fontWeight": "字体粗细",
-  "normal": "正常",
-  "bold": "粗体",
-  "paragraphContent": "段落内容",
-  "lineHeight": "行高",
-  "indent": "首行缩进(字符)",
-  "selectVariable": "选择变量",
-  "placeholderVariable": "请选择变量",
-  "variableInfo": "变量信息",
-  "required": "必填",
-  "optional": "选填",
-  "placeholderText": "占位符文本",
-  "notFilledText": "未填写时显示的文本",
-  "minWidth": "最小宽度",
-  "showUnderline": "显示下划线",
-  "usageInstructions": "使用说明",
-  "variableUsageDesc": "选择变量后，该变量会自动添加到模板的变量列表中。签署时用户需要填写这些变量的值。",
-  "showBorder": "显示边框",
-  "headerBgColor": "表头背景色",
-  "tableColumns": "表格列",
-  "column": "列",
-  "delete": "删除",
-  "columnTitle": "列标题",
-  "width": "宽度",
-  "left": "左",
-  "center": "中",
-  "right": "右",
-  "justify": "两端",
-  "addColumn": "添加列",
-  "addRow": "添加行",
-  "signatory": "签署方",
-  "labelText": "标签文字",
-  "alignLeft": "靠左",
-  "alignCenter": "居中",
-  "alignRight": "靠右",
-  "height": "高度",
-  "showLabel": "显示标签",
-  "showDate": "显示日期",
-  "mustSign": "必须签署",
-  "label": "标签",
-  "dateFormat": "日期格式",
-  "lineStyle": "线条样式",
-  "solid": "实线",
-  "dashed": "虚线",
-  "dotted": "点线",
-  "lineColor": "线条颜色",
-  "marginVertical": "上下边距",
-  "imageUrl": "图片地址",
-  "enterImageUrl": "请输入图片URL",
-  "minHeight": "最小高度",
-  "padding": "内边距",
-  "borderColor": "边框颜色",
-  "backgroundColor": "背景色",
-  "editTip": "编辑提示",
-  "richTextEditDesc": "双击富文本元素可直接在画布中编辑内容，支持：",
-  "boldItalicUnderline": "加粗、斜体、下划线",
-  "headingListQuote": "标题、列表、引用",
-  "insertContent": "插入链接、图片、表格",
-  "templateName": "模板名称",
-  "templateCode": "模板编码",
-  "templateCategory": "模板分类",
-  "templateDescription": "模板描述",
-  "pageSettings": "页面设置",
-  "pageSize": "页面尺寸",
-  "pageMargin": "页边距 (px)",
-  "top": "上",
-  "bottom": "下",
-  "variableDescription": "变量说明",
-  "variableDescText": "在画布中添加\"变量占位符\"并选择变量后，变量会自动添加到此列表。签署时用户需要填写这些变量的值。",
-  "usedVariables": "已使用的变量",
-  "remove": "移除",
-  "availableVariables": "可用变量列表",
-  "partyA": "甲方",
-  "partyB": "乙方",
-  "partyC": "丙方",
-  "witness": "见证方",
-  "typeTitle": "标题",
-  "typeParagraph": "段落",
-  "typeRichText": "富文本",
-  "typeVariable": "变量",
-  "typeTable": "表格",
-  "typeSignatureZone": "签名区",
-  "typeSealZone": "盖章区",
-  "typeDateZone": "日期区",
-  "typeDivider": "分割线",
-  "typePageBreak": "分页符",
-  "typeImage": "图片",
-  "text": "文本",
-  "number": "数字",
-  "date": "日期",
-  "money": "金额",
-  "select": "选择",
-  "noVariablesText": "暂无变量，请在画布中添加变量占位符",
-  "clickToFill": "点击填写",
-  "signature": "签名",
-  "signed": "已签署",
-  "clickToSign": "点击签名",
-  "sealArea": "盖章处",
-  "sealed": "已盖章",
-  "clickToSeal": "点击盖章",
-  "noContent": "暂无内容",
-  "dateLabel": "日期",
-  "fillVariable": "填写变量",
-  "enterVariableValue": "请输入变量值",
-  "cancel": "取消",
-  "confirm": "确定",
-  "signHere": "请在此处签名",
-  "undo": "撤销",
-  "clear": "清空",
-  "contractTemplate": "合同模板",
-  "elements": "个元素",
-  "redo": "重做",
-  "preview": "预览",
-  "viewJSON": "查看JSON",
-  "import": "导入",
-  "export": "导出",
-  "save": "保存",
-  "dragOrClickToAdd": "拖拽或点击左侧元素添加到画布",
-  "releaseToAdd": "释放鼠标添加元素",
-  "pageBreakLabel": "第 {page1} 页结束 / 第 {page2} 页开始",
-  "margin": "边距",
-  "uploadImageFileOnly": "请上传图片文件",
-  "imageSizeExceeded": "图片大小不能超过 2MB",
-  "pleaseSignFirst": "请先签名",
-  "pleaseUploadSignatureImage": "请先上传签名图片",
-  "drawSignature": "手写签名",
-  "uploadSignature": "上传签名",
-  "signaturePreview": "签名预览",
-  "clickOrDragToUpload": "点击或拖拽上传签名图片",
-  "supportedFormatsAndSize": "支持 JPG、PNG 格式，最大 2MB",
-  "confirmSignature": "确认签名",
-  "contract": "合同",
-  "exportSuccess": "PDF 导出成功",
-  "contractPreview": "合同预览",
-  "totalPages": "共 {count} 页",
-  "pageLabel": "第 {current} / {total} 页",
-  "close": "关闭",
-  "exportPdf": "导出PDF",
-  "exporting": "导出中...",
-  "signer": "签署方",
-  "pleaseCompleteMandatoryFields": "请填写必填项：{fields}",
-  "signedSuccessfully": "签署成功",
-  "contractSigning": "合同签署",
-  "fillInformation": "填写信息",
-  "previewContract": "预览合同",
-  "signatureConfirmation": "签名确认",
-  "pleaseEnter": "请输入{field}",
-  "pleaseSelect": "请选择{field}",
-  "pleaseSignInArea": "请在下方区域签名",
-  "previousStep": "上一步",
-  "nextStep": "下一步",
-  "confirmSigning": "确认签署",
-  "signingTime": "签署时间",
-  "textElements": "文本元素",
-  "variableElements": "变量元素",
-  "signatureElements": "签署元素",
-  "layoutElements": "布局元素",
-  "searchElements": "搜索元素...",
-  "dragOrClickAddElements": "拖拽或点击添加元素",
-  "sampleTemplates": "示例模板",
-  "selectTemplateToStart": "选择模板快速开始，点击后将替换当前画布内容",
-  "commonContracts": "常用合同",
-  "hrContracts": "人事合同",
-  "businessContracts": "商务合同",
-  "templateLoaded": "已加载模板：{name}",
-  "contractElements": "合同元素",
-  "partyAInfo": "甲方信息",
-  "partyBInfo": "乙方信息",
-  "contractInfo": "合同信息",
-  "otherInfo": "其他信息",
-  "contractTitle": "合同标题",
-  "paragraphText": "段落文本",
-  "richText": "富文本",
-  "variablePlaceholder": "变量占位符",
-  "table": "表格",
-  "signatureZone": "签名区",
-  "sealZone": "盖章区",
-  "dateZone": "日期区",
-  "divider": "分割线",
-  "pageBreak": "分页符",
-  "image": "图片",
-  "pleaseAddContractElements": "请先添加合同元素",
-  "saveSuccess": "保存成功",
-  "clearCanvasConfirm": "确定要清空画布吗？此操作不可撤销。",
-  "tip": "提示",
-  "confirm": "确定",
-  "cancel": "取消",
-  "cleared": "已清空",
-  "exportSuccess": "导出成功",
-  "pleaseEnterConfig": "请输入配置内容",
-  "importSuccess": "导入成功",
-  "configFormatError": "配置格式错误",
-  "copiedToClipboard": "已复制到剪贴板",
-  "copyFailed": "复制失败",
-  "undone": "已撤销",
-  "redone": "已重做",
-  "copied": "已复制",
-  "pasted": "已粘贴",
-  "deleted": "已删除",
-  "jsonPreview": "JSON预览",
-  "copyCode": "复制代码",
-  "close": "关闭",
-  "importConfig": "导入配置",
-  "pasteJsonConfig": "请粘贴 JSON 配置内容...",
-  "import": "导入"
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/draw.json b/web/apps/web-ele/src/locales/langs/zh-CN/draw.json
deleted file mode 100644
index 4348217..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-CN/draw.json
+++ /dev/null
@@ -1,164 +0,0 @@
-{
-  "tool": {
-    "selection": "选择",
-    "hand": "手形工具",
-    "rectangle": "矩形",
-    "ellipse": "椭圆",
-    "diamond": "菱形",
-    "line": "直线",
-    "arrow": "箭头",
-    "freedraw": "自由绘制",
-    "text": "文本",
-    "image": "图片",
-    "eraser": "橡皮擦",
-    "frame": "框架",
-    "laser": "激光笔"
-  },
-  "action": {
-    "undo": "撤销",
-    "redo": "重做",
-    "copy": "复制",
-    "cut": "剪切",
-    "paste": "粘贴",
-    "duplicate": "复制元素",
-    "delete": "删除",
-    "selectAll": "全选",
-    "zoomIn": "放大",
-    "zoomOut": "缩小",
-    "zoomToFit": "适应画布",
-    "zoomToFitSelection": "适应选中元素",
-    "resetZoom": "重置缩放",
-    "exportPng": "导出为 PNG",
-    "exportSvg": "导出为 SVG",
-    "exportJson": "导出为 JSON",
-    "save": "保存",
-    "toggleGrid": "切换网格",
-    "toggleDarkMode": "切换深色模式",
-    "toggleSnap": "切换对齐吸附",
-    "toggleStats": "切换统计面板",
-    "toggleZenMode": "切换专注模式"
-  },
-  "property": {
-    "strokeColor": "描边颜色",
-    "backgroundColor": "背景颜色",
-    "fillStyle": "填充样式",
-    "strokeWidth": "描边宽度",
-    "strokeStyle": "描边样式",
-    "roughness": "粗糙度",
-    "opacity": "透明度",
-    "fontSize": "字体大小",
-    "fontFamily": "字体",
-    "textAlign": "文本对齐",
-    "verticalAlign": "垂直对齐",
-    "arrowheadStart": "起点箭头",
-    "arrowheadEnd": "终点箭头",
-    "arrowType": "箭头类型",
-    "arrowTypeStraight": "直线",
-    "arrowTypeRound": "曲线",
-    "arrowTypeElbow": "肘形",
-    "arrowTypeSharp": "折线",
-    "roundness": "圆角",
-    "edges": "边角",
-    "edgesSharp": "直角",
-    "edgesRound": "圆角",
-    "sloppiness": "笔触风格",
-    "link": "超链接",
-    "linkPlaceholder": "输入链接地址...",
-    "mixed": "多选时属性值不同",
-    "alignDistribute": "对齐与分布",
-    "customColor": "自定义颜色",
-    "layers": "图层",
-    "actions": "操作"
-  },
-  "fillStyle": {
-    "hachure": "线条填充",
-    "crossHatch": "交叉填充",
-    "solid": "实心填充",
-    "zigzag": "锯齿填充",
-    "dots": "点状填充",
-    "dashed": "虚线填充",
-    "zigzagLine": "锯齿线填充"
-  },
-  "strokeStyle": {
-    "solid": "实线",
-    "dashed": "虚线",
-    "dotted": "点线"
-  },
-  "arrowhead": {
-    "none": "无",
-    "arrow": "箭头",
-    "bar": "竖线",
-    "circle": "圆点",
-    "triangle": "三角形",
-    "diamond": "菱形"
-  },
-  "menu": {
-    "copy": "复制",
-    "cut": "剪切",
-    "paste": "粘贴",
-    "duplicate": "创建副本",
-    "delete": "删除",
-    "selectAll": "全选",
-    "layer": "层级",
-    "bringToFront": "移到最前",
-    "sendToBack": "移到最后",
-    "bringForward": "上移一层",
-    "sendBackward": "下移一层",
-    "flip": "翻转",
-    "flipH": "水平翻转",
-    "flipV": "垂直翻转",
-    "align": "对齐",
-    "alignLeft": "左对齐",
-    "alignCenter": "水平居中",
-    "alignRight": "右对齐",
-    "alignTop": "顶部对齐",
-    "alignMiddle": "垂直居中",
-    "alignBottom": "底部对齐",
-    "distributeH": "水平等距分布",
-    "distributeV": "垂直等距分布",
-    "group": "编组",
-    "ungroup": "取消编组",
-    "lock": "锁定",
-    "unlock": "解锁",
-    "addLink": "添加超链接",
-    "editLink": "编辑超链接",
-    "removeLink": "移除超链接",
-    "openLink": "打开链接",
-    "toggleGrid": "切换网格",
-    "copyStyle": "复制样式",
-    "pasteStyle": "粘贴样式",
-    "openFile": "打开",
-    "saveTo": "保存到...",
-    "export": "导出",
-    "exportPng": "导出为 PNG",
-    "exportSvg": "导出为 SVG",
-    "exportJson": "导出为 JSON",
-    "exportCopyPng": "复制为 PNG",
-    "exportCopySvg": "复制为 SVG"
-  },
-  "label": {
-    "thin": "细",
-    "bold": "粗",
-    "extraBold": "特粗",
-    "architect": "建筑师",
-    "artist": "艺术家",
-    "cartoonist": "漫画家"
-  },
-  "font": {
-    "handDrawn": "手绘",
-    "normal": "常规",
-    "code": "代码",
-    "assistant": "辅助"
-  },
-  "verticalAlign": {
-    "top": "顶部",
-    "middle": "居中",
-    "bottom": "底部"
-  },
-  "stats": {
-    "title": "统计信息",
-    "elements": "元素数量",
-    "sceneSize": "画布尺寸",
-    "multiSelected": "已选中 {count} 个元素"
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/whiteboard.json b/web/apps/web-ele/src/locales/langs/zh-CN/whiteboard.json
deleted file mode 100644
index b562335..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-CN/whiteboard.json
+++ /dev/null
@@ -1,124 +0,0 @@
-{
-  "tool": {
-    "select": "选择",
-    "hand": "平移",
-    "pen": "画笔",
-    "highlighter": "荧光笔",
-    "eraser": "橡皮擦",
-    "shape": "形状",
-    "line": "直线",
-    "arrow": "箭头",
-    "connector": "连接线",
-    "text": "文本",
-    "stickyNote": "便签",
-    "image": "图片",
-    "frame": "画框",
-    "laser": "激光笔"
-  },
-  "shape": {
-    "rect": "矩形",
-    "roundedRect": "圆角矩形",
-    "circle": "圆形",
-    "ellipse": "椭圆",
-    "diamond": "菱形",
-    "triangle": "三角形",
-    "star": "五角星",
-    "hexagon": "六边形",
-    "pentagon": "五边形",
-    "octagon": "八边形",
-    "parallelogram": "平行四边形",
-    "cylinder": "椭圆",
-    "arrowRight": "右箭头",
-    "arrowUp": "上箭头",
-    "heart": "爱心",
-    "cloud": "云朵",
-    "chatBubble": "对话框"
-  },
-  "action": {
-    "undo": "撤销",
-    "redo": "重做",
-    "zoomIn": "放大",
-    "zoomOut": "缩小",
-    "zoomToFit": "适应画布",
-    "resetZoom": "重置缩放",
-    "background": "背景",
-    "exportPng": "导出 PNG",
-    "exportSvg": "导出 SVG",
-    "exportJson": "导出 JSON",
-    "save": "保存",
-    "menu": "菜单"
-  },
-  "background": {
-    "none": "无背景",
-    "dots": "点阵",
-    "grid": "网格",
-    "lines": "横线"
-  },
-  "property": {
-    "title": "属性",
-    "fill": "填充",
-    "stroke": "描边",
-    "opacity": "透明度",
-    "fontSize": "字号",
-    "multiHint": "多选时可统一调整透明度；填充与描边请单选编辑。"
-  },
-  "menu": {
-    "copy": "复制",
-    "cut": "剪切",
-    "paste": "粘贴",
-    "duplicate": "创建副本",
-    "delete": "删除",
-    "selectAll": "全选",
-    "bringToFront": "移到最前",
-    "sendToBack": "移到最后",
-    "bringForward": "上移一层",
-    "sendBackward": "下移一层",
-    "layer": "层级",
-    "copyStyle": "复制样式",
-    "pasteStyle": "粘贴样式",
-    "lock": "锁定",
-    "unlock": "解锁",
-    "group": "编组",
-    "ungroup": "取消编组",
-    "copyAsImage": "复制为图片",
-    "copiedToClipboard": "已复制到剪贴板",
-    "copyFailed": "复制失败，请检查浏览器权限",
-    "flipH": "水平翻转",
-    "flipV": "垂直翻转",
-    "rotate": "旋转",
-    "rotateCW": "顺时针旋转 90°",
-    "rotateCCW": "逆时针旋转 90°",
-    "rotate180": "旋转 180°",
-    "align": "对齐",
-    "alignLeft": "左对齐",
-    "alignCenter": "水平居中",
-    "alignRight": "右对齐",
-    "alignTop": "顶部对齐",
-    "alignMiddle": "垂直居中",
-    "alignBottom": "底部对齐",
-    "distributeH": "水平等距分布",
-    "distributeV": "垂直等距分布"
-  },
-  "toolbar": {
-    "changeShape": "更改图形",
-    "borderStyle": "边框样式",
-    "textStyle": "文本样式",
-    "textColor": "文字颜色",
-    "bgColor": "背景颜色"
-  },
-  "connector": {
-    "startStyle": "起点样式",
-    "endStyle": "终点样式",
-    "swapDirection": "箭头方向",
-    "lineStyle": "连线样式",
-    "endNone": "无",
-    "endArrow": "箭头",
-    "orthogonal": "正交",
-    "straight": "直线",
-    "straightLine": "直线",
-    "straightArrow": "箭头",
-    "elbowConnector": "折线连接"
-  },
-  "penWidth": "画笔粗细",
-  "penColor": "画笔颜色"
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/wiki.json b/web/apps/web-ele/src/locales/langs/zh-CN/wiki.json
deleted file mode 100644
index bfc6212..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-CN/wiki.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-  "title": "文档库",
-  "description": "团队知识管理与文档协作",
-  "createSpace": "新建文档库",
-  "spaceName": "文档库名称",
-  "spaceNamePlaceholder": "请输入文档库名称",
-  "spaceDescription": "描述",
-  "spaceDescriptionPlaceholder": "简要描述文档库的用途",
-  "category": "分类",
-  "categoryDefault": "默认",
-  "categoryTech": "技术",
-  "categoryProduct": "产品",
-  "categoryDesign": "设计",
-  "categoryBusiness": "业务",
-  "categoryOther": "其他",
-  "visibility": "可见性",
-  "private": "私有",
-  "team": "团队可见",
-  "public": "公开",
-  "emptySpaces": "暂无文档库",
-  "emptySpacesHint": "创建一个文档库来组织团队知识",
-  "emptyDocuments": "暂无文档",
-  "emptyDocumentsHint": "点击上方按钮创建第一篇文档",
-  "addDocument": "新建文档",
-  "addSubPage": "新建子页面",
-  "spaceSettings": "文档库设置",
-  "deleteSpace": "删除文档库",
-  "deleteSpaceConfirm": "确定要删除文档库「{name}」吗？库内所有文档将被移至回收站。",
-  "deleteDocument": "删除文档",
-  "deleteDocumentConfirm": "确定要删除文档「{name}」吗？",
-  "documentCount": "{count} 篇文档",
-  "createdBy": "创建者",
-  "updatedAt": "更新于",
-  "untitled": "无标题文档",
-  "backToList": "返回文档库列表",
-  "rename": "重命名",
-  "searchPlaceholder": "搜索文档库...",
-  "searchDocPlaceholder": "搜索文档...",
-  "saving": "保存中...",
-  "autoSaved": "已自动保存",
-  "allSpaces": "全部文档库",
-  "mySpaces": "我的文档库",
-  "icon": "图标",
-  "cover": "封面",
-  "avatar": "头像",
-  "avatarHint": "为文档库选择一个头像",
-  "noResults": "未找到匹配结果",
-  "myDocuments": "我的文档",
-  "wikiSpaces": "知识库",
-  "emptyMyDocs": "暂无个人文档",
-  "emptyMyDocsHint": "在此创建不属于任何知识库的个人文档",
-  "newBlankDoc": "空白文档",
-  "newFromTemplate": "从模板创建",
-  "editSpace": "编辑文档库",
-  "editSpaceSuccess": "文档库已更新"
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/workflow-designer.json b/web/apps/web-ele/src/locales/langs/zh-CN/workflow-designer.json
deleted file mode 100644
index 625de55..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-CN/workflow-designer.json
+++ /dev/null
@@ -1,737 +0,0 @@
-{
-  "designer": {
-    "title": "流程设计器",
-    "flowName": "流程名称",
-    "flowNamePlaceholder": "请输入流程名称",
-    "save": "保存",
-    "preview": "预览",
-    "publish": "发布",
-    "undo": "撤销",
-    "redo": "重做",
-    "saveFirst": "请先保存流程",
-    "isDirty": "有未保存的更改",
-    "saveSuccess": "保存成功",
-    "publishSuccess": "发布成功",
-    "previewInfo": "预览功能开发中",
-    "deleteNodeConfirm": "确定要删除此节点吗？",
-    "deleteBranchConfirm": "确定要删除此条件分支吗？",
-    "tips": "提示",
-    "readonlyTip": "只读模式，不可编辑",
-    "embeddedTip": "嵌入模式",
-    "minimap": "缩略图"
-  },
-  "preview": {
-    "title": "流程预览",
-    "unnamedFlow": "未命名流程",
-    "relatedForm": "关联表单",
-    "nodeDetail": "节点详情",
-    "statistics": {
-      "approval": "个审批",
-      "copy": "个抄送",
-      "branch": "个分支"
-    },
-    "assigneeTypes": {
-      "user": "指定成员",
-      "role": "指定角色",
-      "department": "指定部门",
-      "formField": "从表单中获取",
-      "initiator": "发起人自己",
-      "manager": "直属经理",
-      "superior": "上级主管"
-    },
-    "multiApproval": {
-      "sequential": "依次审批",
-      "parallel": "会签（所有人通过）",
-      "any": "或签（一人通过即可）"
-    },
-    "multiHandle": {
-      "sequential": "依次办理",
-      "all": "全部办理",
-      "any": "任一办理"
-    },
-    "sections": {
-      "approvalSettings": "审批人设置",
-      "handleSettings": "办理人设置",
-      "copySettings": "抄送人设置",
-      "delaySettings": "延时设置",
-      "notifySettings": "通知设置",
-      "serviceSettings": "服务调用设置",
-      "subflowSettings": "子流程设置",
-      "dataUpdateSettings": "字段更新设置",
-      "formPermissions": "表单字段权限",
-      "conditionBranches": "条件分支",
-      "parallelBranches": "并行分支"
-    },
-    "labels": {
-      "approverType": "审批人类型",
-      "approvers": "审批人",
-      "handlerType": "办理人类型",
-      "handlers": "办理人",
-      "copyType": "抄送人类型",
-      "copyRecipients": "抄送人",
-      "specifiedRole": "指定角色",
-      "specifiedDept": "指定部门",
-      "superiorLevel": "上级层级",
-      "level": "第",
-      "levelSuffix": "级",
-      "superior": "主管",
-      "manager": "经理",
-      "multiApproval": "多人审批",
-      "multiHandle": "多人办理方式",
-      "timeoutSettings": "超时设置",
-      "hoursLater": "小时后",
-      "autoApprove": "自动通过",
-      "autoReject": "自动拒绝",
-      "waitDuration": "等待时长",
-      "notifyRecipient": "通知对象",
-      "notifyChannel": "通知渠道",
-      "notifyTitle": "通知标题",
-      "notSet": "未设置",
-      "serviceName": "服务名称",
-      "requestMethod": "请求方法",
-      "requestUrl": "请求地址",
-      "timeoutDuration": "超时时间",
-      "seconds": "秒",
-      "subflow": "子流程",
-      "executionMode": "执行方式",
-      "syncExecution": "同步执行",
-      "asyncExecution": "异步执行",
-      "variablePass": "变量传递",
-      "passAllVariables": "传递所有变量",
-      "passSelectedVariables": "选择传递",
-      "noVariablePass": "不传递",
-      "branchCount": "分支数量",
-      "nodeType": "节点类型",
-      "description": "说明"
-    },
-    "permissions": {
-      "editable": "可编辑",
-      "readonly": "只读",
-      "hidden": "隐藏"
-    },
-    "descriptions": {
-      "delay": "流程将在此节点暂停，等待指定时间后自动继续执行",
-      "notify": "流程到达此节点时将自动发送通知",
-      "service": "流程到达此节点时将自动调用配置的服务",
-      "subflow": "流程到达此节点时将调用子流程",
-      "data_update": "流程到达此节点时将自动更新表单字段值"
-    },
-    "conditionConfigured": "已配置{count}个条件组",
-    "conditionNotConfigured": "未配置条件",
-    "branchCountValue": "{count}个分支",
-    "parallelExecutionDesc": "所有分支同时执行，全部完成后继续",
-    "branch": "分支",
-    "startNodeDesc": "所有人可发起流程",
-    "endNodeDesc": "流程结束"
-  },
-  "nodes": {
-    "start": {
-      "name": "发起人",
-      "title": "发起人",
-      "desc": "流程发起人",
-      "placeholder": "所有人"
-    },
-    "approval": {
-      "name": "审批人",
-      "title": "审批人",
-      "desc": "添加审批人节点",
-      "placeholder": "请设置审批人",
-      "multiApproval": {
-        "sequential": "依次审批",
-        "parallel": "会签",
-        "any": "或签"
-      },
-      "summary": {
-        "department": "个部门",
-        "formField": "从表单获取",
-        "initiator": "发起人",
-        "manager": "级经理",
-        "role": "个角色",
-        "superior": "级主管",
-        "user": "位成员",
-        "prefix": "第"
-      }
-    },
-    "handle": {
-      "name": "办理人",
-      "title": "办理人",
-      "desc": "添加办理人节点",
-      "placeholder": "请设置办理人",
-      "multiHandle": {
-        "sequential": "依次办理",
-        "all": "全部办理",
-        "any": "任一办理"
-      },
-      "summary": {
-        "department": "个部门",
-        "formField": "从表单获取",
-        "initiator": "发起人",
-        "manager": "级经理",
-        "role": "个角色",
-        "superior": "级主管",
-        "user": "位成员",
-        "prefix": "第"
-      }
-    },
-    "copy": {
-      "name": "抄送人",
-      "title": "抄送人",
-      "desc": "添加抄送人节点",
-      "placeholder": "请设置抄送人",
-      "summary": {
-        "department": "个部门",
-        "formField": "从表单获取",
-        "initiator": "发起人",
-        "role": "个角色",
-        "user": "位成员"
-      }
-    },
-    "delay": {
-      "name": "延时等待",
-      "title": "延时等待",
-      "desc": "等待指定时间后继续",
-      "placeholder": "请设置延时时长",
-      "summary": {
-        "minute": "分钟",
-        "hour": "小时",
-        "day": "天",
-        "workday": "工作日",
-        "wait": "等待"
-      }
-    },
-    "notify": {
-      "name": "发送通知",
-      "title": "发送通知",
-      "desc": "发送消息通知",
-      "placeholder": "请设置通知对象",
-      "summary": {
-        "department": "个部门",
-        "formField": "从表单获取",
-        "initiator": "发起人",
-        "role": "个角色",
-        "user": "位成员",
-        "channels": "通知渠道"
-      }
-    },
-    "service": {
-      "name": "服务调用",
-      "title": "服务调用",
-      "desc": "调用外部服务或API",
-      "placeholder": "请配置服务调用",
-      "summary": {
-        "url": "请求地址",
-        "notConfigured": "未配置"
-      }
-    },
-    "subflow": {
-      "name": "子流程",
-      "title": "子流程",
-      "desc": "调用其他流程",
-      "placeholder": "请选择子流程",
-      "summary": {
-        "notSelected": "未选择",
-        "sync": "同步",
-        "async": "异步"
-      }
-    },
-    "data_update": {
-      "name": "字段更新",
-      "title": "字段更新",
-      "desc": "自动更新表单字段值",
-      "placeholder": "请添加更新规则",
-      "summary": {
-        "ruleCount": "已配置 {count} 条更新规则",
-        "crossForm": "跨表单更新"
-      }
-    },
-    "condition": {
-      "name": "条件分支",
-      "title": "条件分支",
-      "desc": "添加条件分支",
-      "priority": "优先级",
-      "conditionBranch": "条件{num}",
-      "defaultBranch": "默认条件",
-      "defaultBranchDesc": "其他条件进入此分支",
-      "pleaseSetCondition": "请设置条件",
-      "addCondition": "添加条件"
-    },
-    "parallel": {
-      "name": "并行分支",
-      "desc": "添加并行分支，同时执行",
-      "branchFallback": "分支{num}"
-    },
-    "end": {
-      "name": "结束",
-      "title": "流程结束",
-      "desc": "流程结束"
-    }
-  },
-  "property": {
-    "title": {
-      "condition": "条件配置",
-      "start": "发起人设置",
-      "approval": "审批人设置",
-      "handle": "办理人设置",
-      "copy": "抄送人设置",
-      "delay": "延时设置",
-      "notify": "通知设置",
-      "service": "服务调用设置",
-      "subflow": "子流程设置",
-      "dataUpdate": "字段更新设置",
-      "conditionBranch": "条件分支设置",
-      "parallelBranch": "并行分支设置",
-      "end": "结束设置",
-      "node": "节点设置"
-    },
-    "base": {
-      "nodeName": "节点名称",
-      "nodeNamePlaceholder": "请输入节点名称",
-      "nodeNameHint": "自定义名称将显示在设计器、流程图、审批路径与审批记录中；留空则显示节点类型默认名称"
-    },
-    "assignee": {
-      "type": "审批人类型",
-      "handleType": "办理人类型",
-      "copyType": "抄送人类型",
-      "selectUser": "选择成员",
-      "selectRole": "选择角色",
-      "selectDept": "选择部门",
-      "userPlaceholder": "请选择审批人",
-      "rolePlaceholder": "请选择角色",
-      "deptPlaceholder": "请选择部门",
-      "superiorLevel": "上级层级",
-      "superiorHint": "1 = 当前部门领导，2 = 父部门领导，以此类推",
-      "superiorLevelHint": "第几级主管（1为直属主管）",
-      "managerHint": "1 = 直属经理，2 = 经理的经理，以此类推",
-      "initiatorHint": "审批人为流程发起人本人",
-      "copyInitiatorHint": "抄送给流程发起人本人",
-      "handleInitiatorHint": "办理人为流程发起人本人",
-      "selectField": "选择字段",
-      "fieldPlaceholder": "请选择用户类型的表单字段",
-      "noUserField": "当前表单没有用户选择类型的字段",
-      "fieldSingle": "单选",
-      "fieldMultiple": "多选",
-      "fieldTypeUser": "用户",
-      "fieldTypeForm": "表单",
-      "noSourceField": "当前表单没有用户选择器或表单选择器类型的字段",
-      "formFieldHint": "运行时将从所选字段中获取用户ID，支持多选多个字段，合并去重后作为人员列表",
-      "userFieldMapping": "用户字段映射",
-      "userFieldPlaceholder": "请选择引用表单中的用户字段",
-      "userFieldHint": "表单选择器存储的是关联记录的ID，需指定从关联记录中取哪个用户字段作为人员",
-      "types": {
-        "user": "指定成员",
-        "role": "指定角色",
-        "department": "指定部门",
-        "superior": "上级主管",
-        "manager": "直属经理",
-        "initiator": "发起人自己",
-        "form_field": "从表单中获取"
-      }
-    },
-    "multiApproval": {
-      "label": "多人审批时",
-      "any": "或签（一人通过即可）",
-      "parallel": "会签（所有人通过）",
-      "sequential": "依次审批"
-    },
-    "multiHandle": {
-      "label": "多人办理时",
-      "any": "任一办理（一人完成即可）",
-      "all": "全部办理（所有人完成）",
-      "sequential": "依次办理"
-    },
-    "timeout": {
-      "label": "超时设置",
-      "enable": "启用超时处理",
-      "time": "超时时间",
-      "action": "超时处理方式",
-      "notifyType": "通知方式",
-      "unit": {
-        "minute": "分钟",
-        "hour": "小时",
-        "day": "天",
-        "workday": "工作日"
-      },
-      "actions": {
-        "notify": "仅通知",
-        "auto_approve": "自动通过",
-        "auto_reject": "自动拒绝"
-      }
-    },
-    "notify": {
-      "label": "通知设置",
-      "approver": "通知审批人",
-      "initiator": "通知发起人",
-      "recipient": "通知对象",
-      "recipientType": "通知对象类型",
-      "whenTaskCreated": "任务创建时",
-      "onApprove": "通过时",
-      "onReject": "拒绝时",
-      "onHandleComplete": "办理完成时",
-      "channels": "通知渠道",
-      "channelPlaceholder": "请选择通知渠道",
-      "title": "通知标题",
-      "titlePlaceholder": "请输入通知标题",
-      "content": "通知内容",
-      "contentPlaceholder": "请输入通知内容，可使用 {'${字段名}'} 引用表单字段",
-      "variableDesc": "变量说明",
-      "initiatorVar": "{'${发起人}'} - 流程发起人姓名",
-      "flowNameVar": "{'${流程名称}'} - 当前流程名称",
-      "fieldVar": "{'${字段名}'} - 表单字段值",
-      "channelTypes": {
-        "site": "站内信",
-        "chat": "聊天通知",
-        "email": "邮件",
-        "sms": "短信",
-        "wechat": "微信",
-        "dingtalk": "钉钉",
-        "feishu": "飞书",
-        "dingtalkTodo": "钉钉待办"
-      }
-    },
-    "signature": {
-      "label": "签名设置",
-      "required": "要求签名",
-      "hint": "启用后，审批人通过时必须手写签名"
-    },
-    "action": {
-      "label": "操作权限",
-      "hint": "设置审批人在此节点可以执行的操作，可自定义按钮名称",
-      "descriptions": {
-        "approve": "同意审批，流程继续",
-        "reject": "拒绝审批，终止流程",
-        "return": "退回上一步或发起人重新提交",
-        "delegate": "委托他人代为审批，完成后回到自己",
-        "transfer": "转交他人处理，自己不再参与",
-        "add_sign": "增加审批人，可前加签或后加签",
-        "reduce_sign": "减少审批人（仅会签模式可用）"
-      },
-      "tips": {
-        "title": "操作说明",
-        "approveReject": "通过/拒绝：基础操作，建议至少保留一个",
-        "return": "驳回：可退回到上一节点或发起人",
-        "delegate": "委派：临时委托，完成后任务回到委派人",
-        "transfer": "转办：永久转交，自己不再处理",
-        "addSign": "加签：在当前节点增加审批人",
-        "reduceSign": "减签：仅会签模式可用，减少审批人"
-      },
-      "types": {
-        "approve": "通过",
-        "reject": "拒绝",
-        "return": "驳回",
-        "delegate": "委派",
-        "transfer": "转办",
-        "add_sign": "加签",
-        "reduce_sign": "减签"
-      }
-    },
-    "permission": {
-      "label": "字段权限",
-      "hint": "设置审批人在此节点可以查看和编辑的表单字段"
-    },
-    "segment": {
-      "approver": "审批人",
-      "actions": "操作权限",
-      "permissions": "字段权限",
-      "handler": "办理人设置"
-    },
-    "delay": {
-      "title": "延时设置",
-      "duration": "延时时长",
-      "hint": "设置流程等待的时间，到达指定时间后自动继续执行",
-      "minuteTip": "按自然分钟计算",
-      "hourTip": "按自然小时计算",
-      "dayTip": "按自然天计算（24小时）",
-      "workdayTip": "仅计算工作日，跳过周末和节假日"
-    },
-    "conditionBranch": {
-      "title": "条件设置",
-      "name": "条件名称",
-      "namePlaceholder": "请输入条件名称",
-      "hint": "设置进入此分支的条件",
-      "hintSub": "条件组之间为\"或\"关系，组内条件为\"且\"关系",
-      "noFormHint": "请先关联表单，才能配置条件",
-      "defaultTitle": "默认条件分支",
-      "defaultHint": "当其他条件都不满足时，进入此分支"
-    },
-    "parallelBranch": {
-      "name": "分支名称",
-      "namePlaceholder": "请输入分支名称",
-      "addBranch": "添加分支"
-    },
-    "startNode": {
-      "title": "发起人节点",
-      "hint": "所有有权限的用户都可以发起此流程",
-      "permissionHint": "设置发起人在填写表单时各字段的权限（可编辑/只读/隐藏）"
-    },
-    "service": {
-      "title": "服务调用设置",
-      "baseSettings": "基本设置",
-      "name": "服务名称",
-      "namePlaceholder": "请输入服务名称（可选）",
-      "url": "请求地址",
-      "urlPlaceholder": "https://api.example.com/endpoint",
-      "method": "请求方法",
-      "headers": "请求头",
-      "headerName": "Header名称",
-      "headerValue": "Header值",
-      "addHeader": "添加请求头",
-      "params": "请求参数",
-      "body": "请求体",
-      "advancedSettings": "高级设置",
-      "timeout": "超时时间（秒）",
-      "retry": "重试次数",
-      "failAction": "失败处理",
-      "resultVar": "结果存储变量",
-      "resultVarPlaceholder": "存储响应结果的变量名（可选）",
-      "resultVarHint": "响应结果将存入此变量，可在后续节点中使用",
-      "variableDesc": "变量说明",
-      "paramFieldVar": "请求参数中可使用 {'${字段名}'} 引用表单字段",
-      "resultVarUsage": "响应结果可通过变量名在条件分支中使用",
-      "failActions": {
-        "continue": "继续执行",
-        "stop": "终止流程",
-        "retry": "自动重试"
-      }
-    },
-    "subflow": {
-      "title": "子流程设置",
-      "select": "选择子流程",
-      "selectPlaceholder": "请选择要调用的子流程",
-      "selectWarning": "请选择一个子流程",
-      "flowId": "流程ID",
-      "flowName": "流程名称",
-      "unnamed": "未命名",
-      "varPass": "变量传递",
-      "varPassHint": "配置主流程向子流程传递的变量数据",
-      "varPassMode": "传递方式",
-      "selectVars": "选择变量",
-      "selectVarsPlaceholder": "请选择要传递的变量",
-      "selectVarsHint": "选择需要传递给子流程的表单字段",
-      "varMapping": "变量映射规则",
-      "mappingRule1": "主流程变量将按名称自动映射到子流程",
-      "mappingRule2": "同名变量将被覆盖，不同名变量将被忽略",
-      "executionSettings": "执行设置",
-      "executionMode": "执行模式",
-      "sync": "同步执行",
-      "syncDesc": "等待子流程完成后继续",
-      "async": "异步执行",
-      "asyncDesc": "启动子流程后立即继续",
-      "resultMode": "结果处理",
-      "ignoreResult": "忽略子流程结果",
-      "saveResult": "保存子流程结果",
-      "resultVarName": "结果变量名",
-      "resultVarPlaceholder": "请输入变量名，如: subflowResult",
-      "resultVarHint": "子流程的审批结果将存入此变量，可在后续节点中使用",
-      "asyncWarning": "异步执行注意事项",
-      "asyncWarning1": "主流程不会等待子流程完成",
-      "asyncWarning2": "无法获取子流程的执行结果",
-      "asyncWarning3": "子流程失败不会影响主流程",
-      "skipSubflow": "跳过子流程（视为通过）",
-      "rejectSubflow": "拒绝子流程",
-      "usageTips": "使用说明",
-      "usageTip1": "子流程将继承主流程的发起人信息",
-      "usageTip2": "子流程拥有独立的审批记录和状态",
-      "usageTip3": "可通过条件分支根据子流程结果进行后续处理",
-      "varPassModes": {
-        "all": "传递所有变量",
-        "selected": "选择传递变量",
-        "none": "不传递变量"
-      }
-    },
-    "dataUpdate": {
-      "title": "字段更新设置",
-      "description": "流程到达此节点时，将按照配置的规则自动更新表单字段值。",
-      "targetForm": "目标表单",
-      "targetFormPlaceholder": "请选择要更新的表单",
-      "currentForm": "当前表单",
-      "matchCondition": "匹配条件",
-      "matchConditionHint": "指定当前表单与目标表单的字段关联关系，用于定位要更新的目标记录。",
-      "sourceField": "当前表单字段",
-      "sourceFieldPlaceholder": "请选择当前表单字段",
-      "targetMatchField": "目标表单字段",
-      "targetMatchFieldPlaceholder": "请选择目标表单字段",
-      "updateScope": "更新范围",
-      "updateScopeFirst": "仅更新第一条",
-      "updateScopeAll": "更新全部匹配记录",
-      "rulesTitle": "更新规则",
-      "targetField": "目标字段",
-      "targetFieldPlaceholder": "请选择要更新的字段",
-      "valueType": "值类型",
-      "value": "值",
-      "constantPlaceholder": "请输入常量值",
-      "fieldPlaceholder": "请选择源字段",
-      "formulaPlaceholder": "请输入表达式，如: {{price}} * {{quantity}}",
-      "formulaHint": "使用 {{字段名}} 引用表单字段，支持四则运算（+、-、*、/）",
-      "systemPlaceholder": "请选择系统变量",
-      "addRule": "添加更新规则",
-      "noRulesHint": "暂无更新规则，请点击上方按钮添加。",
-      "valueTypes": {
-        "constant": "常量值",
-        "field": "字段引用",
-        "formula": "表达式",
-        "system": "系统变量"
-      },
-      "systemVars": {
-        "currentTime": "当前时间",
-        "currentDate": "当前日期",
-        "currentUser": "当前操作人",
-        "initiator": "流程发起人",
-        "instanceNo": "流程编号",
-        "instanceTitle": "流程标题"
-      }
-    }
-  },
-  "condition": {
-    "title": "条件组",
-    "and": "且",
-    "or": "或",
-    "andHint": "组内条件为「且」关系",
-    "addCondition": "添加条件",
-    "addGroup": "添加条件组",
-    "emptyHint": "暂无条件，点击下方按钮添加",
-    "selectField": "选择字段",
-    "selectOperator": "选择条件",
-    "inputValue": "输入值",
-    "inputNumber": "输入数值",
-    "selectDate": "选择日期",
-    "selectValue": "选择值",
-    "operators": {
-      "eq": "等于",
-      "ne": "不等于",
-      "gt": "大于",
-      "gte": "大于等于",
-      "lt": "小于",
-      "lte": "小于等于",
-      "contains": "包含",
-      "not_contains": "不包含",
-      "in": "在...中",
-      "not_in": "不在...中",
-      "empty": "为空",
-      "not_empty": "不为空"
-    }
-  },
-  "detail": {
-    "title": "流程详情",
-    "tabs": {
-      "progress": "流程进度",
-      "form": "表单内容",
-      "flowchart": "流程图",
-      "flowProgress": "审批路径"
-    },
-    "currentPending": "当前待办",
-    "flowInfo": "流程信息",
-    "approvalRecord": "审批记录",
-    "flowTitle": "流程标题",
-    "flowType": "流程类型",
-    "flowStatus": "流程状态",
-    "flowNo": "流程编号",
-    "initiator": "发起人",
-    "currentNode": "当前节点",
-    "startTime": "发起时间",
-    "completeTime": "完成时间",
-    "duration": "流程耗时",
-    "unknownNode": "未知节点",
-    "start": "开始",
-    "noData": "暂无数据",
-    "noApprovalRecord": "暂无审批记录",
-    "noFormContent": "暂无表单内容",
-    "loadDataFailed": "加载数据失败",
-    "loadFormDataFailed": "加载表单数据失败",
-    "systemAuto": "系统自动",
-    "person": "人",
-    "timeout": "已超时",
-    "waiting": "等待中",
-    "daysLater": "天后",
-    "hoursLater": "小时",
-    "minutesLater": "分钟",
-    "days": "天",
-    "hours": "小时",
-    "minutes": "分钟",
-    "status": {
-      "pending": "审批中",
-      "approved": "已通过",
-      "rejected": "已拒绝",
-      "cancelled": "已撤回"
-    },
-    "actions": {
-      "start": "发起流程",
-      "approve": "审批通过",
-      "reject": "审批拒绝",
-      "return": "驳回",
-      "transfer": "转办",
-      "delegate": "委派",
-      "add_sign": "加签",
-      "revise": "重新提交",
-      "cancel": "撤回",
-      "copy": "抄送",
-      "handle": "办理",
-      "urge": "催办",
-      "task_timeout": "任务超时",
-      "task_timeout_notify": "超时提醒",
-      "task_auto_approve": "超时自动通过",
-      "task_auto_reject": "超时自动拒绝",
-      "delay_start": "开始延时",
-      "delay_complete": "延时结束",
-      "delay_skip": "延时跳过",
-      "notify": "发送通知",
-      "parallel_start": "进入并行",
-      "parallel_complete": "并行完成",
-      "subflow_start": "启动子流程",
-      "subflow_complete": "子流程完成",
-      "data_update": "字段更新",
-      "condition": "条件分支"
-    },
-    "flowProgress": {
-      "returnRecords": "驳回记录",
-      "noData": "暂无流程进度数据",
-      "loadFailed": "加载流程进度失败",
-      "delayWaiting": "延时等待中，预计恢复时间：",
-      "pending": "待处理",
-      "waiting": "等待中",
-      "skipped": "已跳过",
-      "copied": "已抄送",
-      "nodeTypes": {
-        "start": "开始",
-        "end": "结束",
-        "approval": "审批",
-        "handle": "办理",
-        "copy": "抄送",
-        "condition": "条件",
-        "parallel": "并行",
-        "delay": "延时",
-        "notify": "通知",
-        "service": "服务",
-        "subflow": "子流程",
-        "data_update": "字段更新"
-      },
-      "nodeStatus": {
-        "completed": "已完成",
-        "active": "进行中",
-        "pending": "待执行",
-        "skipped": "已跳过",
-        "rejected": "已拒绝"
-      },
-      "actions": {
-        "approve": "通过",
-        "reject": "拒绝",
-        "return": "驳回",
-        "transfer": "转交",
-        "delegate": "委派",
-        "handle": "办理",
-        "add_sign": "加签"
-      },
-      "signTypes": {
-        "before": "前加签",
-        "after": "后加签",
-        "parallel": "并行加签"
-      },
-      "extraActions": {
-        "add_sign": "加签",
-        "reduce_sign": "减签",
-        "transfer": "转交",
-        "delegate": "委派",
-        "return": "驳回"
-      }
-    }
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/workflow-designer.json_new b/web/apps/web-ele/src/locales/langs/zh-CN/workflow-designer.json_new
deleted file mode 100644
index e69de29..0000000
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/zq-editor.json b/web/apps/web-ele/src/locales/langs/zh-CN/zq-editor.json
deleted file mode 100644
index e108b2b..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-CN/zq-editor.json
+++ /dev/null
@@ -1,251 +0,0 @@
-{
-  "placeholder": "输入 / 打开命令菜单...",
-  "slash": {
-    "noResult": "没有找到匹配的命令",
-    "category": {
-      "text": "文本",
-      "list": "列表",
-      "media": "媒体",
-      "advanced": "高级",
-      "diagram": "图表"
-    },
-    "text": "正文",
-    "textDesc": "普通段落文本",
-    "heading1": "标题 1",
-    "heading1Desc": "大标题",
-    "heading2": "标题 2",
-    "heading2Desc": "中标题",
-    "heading3": "标题 3",
-    "heading3Desc": "小标题",
-    "bulletList": "无序列表",
-    "bulletListDesc": "创建无序列表",
-    "orderedList": "有序列表",
-    "orderedListDesc": "创建有序列表",
-    "taskList": "任务列表",
-    "taskListDesc": "创建带复选框的任务列表",
-    "blockquote": "引用",
-    "blockquoteDesc": "创建引用块",
-    "codeBlock": "代码块",
-    "codeBlockDesc": "创建代码块",
-    "divider": "分割线",
-    "dividerDesc": "插入分割线",
-    "table": "表格",
-    "tableDesc": "插入表格",
-    "image": "图片",
-    "imageDesc": "上传或嵌入图片",
-    "callout": "提示块",
-    "calloutDesc": "插入醒目的提示信息",
-    "toggle": "折叠块",
-    "toggleDesc": "创建可折叠/展开的内容块",
-    "columns": "多列布局",
-    "columnsDesc": "插入两列并排布局",
-    "toc": "目录",
-    "tocDesc": "根据标题自动生成目录",
-    "inlineMath": "行内公式",
-    "inlineMathDesc": "插入行内数学公式",
-    "video": "视频",
-    "videoDesc": "上传视频文件",
-    "attachment": "附件",
-    "attachmentDesc": "上传任意类型文件",
-    "embed": "嵌入链接",
-    "embedDesc": "插入 URL 预览卡片",
-    "emoji": "表情",
-    "emojiDesc": "插入表情符号",
-    "whiteboard": "画板",
-    "whiteboardDesc": "创建可绘制的画板",
-    "draw": "绘图板",
-    "drawDesc": "创建手绘风格的绘图板"
-  },
-  "whiteboard": {
-    "title": "画板",
-    "edit": "编辑",
-    "close": "关闭",
-    "delete": "删除",
-    "saveAndClose": "保存并关闭",
-    "clickToCreate": "点击创建画板"
-  },
-  "draw": {
-    "title": "绘图板",
-    "edit": "编辑",
-    "close": "关闭",
-    "delete": "删除",
-    "saveAndClose": "保存并关闭",
-    "clickToCreate": "点击创建绘图板",
-    "dblclickToEdit": "双击编辑"
-  },
-  "bubble": {
-    "turnInto": "转换为",
-    "bold": "加粗",
-    "italic": "斜体",
-    "underline": "下划线",
-    "strikethrough": "删除线",
-    "code": "行内代码",
-    "highlight": "高亮",
-    "link": "链接",
-    "alignLeft": "左对齐",
-    "alignCenter": "居中",
-    "alignRight": "右对齐",
-    "fontSize": "字号",
-    "fontSizeDefault": "默认",
-    "emoji": "表情"
-  },
-  "turnInto": {
-    "text": "正文",
-    "heading1": "标题 1",
-    "heading2": "标题 2",
-    "heading3": "标题 3",
-    "bulletList": "无序列表",
-    "orderedList": "有序列表",
-    "taskList": "任务列表",
-    "blockquote": "引用",
-    "codeBlock": "代码块"
-  },
-  "color": {
-    "textColor": "文字颜色",
-    "highlightColor": "背景颜色",
-    "default": "默认",
-    "gray": "灰色",
-    "brown": "棕色",
-    "orange": "橙色",
-    "yellow": "黄色",
-    "green": "绿色",
-    "blue": "蓝色",
-    "purple": "紫色",
-    "pink": "粉色",
-    "red": "红色",
-    "none": "无",
-    "cyan": "青色"
-  },
-  "link": {
-    "placeholder": "输入链接地址...",
-    "confirm": "确定",
-    "cancel": "取消"
-  },
-  "table": {
-    "moveUp": "上移行",
-    "moveDown": "下移行",
-    "moveLeft": "左移列",
-    "moveRight": "右移列",
-    "insertRowAbove": "在上方插入行",
-    "insertRowBelow": "在下方插入行",
-    "insertColumnLeft": "在左侧插入列",
-    "insertColumnRight": "在右侧插入列",
-    "color": "颜色",
-    "clearColumn": "清空列内容",
-    "duplicateRow": "在下方插入行",
-    "duplicateColumn": "在右侧插入列",
-    "deleteRow": "删除行",
-    "deleteColumn": "删除列",
-    "defaultColor": "默认",
-    "lightGray": "浅灰",
-    "lightRed": "浅红",
-    "lightOrange": "浅橙",
-    "lightYellow": "浅黄",
-    "lightGreen": "浅绿",
-    "lightBlue": "浅蓝",
-    "lightPurple": "浅紫",
-    "lightPink": "浅粉",
-    "mergeCells": "合并单元格",
-    "splitCell": "拆分单元格",
-    "toggleHeaderRow": "切换表头行",
-    "toggleHeaderColumn": "切换表头列",
-    "deleteTable": "删除表格",
-    "cellAlign": "单元格对齐",
-    "cellAlignLeft": "左对齐",
-    "cellAlignCenter": "居中对齐",
-    "cellAlignRight": "右对齐",
-    "fullWidth": "全宽显示",
-    "stripedRows": "斑马纹",
-    "sortAsc": "升序排列",
-    "sortDesc": "降序排列",
-    "clearCell": "清空单元格",
-    "sizePicker": "选择表格尺寸",
-    "sizePickerHint": "{rows} × {cols} 表格"
-  },
-  "callout": {
-    "info": "信息",
-    "warning": "警告",
-    "success": "成功",
-    "error": "错误"
-  },
-  "toggle": {
-    "placeholder": "折叠标题...",
-    "empty": "空内容，点击展开后编辑"
-  },
-  "toc": {
-    "title": "目录",
-    "empty": "添加标题后，目录将自动生成",
-    "untitled": "无标题"
-  },
-  "image": {
-    "alignment": "对齐",
-    "alignLeft": "左对齐",
-    "alignCenter": "居中",
-    "alignRight": "右对齐",
-    "size": "尺寸",
-    "small": "小图",
-    "medium": "中图",
-    "large": "大图",
-    "reset": "重置大小",
-    "delete": "删除",
-    "caption": "添加说明...",
-    "uploading": "上传中...",
-    "uploadFailed": "上传失败",
-    "loadFailed": "图片加载失败",
-    "retry": "重试"
-  },
-  "video": {
-    "delete": "删除",
-    "uploading": "上传中..."
-  },
-  "attachment": {
-    "download": "下载",
-    "delete": "删除",
-    "untitled": "未命名文件"
-  },
-  "upload": {
-    "fileSizeExceeds": "文件大小超出限制",
-    "uploadFailed": "上传失败，请重试",
-    "imageUploadFailed": "图片上传失败",
-    "videoUploadFailed": "视频上传失败",
-    "attachmentUploadFailed": "附件上传失败"
-  },
-  "mention": {
-    "noResults": "没有找到匹配的用户",
-    "loading": "搜索中..."
-  },
-  "embed": {
-    "placeholder": "输入链接地址...",
-    "submit": "嵌入",
-    "loading": "加载中...",
-    "open": "打开链接",
-    "delete": "删除"
-  },
-  "codeBlock": {
-    "copyCode": "复制代码",
-    "copied": "已复制",
-    "searchLanguage": "搜索语言...",
-    "noLanguage": "没有匹配的语言"
-  },
-  "blockMenu": {
-    "delete": "删除",
-    "duplicate": "复制",
-    "moveUp": "上移",
-    "moveDown": "下移",
-    "turnInto": "转换为"
-  },
-  "search": {
-    "find": "查找",
-    "findPlaceholder": "查找...",
-    "replace": "替换",
-    "replaceAll": "全部替换",
-    "replacePlaceholder": "替换为...",
-    "noResults": "无结果",
-    "caseSensitive": "区分大小写",
-    "previousMatch": "上一个",
-    "nextMatch": "下一个",
-    "close": "关闭",
-    "showReplace": "显示替换",
-    "hideReplace": "隐藏替换"
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-CN/zq-smart-table.json b/web/apps/web-ele/src/locales/langs/zh-CN/zq-smart-table.json
deleted file mode 100644
index e0565ae..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-CN/zq-smart-table.json
+++ /dev/null
@@ -1,550 +0,0 @@
-{
-  "common": {
-    "confirm": "确认",
-    "cancel": "取消",
-    "delete": "删除",
-    "edit": "编辑",
-    "save": "保存",
-    "add": "添加",
-    "search": "搜索",
-    "reset": "重置",
-    "newLine": "换行",
-    "loading": "加载中...",
-    "noData": "暂无数据",
-    "more": "更多",
-    "close": "关闭",
-    "rename": "重命名",
-    "duplicate": "复制",
-    "export": "导出",
-    "import": "导入",
-    "deleteSuccess": "删除成功",
-    "deleteFailed": "删除失败"
-  },
-  "app": {
-    "title": "ZQ 知识库",
-    "description": "多维表格与文档协作平台"
-  },
-  "theme": {
-    "light": "浅色模式",
-    "dark": "深色模式",
-    "system": "跟随系统"
-  },
-  "language": {
-    "zhCN": "简体中文",
-    "zhTW": "繁體中文",
-    "en": "English"
-  },
-  "sidebar": {
-    "allItems": "所有项目",
-    "allTables": "所有表格",
-    "newTable": "新建表格",
-    "newDocument": "新建文档",
-    "newDocumentTitle": "新建文档",
-    "dashboard": "仪表盘",
-    "deleteTable": "删除",
-    "deleteTableConfirm": "确定要删除「{name}」吗？此操作不可撤销。",
-    "renameTable": "重命名",
-    "newTableTitle": "新建表格",
-    "searchPlaceholder": "搜索项目...",
-    "tables": "多维表格",
-    "documents": "文档",
-    "collapse": "收起侧栏",
-    "expand": "展开侧栏",
-    "noResults": "没有匹配的项目",
-    "emptyTables": "暂无表格",
-    "emptyDocuments": "暂无文档",
-    "newSubPage": "新建子页面",
-    "moveToRoot": "移动到根级"
-  },
-  "document": {
-    "placeholder": "输入 / 唤起命令菜单...",
-    "untitled": "无标题文档",
-    "titlePlaceholder": "请输入标题",
-    "autoSaved": "已自动保存",
-    "saving": "保存中...",
-    "modifiedToday": "今天修改",
-    "modifiedYesterday": "昨天修改",
-    "modified": "修改",
-    "unknownUser": "未知用户",
-    "toc": "目录",
-    "export": "导出",
-    "exporting": "正在导出，请稍候...",
-    "exportMarkdown": "导出 Markdown",
-    "exportPdf": "导出 PDF",
-    "exportWord": "导出 Word",
-    "exportSuccess": "导出成功",
-    "exportFailed": "导出失败",
-    "moreActions": "更多操作"
-  },
-    "table": {
-    "addRecord": "添加记录",
-    "addField": "添加字段",
-    "deleteRecord": "删除记录",
-    "deleteField": "删除字段",
-    "fieldName": "字段名称",
-    "fieldType": "字段类型",
-    "rowCount": "{count} 条记录",
-    "selectedCount": "已选择 {count} 条",
-    "emptyTable": "表格为空，点击添加第一条记录",
-    "configField": "配置字段",
-    "hideField": "隐藏字段",
-    "sortAsc": "升序排列",
-    "sortDesc": "降序排列",
-    "insertLeft": "向左插入",
-    "insertRight": "向右插入",
-    "expandRecord": "展开记录",
-    "recordDetail": "记录详情",
-    "batchDelete": "批量删除",
-    "selectAll": "全选",
-    "noTitle": "(无标题)",
-    "renameField": "重命名字段",
-    "duplicateField": "复制字段",
-    "editField": "编辑字段",
-    "filterByField": "按此字段筛选",
-    "clearSort": "清除排序",
-    "fieldDescription": "字段描述",
-    "fieldOptions": "选项",
-    "maxRating": "最大评分",
-    "numberFormat": "数字格式",
-    "numberFormatNumber": "数字",
-    "numberFormatCurrency": "货币 (¥)",
-    "numberFormatPercent": "百分比 (%)",
-    "numberFormatYuan": "元",
-    "precision": "小数位数",
-    "includeTime": "包含时间",
-    "currencySymbol": "货币符号",
-    "formulaExpression": "公式表达式",
-    "formulaResultType": "结果类型",
-    "fieldGroupBasic": "基础字段",
-    "fieldGroupAdvanced": "高级字段",
-    "fieldGroupSystem": "系统字段",
-    "copyRecord": "复制记录",
-    "insertAbove": "在上方插入",
-    "insertBelow": "在下方插入",
-    "deleteRecordConfirm": "确定要删除这条记录吗？",
-    "copiedToClipboard": "已复制到剪贴板",
-    "frozenField": "冻结至此字段",
-    "unfreezeField": "取消冻结",
-    "multipleSelect": "允许多选",
-    "regionLevel": "地区层级",
-    "regionProvince": "省",
-    "regionCity": "省/市",
-    "regionDistrict": "省/市/区",
-    "maxImageCount": "最大图片数量",
-    "currencyCNY": "¥ 人民币",
-    "currencyUSD": "$ 美元",
-    "currencyEUR": "€ 欧元",
-    "currencyGBP": "£ 英镑",
-    "currencyKRW": "₩ 韩元",
-    "formulaPlaceholder": "e.g. {field1} + {field2}",
-    "keyboardShortcuts": "快捷键",
-    "paste": "粘贴",
-    "redo": "重做",
-    "clearCell": "清除单元格",
-    "editCell": "编辑单元格",
-    "cancelEdit": "取消编辑",
-    "navigate": "单元格导航",
-    "nextCell": "下一个/上一个单元格",
-    "clearFilter": "清除此字段筛选"
-  },
-  "field": {
-    "text": "文本",
-    "number": "数字",
-    "singleSelect": "单选",
-    "multiSelect": "多选",
-    "date": "日期",
-    "checkbox": "复选框",
-    "person": "人员",
-    "attachment": "附件",
-    "url": "链接",
-    "email": "邮箱",
-    "phone": "电话",
-    "rating": "评分",
-    "progress": "进度",
-    "currency": "货币",
-    "autoNumber": "自动编号",
-    "location": "地理位置",
-    "createdTime": "创建时间",
-    "modifiedTime": "修改时间",
-    "createdBy": "创建人",
-    "modifiedBy": "修改人",
-    "formula": "公式",
-    "richText": "富文本",
-    "user": "用户",
-    "department": "部门",
-    "region": "地区",
-    "image": "图片",
-    "link": "关联",
-    "lookup": "引用",
-    "rollup": "汇总"
-  },
-  "view": {
-    "grid": "表格视图",
-    "kanban": "看板视图",
-    "gallery": "画册视图",
-    "form": "表单视图",
-    "addView": "添加视图",
-    "deleteView": "删除视图",
-    "renameView": "重命名视图",
-    "duplicateView": "复制视图",
-    "deleteViewConfirm": "确定要删除视图「{name}」吗？",
-    "calendar": "日历视图",
-    "gantt": "甘特视图"
-  },
-  "toolbar": {
-    "filter": "筛选",
-    "sort": "排序",
-    "group": "分组",
-    "hideFields": "隐藏字段",
-    "rowHeight": "行高",
-    "rowHeightShort": "紧凑",
-    "rowHeightMedium": "默认",
-    "rowHeightTall": "宽松",
-    "rowHeightExtraTall": "超高",
-    "fieldVisibility": "字段显示",
-    "showAll": "显示全部",
-    "hideAll": "隐藏全部",
-    "search": "搜索",
-    "addFilter": "添加筛选条件",
-    "addSort": "添加排序规则",
-    "addGroup": "添加分组",
-    "fields": "个字段",
-    "undo": "撤销",
-    "copy": "复制",
-    "zebra": "斑马纹",
-    "export": "导出",
-    "exportCSV": "导出 CSV",
-    "exportFailed": "导出失败",
-    "import": "导入",
-    "importCSV": "导入 CSV",
-    "importSuccess": "导入成功",
-    "importFailed": "导入失败",
-    "conditionalFormat": "条件格式",
-    "noConditionalFormats": "暂无条件格式规则",
-    "addRule": "添加规则",
-    "rule": "规则",
-    "applyToRow": "整行",
-    "bgColor": "背景色",
-    "textColor": "文字色",
-    "preview": "预览",
-    "addRecord": "添加记录",
-    "resetData": "重置数据",
-    "resetDataConfirm": "确定要重置所有数据吗？此操作不可恢复。",
-    "confirmReset": "确定重置",
-    "resetSampleData": "重置示例数据",
-    "exportExcel": "导出 Excel",
-    "copiedRowCol": "已复制 {rows} 行 × {cols} 列",
-    "pastedRowCol": "已粘贴 {rows} 行 × {cols} 列",
-    "collapseAll": "全部折叠",
-    "expandAll": "全部展开"
-  },
-  "filter": {
-    "equals": "等于",
-    "notEquals": "不等于",
-    "contains": "包含",
-    "notContains": "不包含",
-    "isEmpty": "为空",
-    "isNotEmpty": "不为空",
-    "greaterThan": "大于",
-    "lessThan": "小于",
-    "where": "当",
-    "and": "且",
-    "or": "或",
-    "noFilters": "暂无筛选条件"
-  },
-  "kanban": {
-    "uncategorized": "未分类",
-    "addCard": "添加卡片",
-    "noGroupField": "请选择分组字段",
-    "groupBy": "分组依据",
-    "cardFields": "卡片字段",
-    "showFields": "显示字段"
-  },
-  "gantt": {
-    "startField": "开始日期",
-    "endField": "结束日期",
-    "taskName": "任务名称",
-    "noDateField": "请先添加日期字段",
-    "zoomDay": "日",
-    "zoomWeek": "周",
-    "zoomMonth": "月",
-    "durationDays": "{days} 天",
-    "noDateCount": "{count} 条无日期",
-    "todayMark": "今天",
-    "milestoneField": "里程碑字段",
-    "autoDetect": "自动识别",
-    "milestone": "里程碑",
-    "toggleDependencies": "显示/隐藏依赖线",
-    "toggleCriticalPath": "显示/隐藏关键路径",
-    "depType": "依赖类型",
-    "depDesc_FS": "完成-开始",
-    "depDesc_FF": "完成-完成",
-    "depDesc_SS": "开始-开始",
-    "depDesc_SF": "开始-完成",
-    "deleteDep": "删除依赖",
-    "dragToMove": "拖拽移动任务",
-    "dragToResize": "拖拽调整时长"
-  },
-  "calendar": {
-    "today": "今天",
-    "dateField": "开始日期",
-    "endDateField": "结束日期",
-    "noDateField": "请先添加日期字段",
-    "none": "无",
-    "more": "更多",
-    "allDay": "全天",
-    "modeMonth": "月",
-    "modeWeek": "周",
-    "modeDay": "日",
-    "weekSun": "日",
-    "weekMon": "一",
-    "weekTue": "二",
-    "weekWed": "三",
-    "weekThu": "四",
-    "weekFri": "五",
-    "weekSat": "六"
-  },
-  "gallery": {
-    "title": "画册视图",
-    "coverField": "封面字段",
-    "noCover": "无封面",
-    "yes": "是",
-    "no": "否"
-  },
-  "form": {
-    "title": "表单视图",
-    "formTitle": "数据收集表单",
-    "formDescription": "请填写以下信息",
-    "submit": "提交",
-    "submitSuccess": "提交成功！",
-    "required": "必填",
-    "fieldRequired": "{name} 不能为空",
-    "invalidEmail": "请输入有效的邮箱地址",
-    "invalidPhone": "请输入有效的电话号码",
-    "invalidUrl": "请输入有效的 URL 地址",
-    "checkFormErrors": "请检查表单中的错误"
-  },
-  "permission": {
-    "title": "权限设置",
-    "tabCollaborators": "协作者",
-    "tabFieldPerm": "列权限",
-    "tabRowPerm": "行权限",
-    "searchUser": "搜索用户",
-    "invite": "邀请",
-    "addSuccess": "添加成功",
-    "addFailed": "添加失败",
-    "updateFailed": "更新失败",
-    "removeConfirm": "确定移除 {name}？",
-    "removeCollaborator": "移除协作者",
-    "removed": "已移除",
-    "roleOwner": "所有者",
-    "roleManager": "管理者",
-    "roleEditor": "编辑者",
-    "roleViewer": "只读者",
-    "roleCustom": "自定义",
-    "accessWrite": "可编辑",
-    "accessRead": "可见",
-    "accessHidden": "隐藏",
-    "fieldPermSaved": "列权限已保存",
-    "saveFailed": "保存失败",
-    "rowPermUpdated": "行权限已更新",
-    "fieldPermTip": "点击字段权限标签可切换访问级别（可编辑 / 可见 / 隐藏），修改后点击\"保存\"生效。",
-    "rowPermTip": "行权限控制每个角色可查看和编辑的记录范围。",
-    "viewRecords": "可查看记录：",
-    "editRecords": "可编辑记录：",
-    "allRecords": "全部记录",
-    "creatorOnly": "仅自己创建的",
-    "noCollaborators": "暂无协作者",
-    "noFieldPerm": "暂未配置，点击\"保存\"可初始化",
-    "subjectUser": "用户",
-    "subjectDept": "部门",
-    "subjectRole": "角色",
-    "documentScopeHint": "文档无列与行数据维度，权限由协作者角色与「编辑内容 / 导出」等能力控制；不适用列权限与行权限。"
-  },
-  "cellRenderer": {
-    "today": "今天",
-    "yesterday": "昨天",
-    "tomorrow": "明天",
-    "yuan": "元"
-  },
-  "link": {
-    "targetTable": "关联目标表",
-    "selectTable": "请选择目标表",
-    "linkField": "关联字段",
-    "selectLinkField": "请选择关联字段",
-    "lookupField": "引用字段",
-    "rollupField": "汇总字段",
-    "selectField": "请选择字段",
-    "aggregation": "聚合方式",
-    "aggCount": "计数 (COUNT)",
-    "aggCounta": "非空计数 (COUNTA)",
-    "aggSum": "求和 (SUM)",
-    "aggAvg": "平均值 (AVG)",
-    "aggMin": "最小值 (MIN)",
-    "aggMax": "最大值 (MAX)",
-    "searchPlaceholder": "搜索记录..."
-  },
-  "dashboard": {
-    "title": "仪表盘",
-    "addChart": "添加图表",
-    "barChart": "柱状图",
-    "lineChart": "折线图",
-    "pieChart": "饼图",
-    "statNumber": "统计数字",
-    "totalRecords": "总记录数",
-    "sum": "求和",
-    "average": "平均值",
-    "max": "最大值",
-    "min": "最小值",
-    "empty": "空值",
-    "filled": "有值",
-    "percentEmpty": "空值占比",
-    "percentFilled": "有值占比",
-    "completed": "已完成",
-    "completionRate": "完成率",
-    "statusDist": "状态分布",
-    "priorityDist": "优先级分布",
-    "progressDist": "进度分布",
-    "distribution": "分布统计",
-    "noSelectField": "请添加单选字段",
-    "noNumberField": "请添加数字/进度/评分字段",
-    "noCheckbox": "请添加复选框字段"
-  },
-  "summary": {
-    "sum": "求和",
-    "avg": "平均值",
-    "min": "最小值",
-    "max": "最大值",
-    "count": "计数",
-    "counta": "非空计数",
-    "countEmpty": "空值数",
-    "percentEmpty": "空值占比",
-    "percentFilled": "填充率",
-    "clickToAdd": "汇总",
-    "none": "无",
-    "groupSubtotal": "小计"
-  },
-  "formula": {
-    "availableFields": "可引用字段（点击插入）",
-    "placeholder": "输入公式，如 IF({状态}=\"完成\", {金额} * 1.1, {金额})",
-    "functionReference": "函数参考",
-    "resultText": "文本",
-    "resultNumber": "数字",
-    "resultDate": "日期",
-    "resultBoolean": "布尔"
-  },
-  "validation": {
-    "title": "数据校验",
-    "min": "最小值",
-    "max": "最大值",
-    "minLength": "最小长度",
-    "maxLength": "最大长度",
-    "pattern": "正则表达式",
-    "patternPlaceholder": "如 ^[A-Z]{2}\\d{4}$",
-    "unique": "值不可重复",
-    "customMessage": "自定义错误提示",
-    "customMessagePlaceholder": "校验失败时显示的提示",
-    "noLimit": "不限",
-    "required": "「{name}」不能为空",
-    "minError": "「{name}」不能小于 {min}",
-    "maxError": "「{name}」不能大于 {max}",
-    "minLengthError": "「{name}」长度不能少于 {min} 个字符",
-    "maxLengthError": "「{name}」长度不能超过 {max} 个字符",
-    "patternError": "「{name}」格式不正确",
-    "uniqueError": "「{name}」的值已存在，不能重复"
-  },
-  "comment": {
-    "title": "评论",
-    "placeholder": "输入评论，@ 提及用户...",
-    "send": "发送",
-    "reply": "回复",
-    "edit": "编辑",
-    "delete": "删除",
-    "deleteConfirm": "确定删除这条评论？",
-    "noComments": "暂无评论",
-    "mentionHint": "输入 @ 搜索用户",
-    "justNow": "刚刚",
-    "minutesAgo": "{n} 分钟前",
-    "hoursAgo": "{n} 小时前",
-    "daysAgo": "{n} 天前",
-    "editComment": "编辑评论",
-    "cancelEdit": "取消",
-    "saveEdit": "保存",
-    "replyTo": "回复 {name}",
-    "commentCount": "{count} 条评论",
-    "postFailed": "评论发送失败",
-    "updateFailed": "评论更新失败",
-    "deleteFailed": "评论删除失败"
-  },
-  "mention": {
-    "noResults": "没有找到匹配的用户",
-    "navigate": "导航",
-    "select": "选择",
-    "close": "关闭"
-  },
-  "trash": {
-    "title": "回收站",
-    "empty": "回收站为空",
-    "restore": "恢复",
-    "permanentDelete": "永久删除",
-    "permanentDeleteConfirm": "确定要永久删除这条记录吗？此操作不可撤销。",
-    "emptyTrash": "清空回收站",
-    "emptyTrashConfirm": "确定要清空回收站吗？此操作不可撤销。",
-    "restoreSuccess": "恢复成功",
-    "deleteSuccess": "永久删除成功",
-    "emptySuccess": "回收站已清空",
-    "deletedAt": "删除时间",
-    "recordCount": "{count} 条记录",
-    "batchRestore": "批量恢复",
-    "selectedCount": "已选择 {count} 条"
-  },
-  "version": {
-    "title": "版本历史",
-    "empty": "暂无版本记录",
-    "createSnapshot": "保存快照",
-    "manualSnapshot": "手动保存",
-    "createSuccess": "版本快照已保存",
-    "createFailed": "保存版本快照失败",
-    "preview": "预览版本",
-    "restore": "恢复此版本",
-    "restoreConfirm": "恢复版本确认",
-    "restoreConfirmMsg": "确定要恢复到版本 v{version} 吗？当前内容将被保存为新版本。",
-    "restoreSuccess": "版本已恢复",
-    "restoreFailed": "恢复版本失败",
-    "deleteConfirm": "删除版本确认",
-    "deleteConfirmMsg": "确定要删除此版本吗？此操作不可撤销。",
-    "loadMore": "加载更多"
-  },
-  "template": {
-    "selectTitle": "选择文档模板",
-    "blankDocument": "空白文档",
-    "fromTemplate": "从模板创建",
-    "searchPlaceholder": "搜索模板...",
-    "allCategories": "全部",
-    "system": "系统",
-    "empty": "暂无模板",
-    "loadFailed": "加载模板失败",
-    "usedCount": "已使用 {count} 次",
-    "saveAsTemplate": "保存为模板",
-    "templateSuffix": "模板",
-    "name": "模板名称",
-    "namePlaceholder": "请输入模板名称",
-    "nameRequired": "请输入模板名称",
-    "description": "模板描述",
-    "descriptionPlaceholder": "请输入模板描述（可选）",
-    "categoryLabel": "分类",
-    "categoryPlaceholder": "请输入分类",
-    "save": "保存",
-    "saveSuccess": "模板保存成功",
-    "saveFailed": "模板保存失败",
-    "creating": "正在创建，请稍候...",
-    "category": {
-      "custom": "自定义",
-      "system": "系统模板",
-      "meeting": "会议",
-      "report": "报告",
-      "plan": "计划",
-      "note": "笔记"
-    }
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-TW/contract-design.json b/web/apps/web-ele/src/locales/langs/zh-TW/contract-design.json
deleted file mode 100644
index ced8e48..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-TW/contract-design.json
+++ /dev/null
@@ -1,208 +0,0 @@
-{
-  "elementPanel": "元素",
-  "templatePanel": "模板",
-  "variablePanel": "變數",
-  "selectElement": "請選擇一個元素",
-  "titleContent": "標題內容",
-  "titleLevel": "標題級別",
-  "alignment": "對齊方式",
-  "fontSize": "字體大小",
-  "fontWeight": "字體粗細",
-  "normal": "正常",
-  "bold": "粗體",
-  "paragraphContent": "段落內容",
-  "lineHeight": "行高",
-  "indent": "首行縮進(字符)",
-  "selectVariable": "選擇變數",
-  "variableInfo": "變數信息",
-  "required": "必填",
-  "optional": "選填",
-  "placeholderText": "佔位符文本",
-  "notFilledText": "未填寫時顯示的文本",
-  "minWidth": "最小寬度",
-  "showUnderline": "顯示下劃線",
-  "usageInstructions": "使用說明",
-  "variableUsageDesc": "選擇變數後，該變數會自動添加到模板的變數列表中。簽署時用戶需要填寫這些變數的值。",
-  "showBorder": "顯示邊框",
-  "headerBgColor": "表頭背景色",
-  "tableColumns": "表格列",
-  "column": "列",
-  "delete": "刪除",
-  "columnTitle": "列標題",
-  "width": "寬度",
-  "left": "左",
-  "center": "中",
-  "right": "右",
-  "addColumn": "添加列",
-  "addRow": "添加行",
-  "signatory": "簽署方",
-  "labelText": "標籤文字",
-  "alignLeft": "靠左",
-  "alignCenter": "居中",
-  "alignRight": "靠右",
-  "height": "高度",
-  "showLabel": "顯示標籤",
-  "showDate": "顯示日期",
-  "mustSign": "必須簽署",
-  "label": "標籤",
-  "dateFormat": "日期格式",
-  "lineStyle": "線條樣式",
-  "solid": "實線",
-  "dashed": "虛線",
-  "dotted": "點線",
-  "lineColor": "線條顏色",
-  "marginVertical": "上下邊距",
-  "imageUrl": "圖片地址",
-  "enterImageUrl": "請輸入圖片URL",
-  "minHeight": "最小高度",
-  "padding": "內邊距",
-  "borderColor": "邊框顏色",
-  "backgroundColor": "背景色",
-  "editTip": "編輯提示",
-  "richTextEditDesc": "雙擊富文本元素可直接在畫布中編輯內容，支持：",
-  "boldItalicUnderline": "加粗、斜體、下劃線",
-  "headingListQuote": "標題、列表、引用",
-  "insertContent": "插入鏈接、圖片、表格",
-  "templateName": "模板名稱",
-  "templateCode": "模板編碼",
-  "templateCategory": "模板分類",
-  "templateDescription": "模板說明",
-  "pageSettings": "頁面設置",
-  "pageSize": "頁面尺寸",
-  "pageMargin": "頁邊距 (px)",
-  "top": "上",
-  "bottom": "下",
-  "variableDescription": "變數說明",
-  "noVariablesText": "暫無變數，請在畫布中添加變數佔位符",
-  "clickToFill": "點擊填寫",
-  "signature": "簽名",
-  "signed": "已簽署",
-  "clickToSign": "點擊簽名",
-  "sealArea": "蓋章處",
-  "sealed": "已蓋章",
-  "clickToSeal": "點擊蓋章",
-  "noContent": "暫無內容",
-  "dateLabel": "日期",
-  "fillVariable": "填寫變數",
-  "enterVariableValue": "請輸入變數值",
-  "cancel": "取消",
-  "confirm": "確定",
-  "signHere": "請在此處簽名",
-  "undo": "撤銷",
-  "clear": "清空",
-  "contractTemplate": "合同模板",
-  "elements": "個元素",
-  "redo": "重做",
-  "preview": "預覽",
-  "viewJSON": "查看JSON",
-  "import": "導入",
-  "export": "導出",
-  "save": "保存",
-  "dragOrClickToAdd": "拖拽或點擊左側元素添加到畫布",
-  "releaseToAdd": "釋放鼠標添加元素",
-  "pageBreakLabel": "第 {page1} 頁結束 / 第 {page2} 頁開始",
-  "margin": "邊距",
-  "uploadImageFileOnly": "請上傳圖片文件",
-  "imageSizeExceeded": "圖片大小不能超過 2MB",
-  "pleaseSignFirst": "請先簽名",
-  "pleaseUploadSignatureImage": "請先上傳簽名圖片",
-  "drawSignature": "手寫簽名",
-  "uploadSignature": "上傳簽名",
-  "signaturePreview": "簽名預覽",
-  "clickOrDragToUpload": "點擊或拖拽上傳簽名圖片",
-  "supportedFormatsAndSize": "支持 JPG、PNG 格式，最大 2MB",
-  "confirmSignature": "確認簽名",
-  "contract": "合同",
-  "exportSuccess": "PDF 導出成功",
-  "contractPreview": "合同預覽",
-  "totalPages": "共 {count} 頁",
-  "pageLabel": "第 {current} / {total} 頁",
-  "close": "關閉",
-  "exportPdf": "導出PDF",
-  "exporting": "導出中...",
-  "signer": "簽署方",
-  "pleaseCompleteMandatoryFields": "請填寫必填項：{fields}",
-  "signedSuccessfully": "簽署成功",
-  "contractSigning": "合同簽署",
-  "fillInformation": "填寫信息",
-  "previewContract": "預覽合同",
-  "signatureConfirmation": "簽名確認",
-  "pleaseEnter": "請輸入{field}",
-  "pleaseSelect": "請選擇{field}",
-  "pleaseSignInArea": "請在下方區域簽名",
-  "previousStep": "上一步",
-  "nextStep": "下一步",
-  "confirmSigning": "確認簽署",
-  "signingTime": "簽署時間",
-  "textElements": "文本元素",
-  "variableElements": "變數元素",
-  "signatureElements": "簽署元素",
-  "layoutElements": "佈局元素",
-  "searchElements": "搜索元素...",
-  "dragOrClickAddElements": "拖拽或點擊添加元素",
-  "sampleTemplates": "示例模板",
-  "selectTemplateToStart": "選擇模板快速開始，點擊後將替換當前畫布內容",
-  "commonContracts": "常用合同",
-  "hrContracts": "人事合同",
-  "businessContracts": "商務合同",
-  "templateLoaded": "已加載模板：{name}",
-  "contractElements": "合同元素",
-  "partyAInfo": "甲方信息",
-  "partyBInfo": "乙方信息",
-  "contractInfo": "合同信息",
-  "otherInfo": "其他信息",
-  "contractTitle": "合同標題",
-  "paragraphText": "段落文本",
-  "richText": "富文本",
-  "variablePlaceholder": "變數佔位符",
-  "table": "表格",
-  "signatureZone": "簽名區",
-  "sealZone": "蓋章區",
-  "dateZone": "日期區",
-  "divider": "分割線",
-  "pageBreak": "分頁符",
-  "image": "圖片",
-  "pleaseAddContractElements": "請先添加合同元素",
-  "saveSuccess": "保存成功",
-  "clearCanvasConfirm": "確定要清空畫布嗎？此操作不可撤銷。",
-  "tip": "提示",
-  "confirm": "確定",
-  "cancel": "取消",
-  "cleared": "已清空",
-  "exportSuccess": "導出成功",
-  "pleaseEnterConfig": "請輸入配置內容",
-  "importSuccess": "導入成功",
-  "configFormatError": "配置格式錯誤",
-  "copiedToClipboard": "已複製到剪貼板",
-  "copyFailed": "複製失敗",
-  "undone": "已撤銷",
-  "redone": "已重做",
-  "copied": "已複製",
-  "pasted": "已粘貼",
-  "deleted": "已刪除",
-  "jsonPreview": "JSON預覽",
-  "copyCode": "複製代碼",
-  "close": "關閉",
-  "importConfig": "導入配置",
-  "pasteJsonConfig": "請粘貼 JSON 配置內容...",
-  "import": "導入",
-  "variableDescText": "在畫布中添加\"變數佔位符\"並選擇變數後，變數會自動添加到此列表。簽署時用戶需要填寫這些變數的值。",
-  "usedVariables": "已使用的變數",
-  "remove": "移除",
-  "availableVariables": "可用變數列表",
-  "partyA": "甲方",
-  "partyB": "乙方",
-  "partyC": "丙方",
-  "witness": "見證方",
-  "typeTitle": "標題",
-  "typeParagraph": "段落",
-  "typeRichText": "富文本",
-  "typeVariable": "變數",
-  "typeTable": "表格",
-  "typeSignatureZone": "簽名區",
-  "typeSealZone": "蓋章區",
-  "typeDateZone": "日期區",
-  "typeDivider": "分割線",
-  "typePageBreak": "分頁符",
-  "typeImage": "圖片"
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-TW/draw.json b/web/apps/web-ele/src/locales/langs/zh-TW/draw.json
deleted file mode 100644
index e56359a..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-TW/draw.json
+++ /dev/null
@@ -1,164 +0,0 @@
-{
-  "tool": {
-    "selection": "選擇",
-    "hand": "手形工具",
-    "rectangle": "矩形",
-    "ellipse": "橢圓",
-    "diamond": "菱形",
-    "line": "直線",
-    "arrow": "箭頭",
-    "freedraw": "自由繪製",
-    "text": "文字",
-    "image": "圖片",
-    "eraser": "橡皮擦",
-    "frame": "框架",
-    "laser": "雷射筆"
-  },
-  "action": {
-    "undo": "復原",
-    "redo": "重做",
-    "copy": "複製",
-    "cut": "剪下",
-    "paste": "貼上",
-    "duplicate": "複製元素",
-    "delete": "刪除",
-    "selectAll": "全選",
-    "zoomIn": "放大",
-    "zoomOut": "縮小",
-    "zoomToFit": "適應畫布",
-    "zoomToFitSelection": "適應選中元素",
-    "resetZoom": "重設縮放",
-    "exportPng": "匯出為 PNG",
-    "exportSvg": "匯出為 SVG",
-    "exportJson": "匯出為 JSON",
-    "save": "儲存",
-    "toggleGrid": "切換網格",
-    "toggleDarkMode": "切換深色模式",
-    "toggleSnap": "切換對齊吸附",
-    "toggleStats": "切換統計面板",
-    "toggleZenMode": "切換專注模式"
-  },
-  "property": {
-    "strokeColor": "描邊顏色",
-    "backgroundColor": "背景顏色",
-    "fillStyle": "填充樣式",
-    "strokeWidth": "描邊寬度",
-    "strokeStyle": "描邊樣式",
-    "roughness": "粗糙度",
-    "opacity": "透明度",
-    "fontSize": "字型大小",
-    "fontFamily": "字型",
-    "textAlign": "文字對齊",
-    "verticalAlign": "垂直對齊",
-    "arrowheadStart": "起點箭頭",
-    "arrowheadEnd": "終點箭頭",
-    "arrowType": "箭頭類型",
-    "arrowTypeStraight": "直線",
-    "arrowTypeRound": "曲線",
-    "arrowTypeElbow": "肘形",
-    "arrowTypeSharp": "折線",
-    "roundness": "圓角",
-    "edges": "邊角",
-    "edgesSharp": "直角",
-    "edgesRound": "圓角",
-    "sloppiness": "筆觸風格",
-    "link": "超連結",
-    "linkPlaceholder": "輸入連結位址...",
-    "mixed": "多選時屬性值不同",
-    "alignDistribute": "對齊與分佈",
-    "customColor": "自訂顏色",
-    "layers": "圖層",
-    "actions": "操作"
-  },
-  "fillStyle": {
-    "hachure": "線條填充",
-    "crossHatch": "交叉填充",
-    "solid": "實心填充",
-    "zigzag": "鋸齒填充",
-    "dots": "點狀填充",
-    "dashed": "虛線填充",
-    "zigzagLine": "鋸齒線填充"
-  },
-  "strokeStyle": {
-    "solid": "實線",
-    "dashed": "虛線",
-    "dotted": "點線"
-  },
-  "arrowhead": {
-    "none": "無",
-    "arrow": "箭頭",
-    "bar": "豎線",
-    "circle": "圓點",
-    "triangle": "三角形",
-    "diamond": "菱形"
-  },
-  "menu": {
-    "copy": "複製",
-    "cut": "剪下",
-    "paste": "貼上",
-    "duplicate": "建立副本",
-    "delete": "刪除",
-    "selectAll": "全選",
-    "layer": "圖層",
-    "bringToFront": "移到最前",
-    "sendToBack": "移到最後",
-    "bringForward": "上移一層",
-    "sendBackward": "下移一層",
-    "flip": "翻轉",
-    "flipH": "水平翻轉",
-    "flipV": "垂直翻轉",
-    "align": "對齊",
-    "alignLeft": "靠左對齊",
-    "alignCenter": "水平置中",
-    "alignRight": "靠右對齊",
-    "alignTop": "頂部對齊",
-    "alignMiddle": "垂直置中",
-    "alignBottom": "底部對齊",
-    "distributeH": "水平等距分佈",
-    "distributeV": "垂直等距分佈",
-    "group": "編組",
-    "ungroup": "取消編組",
-    "lock": "鎖定",
-    "unlock": "解鎖",
-    "addLink": "新增超連結",
-    "editLink": "編輯超連結",
-    "removeLink": "移除超連結",
-    "openLink": "開啟連結",
-    "toggleGrid": "切換網格",
-    "copyStyle": "複製樣式",
-    "pasteStyle": "貼上樣式",
-    "openFile": "開啟",
-    "saveTo": "儲存至...",
-    "export": "匯出",
-    "exportPng": "匯出為 PNG",
-    "exportSvg": "匯出為 SVG",
-    "exportJson": "匯出為 JSON",
-    "exportCopyPng": "複製為 PNG",
-    "exportCopySvg": "複製為 SVG"
-  },
-  "label": {
-    "thin": "細",
-    "bold": "粗",
-    "extraBold": "特粗",
-    "architect": "建築師",
-    "artist": "藝術家",
-    "cartoonist": "漫畫家"
-  },
-  "font": {
-    "handDrawn": "手繪",
-    "normal": "常規",
-    "code": "程式碼",
-    "assistant": "輔助"
-  },
-  "verticalAlign": {
-    "top": "頂部",
-    "middle": "置中",
-    "bottom": "底部"
-  },
-  "stats": {
-    "title": "統計資訊",
-    "elements": "元素數量",
-    "sceneSize": "畫布尺寸",
-    "multiSelected": "已選取 {count} 個元素"
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-TW/whiteboard.json b/web/apps/web-ele/src/locales/langs/zh-TW/whiteboard.json
deleted file mode 100644
index fd8cdde..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-TW/whiteboard.json
+++ /dev/null
@@ -1,124 +0,0 @@
-{
-  "tool": {
-    "select": "選擇",
-    "hand": "平移",
-    "pen": "畫筆",
-    "highlighter": "螢光筆",
-    "eraser": "橡皮擦",
-    "shape": "形狀",
-    "line": "直線",
-    "arrow": "箭頭",
-    "connector": "連接線",
-    "text": "文字",
-    "stickyNote": "便利貼",
-    "image": "圖片",
-    "frame": "畫框",
-    "laser": "雷射筆"
-  },
-  "shape": {
-    "rect": "矩形",
-    "roundedRect": "圓角矩形",
-    "circle": "圓形",
-    "ellipse": "橢圓",
-    "diamond": "菱形",
-    "triangle": "三角形",
-    "star": "五角星",
-    "hexagon": "六邊形",
-    "pentagon": "五邊形",
-    "octagon": "八邊形",
-    "parallelogram": "平行四邊形",
-    "cylinder": "橢圓",
-    "arrowRight": "右箭頭",
-    "arrowUp": "上箭頭",
-    "heart": "愛心",
-    "cloud": "雲朵",
-    "chatBubble": "對話框"
-  },
-  "action": {
-    "undo": "復原",
-    "redo": "重做",
-    "zoomIn": "放大",
-    "zoomOut": "縮小",
-    "zoomToFit": "適應畫布",
-    "resetZoom": "重設縮放",
-    "background": "背景",
-    "exportPng": "匯出 PNG",
-    "exportSvg": "匯出 SVG",
-    "exportJson": "匯出 JSON",
-    "save": "儲存",
-    "menu": "選單"
-  },
-  "background": {
-    "none": "無背景",
-    "dots": "點陣",
-    "grid": "網格",
-    "lines": "橫線"
-  },
-  "property": {
-    "title": "屬性",
-    "fill": "填充",
-    "stroke": "描邊",
-    "opacity": "透明度",
-    "fontSize": "字型大小",
-    "multiHint": "多選時可統一調整透明度；填充與描邊請單選編輯。"
-  },
-  "menu": {
-    "copy": "複製",
-    "cut": "剪下",
-    "paste": "貼上",
-    "duplicate": "建立副本",
-    "delete": "刪除",
-    "selectAll": "全選",
-    "bringToFront": "移到最前",
-    "sendToBack": "移到最後",
-    "bringForward": "上移一層",
-    "sendBackward": "下移一層",
-    "layer": "層級",
-    "copyStyle": "複製樣式",
-    "pasteStyle": "貼上樣式",
-    "lock": "鎖定",
-    "unlock": "解鎖",
-    "group": "編組",
-    "ungroup": "取消編組",
-    "copyAsImage": "複製為圖片",
-    "copiedToClipboard": "已複製到剪貼簿",
-    "copyFailed": "複製失敗，請檢查瀏覽器權限",
-    "flipH": "水平翻轉",
-    "flipV": "垂直翻轉",
-    "rotate": "旋轉",
-    "rotateCW": "順時針旋轉 90°",
-    "rotateCCW": "逆時針旋轉 90°",
-    "rotate180": "旋轉 180°",
-    "align": "對齊",
-    "alignLeft": "靠左對齊",
-    "alignCenter": "水平置中",
-    "alignRight": "靠右對齊",
-    "alignTop": "頂部對齊",
-    "alignMiddle": "垂直置中",
-    "alignBottom": "底部對齊",
-    "distributeH": "水平等距分佈",
-    "distributeV": "垂直等距分佈"
-  },
-  "toolbar": {
-    "changeShape": "更改圖形",
-    "borderStyle": "邊框樣式",
-    "textStyle": "文字樣式",
-    "textColor": "文字顏色",
-    "bgColor": "背景顏色"
-  },
-  "connector": {
-    "startStyle": "起點樣式",
-    "endStyle": "終點樣式",
-    "swapDirection": "箭頭方向",
-    "lineStyle": "連線樣式",
-    "endNone": "無",
-    "endArrow": "箭頭",
-    "orthogonal": "正交",
-    "straight": "直線",
-    "straightLine": "直線",
-    "straightArrow": "箭頭",
-    "elbowConnector": "折線連接"
-  },
-  "penWidth": "畫筆粗細",
-  "penColor": "畫筆顏色"
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-TW/wiki.json b/web/apps/web-ele/src/locales/langs/zh-TW/wiki.json
deleted file mode 100644
index 20f7e1e..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-TW/wiki.json
+++ /dev/null
@@ -1,56 +0,0 @@
-{
-  "title": "文件庫",
-  "description": "團隊知識管理與文件協作",
-  "createSpace": "新建文件庫",
-  "spaceName": "文件庫名稱",
-  "spaceNamePlaceholder": "請輸入文件庫名稱",
-  "spaceDescription": "描述",
-  "spaceDescriptionPlaceholder": "簡要描述文件庫的用途",
-  "category": "分類",
-  "categoryDefault": "預設",
-  "categoryTech": "技術",
-  "categoryProduct": "產品",
-  "categoryDesign": "設計",
-  "categoryBusiness": "業務",
-  "categoryOther": "其他",
-  "visibility": "可見性",
-  "private": "私有",
-  "team": "團隊可見",
-  "public": "公開",
-  "emptySpaces": "暫無文件庫",
-  "emptySpacesHint": "建立一個文件庫來組織團隊知識",
-  "emptyDocuments": "暫無文件",
-  "emptyDocumentsHint": "點擊上方按鈕建立第一篇文件",
-  "addDocument": "新建文件",
-  "addSubPage": "新建子頁面",
-  "spaceSettings": "文件庫設定",
-  "deleteSpace": "刪除文件庫",
-  "deleteSpaceConfirm": "確定要刪除文件庫「{name}」嗎？庫內所有文件將被移至回收站。",
-  "deleteDocument": "刪除文件",
-  "deleteDocumentConfirm": "確定要刪除文件「{name}」嗎？",
-  "documentCount": "{count} 篇文件",
-  "createdBy": "建立者",
-  "updatedAt": "更新於",
-  "untitled": "無標題文件",
-  "backToList": "返回文件庫列表",
-  "rename": "重新命名",
-  "searchPlaceholder": "搜尋文件庫...",
-  "searchDocPlaceholder": "搜尋文件...",
-  "saving": "儲存中...",
-  "autoSaved": "已自動儲存",
-  "allSpaces": "全部文件庫",
-  "mySpaces": "我的文件庫",
-  "icon": "圖示",
-  "cover": "封面",
-  "avatar": "頭像",
-  "avatarHint": "為文件庫選擇一個頭像",
-  "noResults": "未找到匹配結果",
-  "myDocuments": "我的文件",
-  "wikiSpaces": "知識庫",
-  "emptyMyDocs": "暫無個人文件",
-  "emptyMyDocsHint": "在此建立不屬於任何知識庫的個人文件",
-  "newBlankDoc": "空白文件",
-  "newFromTemplate": "從範本建立",
-  "editSpace": "編輯文件庫",
-  "editSpaceSuccess": "文件庫已更新"
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-TW/workflow-designer.json b/web/apps/web-ele/src/locales/langs/zh-TW/workflow-designer.json
deleted file mode 100644
index 31e30a1..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-TW/workflow-designer.json
+++ /dev/null
@@ -1,709 +0,0 @@
-{
-  "designer": {
-    "title": "流程設計器",
-    "flowName": "流程名稱",
-    "flowNamePlaceholder": "請輸入流程名稱",
-    "save": "保存",
-    "preview": "預覽",
-    "publish": "發布",
-    "undo": "撤銷",
-    "redo": "重做",
-    "saveFirst": "請先保存流程",
-    "isDirty": "有未保存的更改",
-    "saveSuccess": "保存成功",
-    "publishSuccess": "發布成功",
-    "previewInfo": "預覽功能開發中",
-    "deleteNodeConfirm": "確定要刪除此節點嗎？",
-    "deleteBranchConfirm": "確定要刪除此條件分支嗎？",
-    "tips": "提示",
-    "readonlyTip": "唯讀模式，不可編輯",
-    "embeddedTip": "嵌入模式",
-    "minimap": "縮略圖"
-  },
-  "preview": {
-    "title": "流程預覽",
-    "unnamedFlow": "未命名流程",
-    "relatedForm": "關聯表單",
-    "nodeDetail": "節點詳情",
-    "statistics": {
-      "approval": "個審批",
-      "copy": "個抄送",
-      "branch": "個分支"
-    },
-    "assigneeTypes": {
-      "user": "指定成員",
-      "role": "指定角色",
-      "department": "指定部門",
-      "formField": "從表單中獲取",
-      "initiator": "發起人自己",
-      "manager": "直屬經理",
-      "superior": "上級主管"
-    },
-    "multiApproval": {
-      "sequential": "依次審批",
-      "parallel": "會簽（所有人通過）",
-      "any": "或簽（一人通過即可）"
-    },
-    "multiHandle": {
-      "sequential": "依次辦理",
-      "all": "全部辦理",
-      "any": "任一辦理"
-    },
-    "sections": {
-      "approvalSettings": "審批人設置",
-      "handleSettings": "辦理人設置",
-      "copySettings": "抄送人設置",
-      "delaySettings": "延時設置",
-      "notifySettings": "通知設置",
-      "serviceSettings": "服務調用設置",
-      "subflowSettings": "子流程設置",
-      "dataUpdateSettings": "欄位更新設置",
-      "formPermissions": "表單欄位權限",
-      "conditionBranches": "條件分支",
-      "parallelBranches": "並行分支"
-    },
-    "labels": {
-      "approverType": "審批人類型",
-      "approvers": "審批人",
-      "handlerType": "辦理人類型",
-      "handlers": "辦理人",
-      "copyType": "抄送人類型",
-      "copyRecipients": "抄送人",
-      "specifiedRole": "指定角色",
-      "specifiedDept": "指定部門",
-      "superiorLevel": "上級層級",
-      "level": "第",
-      "levelSuffix": "級",
-      "superior": "主管",
-      "manager": "經理",
-      "multiApproval": "多人審批",
-      "multiHandle": "多人辦理方式",
-      "timeoutSettings": "超時設置",
-      "hoursLater": "小時後",
-      "autoApprove": "自動通過",
-      "autoReject": "自動拒絕",
-      "waitDuration": "等待時長",
-      "notifyRecipient": "通知對象",
-      "notifyChannel": "通知渠道",
-      "notifyTitle": "通知標題",
-      "notSet": "未設置",
-      "serviceName": "服務名稱",
-      "requestMethod": "請求方法",
-      "requestUrl": "請求地址",
-      "timeoutDuration": "超時時間",
-      "seconds": "秒",
-      "subflow": "子流程",
-      "executionMode": "執行方式",
-      "syncExecution": "同步執行",
-      "asyncExecution": "異步執行",
-      "variablePass": "變量傳遞",
-      "passAllVariables": "傳遞所有變量",
-      "passSelectedVariables": "選擇傳遞",
-      "noVariablePass": "不傳遞",
-      "branchCount": "分支數量",
-      "nodeType": "節點類型",
-      "description": "說明"
-    },
-    "permissions": {
-      "editable": "可編輯",
-      "readonly": "唯讀",
-      "hidden": "隱藏"
-    },
-    "descriptions": {
-      "delay": "流程將在此節點暫停，等待指定時間後自動繼續執行",
-      "notify": "流程到達此節點時將自動發送通知",
-      "service": "流程到達此節點時將自動調用配置的服務",
-      "subflow": "流程到達此節點時將調用子流程",
-      "data_update": "流程到達此節點時將自動更新表單欄位值"
-    },
-    "conditionConfigured": "已配置{count}個條件組",
-    "conditionNotConfigured": "未配置條件",
-    "branchCountValue": "{count}個分支",
-    "parallelExecutionDesc": "所有分支同時執行，全部完成後繼續",
-    "branch": "分支",
-    "startNodeDesc": "所有人可發起流程",
-    "endNodeDesc": "流程結束"
-  },
-  "nodes": {
-    "start": {
-      "name": "發起人",
-      "title": "發起人",
-      "desc": "流程發起人",
-      "placeholder": "所有人"
-    },
-    "approval": {
-      "name": "審批人",
-      "title": "審批人",
-      "desc": "添加審批人節點",
-      "placeholder": "請設置審批人",
-      "multiApproval": {
-        "sequential": "依次審批",
-        "parallel": "會簽",
-        "any": "或簽"
-      },
-      "summary": {
-        "department": "個部門",
-        "formField": "從表單中獲取",
-        "initiator": "發起人",
-        "manager": "級經理",
-        "role": "個角色",
-        "superior": "級主管",
-        "user": "位成員",
-        "prefix": "第"
-      }
-    },
-    "handle": {
-      "name": "辦理人",
-      "title": "辦理人",
-      "desc": "添加辦理人節點",
-      "placeholder": "請設置辦理人",
-      "multiHandle": {
-        "sequential": "依次辦理",
-        "all": "全部辦理",
-        "any": "任一辦理"
-      },
-      "summary": {
-        "department": "個部門",
-        "formField": "從表單中獲取",
-        "initiator": "發起人",
-        "manager": "級經理",
-        "role": "個角色",
-        "superior": "級主管",
-        "user": "位成員",
-        "prefix": "第"
-      }
-    },
-    "copy": {
-      "name": "抄送人",
-      "title": "抄送人",
-      "desc": "添加抄送人節點",
-      "placeholder": "請設置抄送人",
-      "summary": {
-        "department": "個部門",
-        "formField": "從表單中獲取",
-        "initiator": "發起人",
-        "role": "個角色",
-        "user": "位成員"
-      }
-    },
-    "delay": {
-      "name": "延時等待",
-      "title": "延時等待",
-      "desc": "等待指定時間後繼續",
-      "placeholder": "請設置延時時長",
-      "summary": {
-        "minute": "分鐘",
-        "hour": "小時",
-        "day": "天",
-        "workday": "工作日",
-        "wait": "等待"
-      }
-    },
-    "notify": {
-      "name": "發送通知",
-      "title": "發送通知",
-      "desc": "發送消息通知",
-      "placeholder": "請設置通知對象",
-      "summary": {
-        "department": "個部門",
-        "formField": "從表單中獲取",
-        "initiator": "發起人",
-        "role": "個角色",
-        "user": "位成員",
-        "channels": "通知渠道"
-      }
-    },
-    "service": {
-      "name": "服務調用",
-      "title": "服務調用",
-      "desc": "調用外部服務或API",
-      "placeholder": "請配置服務調用",
-      "summary": {
-        "url": "請求地址",
-        "notConfigured": "未配置"
-      }
-    },
-    "subflow": {
-      "name": "子流程",
-      "title": "子流程",
-      "desc": "調用其他流程",
-      "placeholder": "請選擇子流程",
-      "summary": {
-        "notSelected": "未選擇",
-        "sync": "同步",
-        "async": "異步"
-      }
-    },
-    "data_update": {
-      "name": "欄位更新",
-      "title": "欄位更新",
-      "desc": "自動更新表單欄位值",
-      "placeholder": "請添加更新規則",
-      "summary": {
-        "ruleCount": "已配置 {count} 條更新規則",
-        "crossForm": "跨表單更新"
-      }
-    },
-    "condition": {
-      "name": "條件分支",
-      "title": "條件分支",
-      "desc": "添加條件分支",
-      "priority": "優先級",
-      "conditionBranch": "條件{num}",
-      "defaultBranch": "默認條件",
-      "defaultBranchDesc": "其他條件進入此分支",
-      "pleaseSetCondition": "請設置條件",
-      "addCondition": "添加條件"
-    },
-    "parallel": {
-      "name": "并行分支",
-      "desc": "添加并行分支，同時執行",
-      "branchFallback": "分支{num}"
-    },
-    "end": {
-      "name": "結束",
-      "title": "流程結束",
-      "desc": "流程結束"
-    }
-  },
-  "property": {
-    "title": {
-      "condition": "條件配置",
-      "start": "發起人設置",
-      "approval": "審批人設置",
-      "handle": "辦理人設置",
-      "copy": "抄送人設置",
-      "delay": "延時設置",
-      "notify": "通知設置",
-      "service": "服務調用設置",
-      "subflow": "子流程設置",
-      "dataUpdate": "欄位更新設置",
-      "conditionBranch": "條件分支設置",
-      "parallelBranch": "並行分支設置",
-      "end": "結束設置",
-      "node": "節點設置"
-    },
-    "base": {
-      "nodeName": "節點名稱",
-      "nodeNamePlaceholder": "請輸入節點名稱",
-      "nodeNameHint": "自訂名稱將顯示於設計器、流程圖、審批路徑與審批記錄；留空則顯示節點類型預設名稱"
-    },
-    "assignee": {
-      "type": "審批人類型",
-      "handleType": "辦理人類型",
-      "copyType": "抄送人類型",
-      "selectUser": "選擇成員",
-      "selectRole": "選擇角色",
-      "selectDept": "選擇部門",
-      "userPlaceholder": "請選擇審批人",
-      "rolePlaceholder": "請選擇角色",
-      "deptPlaceholder": "請選擇部門",
-      "superiorLevel": "上級層級",
-      "superiorHint": "1 = 當前部門領導，2 = 父部門領導，以此類推",
-      "managerHint": "1 = 直屬經理，2 = 經理的經理，以此類推",
-      "initiatorHint": "審批人為流程發起人本人",
-      "copyInitiatorHint": "抄送給流程發起人本人",
-      "handleInitiatorHint": "辦理人為流程發起人本人",
-      "selectField": "選擇字段",
-      "fieldPlaceholder": "請選擇用戶類型的表單字段",
-      "noUserField": "當前表單沒有用戶選擇類型的字段",
-      "fieldSingle": "單選",
-      "fieldMultiple": "多選",
-      "fieldTypeUser": "用戶",
-      "fieldTypeForm": "表單",
-      "noSourceField": "當前表單沒有用戶選擇器或表單選擇器類型的欄位",
-      "formFieldHint": "運行時將從所選欄位中獲取用戶ID，支援多選多個欄位，合併去重後作為人員列表",
-      "userFieldMapping": "用戶欄位映射",
-      "userFieldPlaceholder": "請選擇引用表單中的用戶欄位",
-      "userFieldHint": "表單選擇器儲存的是關聯記錄的ID，需指定從關聯記錄中取哪個用戶欄位作為人員",
-      "types": {
-        "user": "指定成員",
-        "role": "指定角色",
-        "department": "指定部門",
-        "superior": "上級主管",
-        "manager": "直屬經理",
-        "initiator": "發起人自己",
-        "form_field": "從表單中獲取"
-      }
-    },
-    "multiApproval": {
-      "label": "多人審批時",
-      "any": "或簽（一人通過即可）",
-      "parallel": "會簽（所有人通過）",
-      "sequential": "依次審批"
-    },
-    "multiHandle": {
-      "label": "多人辦理時",
-      "any": "任一辦理（一人完成即可）",
-      "all": "全部辦理（所有人完成）",
-      "sequential": "依次辦理"
-    },
-    "timeout": {
-      "label": "超時設置",
-      "enable": "啟用超時處理",
-      "time": "超時時間",
-      "action": "超時處理方式",
-      "notifyType": "通知方式",
-      "unit": {
-        "minute": "分鐘",
-        "hour": "小時",
-        "day": "天",
-        "workday": "工作日"
-      },
-      "actions": {
-        "notify": "僅通知",
-        "auto_approve": "自動通過",
-        "auto_reject": "自動拒絕"
-      }
-    },
-    "notify": {
-      "label": "通知設置",
-      "approver": "通知審批人",
-      "initiator": "通知發起人",
-      "recipient": "通知對象",
-      "recipientType": "通知對象類型",
-      "whenTaskCreated": "任務創建時",
-      "onApprove": "通過時",
-      "onReject": "拒絕時",
-      "onHandleComplete": "辦理完成時",
-      "channels": "通知渠道",
-      "channelPlaceholder": "請選擇通知渠道",
-      "title": "通知標題",
-      "titlePlaceholder": "請輸入通知標題",
-      "content": "通知內容",
-      "contentPlaceholder": "請輸入通知內容，可使用 {'${字段名}'} 引用表單字段",
-      "variableDesc": "變量說明",
-      "initiatorVar": "{'${發起人}'} - 流程發起人姓名",
-      "flowNameVar": "{'${流程名稱}'} - 當前流程名稱",
-      "fieldVar": "{'${字段名}'} - 表單字段值",
-      "channelTypes": {
-        "site": "站內信",
-        "chat": "聊天通知",
-        "email": "郵件",
-        "sms": "短信",
-        "wechat": "微信",
-        "dingtalk": "釘釘",
-        "feishu": "飛書",
-        "dingtalkTodo": "釘釘待辦"
-      }
-    },
-    "signature": {
-      "label": "簽名設置",
-      "required": "要求簽名",
-      "hint": "啟用後，審批人通過時必須手寫簽名"
-    },
-    "action": {
-      "label": "操作權限",
-      "hint": "設置審批人在此節點可以執行的操作，可自定義按鈕名稱",
-      "descriptions": {
-        "approve": "同意審批，流程繼續",
-        "reject": "拒絶審批，終止流程",
-        "return": "退回上一步或發起人重新提交",
-        "delegate": "委託他人代為審批，完成后回到自己",
-        "transfer": "轉交他人處理，自己不再參與",
-        "add_sign": "增加審批人，可前加簽或後加簽",
-        "reduce_sign": "減少審批人（僅會簽模式可用）"
-      },
-      "tips": {
-        "title": "操作說明",
-        "approveReject": "通過/拒絶：基礎操作，建議至少保留一個",
-        "return": "駁回：可退回到上一節點或發起人",
-        "delegate": "委派：臨時委託，完成后任務回到委派人",
-        "transfer": "轉辦：永久轉交，自己不再處理",
-        "addSign": "加簽：在當前節點增加審批人",
-        "reduceSign": "減簽：僅會簽模式可用，減少審批人"
-      },
-      "types": {
-        "approve": "通過",
-        "reject": "拒絶",
-        "return": "駁回",
-        "delegate": "委派",
-        "transfer": "轉辦",
-        "add_sign": "加簽",
-        "reduce_sign": "減簽"
-      }
-    },
-    "permission": {
-      "label": "字段權限",
-      "hint": "設置審批人在此節點可以查看和編輯的表單字段"
-    },
-    "parallelBranch": {
-      "name": "分支名稱",
-      "namePlaceholder": "請輸入分支名稱",
-      "addBranch": "添加分支"
-    },
-    "startNode": {
-      "title": "發起人節點",
-      "hint": "所有有權限的用戶都可以發起此流程",
-      "permissionHint": "設置發起人在填寫表單時各欄位的權限（可編輯/唯讀/隱藏）"
-    },
-    "segment": {
-      "approver": "審批人",
-      "actions": "操作權限",
-      "permissions": "字段權限",
-      "handler": "辦理人設置"
-    },
-    "delay": {
-      "title": "延時設置",
-      "duration": "延時時長",
-      "hint": "設置流程等待的時間，到達指定時間後自動繼續執行",
-      "urlPlaceholder": "https://api.example.com/endpoint",
-      "method": "請求方法",
-      "headers": "請求頭",
-      "headerName": "Header名稱",
-      "headerValue": "Header值",
-      "addHeader": "添加請求頭",
-      "params": "請求參數",
-      "body": "請求體",
-      "advancedSettings": "高級設置",
-      "timeout": "超時時間（秒）",
-      "retry": "重試次數",
-      "failAction": "失敗處理",
-      "resultVar": "結果存儲變量",
-      "resultVarPlaceholder": "存儲響應結果的變量名（可選）",
-      "resultVarHint": "響應結果將存入此變量，可在後續節點中使用",
-      "variableDesc": "變量說明",
-      "paramFieldVar": "請求參數中可使用 {'${字段名}'} 引用表單字段",
-      "resultVarUsage": "響應結果可通過變量名在條件分支中使用",
-      "failActions": {
-        "continue": "繼續執行",
-        "stop": "終止流程",
-        "retry": "自動重試"
-      }
-    },
-    "subflow": {
-      "title": "子流程設置",
-      "select": "選擇子流程",
-      "selectPlaceholder": "請選擇要調用的子流程",
-      "selectWarning": "請選擇一個子流程",
-      "flowId": "流程ID",
-      "flowName": "流程名稱",
-      "unnamed": "未命名",
-      "varPass": "變量傳遞",
-      "varPassHint": "配置主流程向子流程傳遞的變量數據",
-      "varPassMode": "傳遞方式",
-      "selectVars": "選擇變量",
-      "selectVarsPlaceholder": "請選擇要傳遞的變量",
-      "selectVarsHint": "選擇需要傳遞給子流程的表單字段",
-      "varMapping": "變量映射規則",
-      "mappingRule1": "主流程變量將按名稱自動映射到子流程",
-      "mappingRule2": "同名變量將被覆蓋，不同名變量將被忽略",
-      "executionSettings": "執行設置",
-      "executionMode": "執行模式",
-      "sync": "同步執行",
-      "syncDesc": "等待子流程完成后繼續",
-      "async": "異步執行",
-      "asyncDesc": "啟動子流程後立即繼續",
-      "resultMode": "結果處理",
-      "ignoreResult": "忽略子流程結果",
-      "saveResult": "保存子流程結果",
-      "resultVarName": "結果變量名",
-      "resultVarPlaceholder": "請輸入變量名，如: subflowResult",
-      "resultVarHint": "子流程的審批結果將存入此變量，可在後續節點中使用",
-      "asyncWarning": "異步執行注意事項",
-      "asyncWarning1": "主流程不會等待子流程完成",
-      "asyncWarning2": "無法獲取子流程的執行結果",
-      "asyncWarning3": "子流程失敗不會影響主流程",
-      "varPassModes": {
-        "all": "傳遞所有變量",
-        "selected": "選擇傳遞變量",
-        "none": "不傳遞變量"
-      }
-    },
-    "dataUpdate": {
-      "title": "欄位更新設置",
-      "description": "流程到達此節點時，將按照配置的規則自動更新表單欄位值。",
-      "targetForm": "目標表單",
-      "targetFormPlaceholder": "請選擇要更新的表單",
-      "currentForm": "當前表單",
-      "matchCondition": "匹配條件",
-      "matchConditionHint": "指定當前表單與目標表單的欄位關聯關係，用於定位要更新的目標記錄。",
-      "sourceField": "當前表單欄位",
-      "sourceFieldPlaceholder": "請選擇當前表單欄位",
-      "targetMatchField": "目標表單欄位",
-      "targetMatchFieldPlaceholder": "請選擇目標表單欄位",
-      "updateScope": "更新範圍",
-      "updateScopeFirst": "僅更新第一條",
-      "updateScopeAll": "更新全部匹配記錄",
-      "rulesTitle": "更新規則",
-      "targetField": "目標欄位",
-      "targetFieldPlaceholder": "請選擇要更新的欄位",
-      "valueType": "值類型",
-      "value": "值",
-      "constantPlaceholder": "請輸入常量值",
-      "fieldPlaceholder": "請選擇來源欄位",
-      "formulaPlaceholder": "請輸入運算式，如: {{price}} * {{quantity}}",
-      "formulaHint": "使用 {{欄位名}} 引用表單欄位，支援四則運算（+、-、*、/）",
-      "systemPlaceholder": "請選擇系統變量",
-      "addRule": "添加更新規則",
-      "noRulesHint": "暫無更新規則，請點擊上方按鈕添加。",
-      "valueTypes": {
-        "constant": "常量值",
-        "field": "欄位引用",
-        "formula": "運算式",
-        "system": "系統變量"
-      },
-      "systemVars": {
-        "currentTime": "當前時間",
-        "currentDate": "當前日期",
-        "currentUser": "當前操作人",
-        "initiator": "流程發起人",
-        "instanceNo": "流程編號",
-        "instanceTitle": "流程標題"
-      }
-    }
-  },
-  "condition": {
-    "title": "條件組",
-    "and": "且",
-    "or": "或",
-    "andHint": "組內條件為「且」關係",
-    "addCondition": "添加條件",
-    "addGroup": "添加條件組",
-    "emptyHint": "暫無條件，點擊下方按鈕添加",
-    "selectField": "選擇字段",
-    "selectOperator": "選擇條件",
-    "inputValue": "輸入值",
-    "inputNumber": "輸入數值",
-    "selectDate": "選擇日期",
-    "selectValue": "選擇值",
-    "operators": {
-      "eq": "等於",
-      "ne": "不等於",
-      "gt": "大於",
-      "gte": "大於等於",
-      "lt": "小於",
-      "lte": "小於等於",
-      "contains": "包含",
-      "not_contains": "不包含",
-      "in": "在...中",
-      "not_in": "不在...中",
-      "empty": "為空",
-      "not_empty": "不為空"
-    }
-  },
-  "detail": {
-    "title": "流程詳情",
-    "tabs": {
-      "progress": "流程進度",
-      "form": "表單內容",
-      "flowchart": "流程圖",
-      "flowProgress": "審批路徑"
-    },
-    "currentPending": "當前待辦",
-    "flowInfo": "流程資訊",
-    "approvalRecord": "審批記錄",
-    "flowTitle": "流程標題",
-    "flowType": "流程類型",
-    "flowStatus": "流程狀態",
-    "flowNo": "流程編號",
-    "initiator": "發起人",
-    "currentNode": "當前節點",
-    "startTime": "發起時間",
-    "completeTime": "完成時間",
-    "duration": "流程耗時",
-    "unknownNode": "未知節點",
-    "start": "開始",
-    "noData": "暫無資料",
-    "noApprovalRecord": "暫無審批記錄",
-    "noFormContent": "暫無表單內容",
-    "loadDataFailed": "載入資料失敗",
-    "loadFormDataFailed": "載入表單資料失敗",
-    "systemAuto": "系統自動",
-    "person": "人",
-    "timeout": "已超時",
-    "waiting": "等待中",
-    "daysLater": "天後",
-    "hoursLater": "小時",
-    "minutesLater": "分鐘",
-    "days": "天",
-    "hours": "小時",
-    "minutes": "分鐘",
-    "status": {
-      "pending": "審批中",
-      "approved": "已通過",
-      "rejected": "已拒絕",
-      "cancelled": "已撤回"
-    },
-    "actions": {
-      "start": "發起流程",
-      "approve": "審批通過",
-      "reject": "審批拒絕",
-      "return": "駁回",
-      "transfer": "轉辦",
-      "delegate": "委派",
-      "add_sign": "加簽",
-      "revise": "重新提交",
-      "cancel": "撤回",
-      "copy": "抄送",
-      "handle": "辦理",
-      "urge": "催辦",
-      "task_timeout": "任務超時",
-      "task_timeout_notify": "超時提醒",
-      "task_auto_approve": "超時自動通過",
-      "task_auto_reject": "超時自動拒絕",
-      "delay_start": "開始延時",
-      "delay_complete": "延時結束",
-      "delay_skip": "延時跳過",
-      "notify": "發送通知",
-      "parallel_start": "進入並行",
-      "parallel_complete": "並行完成",
-      "subflow_start": "啟動子流程",
-      "subflow_complete": "子流程完成",
-      "data_update": "欄位更新",
-      "condition": "條件分支"
-    },
-    "flowProgress": {
-      "returnRecords": "駁回記錄",
-      "noData": "暫無流程進度資料",
-      "loadFailed": "載入流程進度失敗",
-      "delayWaiting": "延時等待中，預計恢復時間：",
-      "pending": "待處理",
-      "waiting": "等待中",
-      "skipped": "已跳過",
-      "copied": "已抄送",
-      "nodeTypes": {
-        "start": "開始",
-        "end": "結束",
-        "approval": "審批",
-        "handle": "辦理",
-        "copy": "抄送",
-        "condition": "條件",
-        "parallel": "並行",
-        "delay": "延時",
-        "notify": "通知",
-        "service": "服務",
-        "subflow": "子流程",
-        "data_update": "欄位更新"
-      },
-      "nodeStatus": {
-        "completed": "已完成",
-        "active": "進行中",
-        "pending": "待執行",
-        "skipped": "已跳過",
-        "rejected": "已拒絕"
-      },
-      "actions": {
-        "approve": "通過",
-        "reject": "拒絕",
-        "return": "駁回",
-        "transfer": "轉交",
-        "delegate": "委派",
-        "handle": "辦理",
-        "add_sign": "加簽"
-      },
-      "signTypes": {
-        "before": "前加簽",
-        "after": "後加簽",
-        "parallel": "並行加簽"
-      },
-      "extraActions": {
-        "add_sign": "加簽",
-        "reduce_sign": "減簽",
-        "transfer": "轉交",
-        "delegate": "委派",
-        "return": "駁回"
-      }
-    }
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-TW/workflow-designer.json_new b/web/apps/web-ele/src/locales/langs/zh-TW/workflow-designer.json_new
deleted file mode 100644
index e69de29..0000000
diff --git a/web/apps/web-ele/src/locales/langs/zh-TW/zq-editor.json b/web/apps/web-ele/src/locales/langs/zh-TW/zq-editor.json
deleted file mode 100644
index c5e4f6b..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-TW/zq-editor.json
+++ /dev/null
@@ -1,251 +0,0 @@
-{
-  "placeholder": "輸入 / 開啟命令選單...",
-  "slash": {
-    "noResult": "未找到匹配的命令",
-    "category": {
-      "text": "文字",
-      "list": "列表",
-      "media": "媒體",
-      "advanced": "進階",
-      "diagram": "圖表"
-    },
-    "text": "正文",
-    "textDesc": "普通段落文字",
-    "heading1": "標題 1",
-    "heading1Desc": "大標題",
-    "heading2": "標題 2",
-    "heading2Desc": "中標題",
-    "heading3": "標題 3",
-    "heading3Desc": "小標題",
-    "bulletList": "無序列表",
-    "bulletListDesc": "建立無序列表",
-    "orderedList": "有序列表",
-    "orderedListDesc": "建立有序列表",
-    "taskList": "任務列表",
-    "taskListDesc": "建立帶核取方塊的任務列表",
-    "blockquote": "引用",
-    "blockquoteDesc": "建立引用區塊",
-    "codeBlock": "程式碼區塊",
-    "codeBlockDesc": "建立程式碼區塊",
-    "divider": "分隔線",
-    "dividerDesc": "插入分隔線",
-    "table": "表格",
-    "tableDesc": "插入表格",
-    "image": "圖片",
-    "imageDesc": "上傳或嵌入圖片",
-    "callout": "提示區塊",
-    "calloutDesc": "插入醒目的提示訊息",
-    "toggle": "摺疊區塊",
-    "toggleDesc": "建立可摺疊/展開的內容區塊",
-    "columns": "多欄佈局",
-    "columnsDesc": "插入兩欄並排佈局",
-    "toc": "目錄",
-    "tocDesc": "根據標題自動產生目錄",
-    "inlineMath": "行內公式",
-    "inlineMathDesc": "插入行內數學公式",
-    "video": "影片",
-    "videoDesc": "上傳影片檔案",
-    "attachment": "附件",
-    "attachmentDesc": "上傳任意類型檔案",
-    "embed": "嵌入連結",
-    "embedDesc": "插入 URL 預覽卡片",
-    "emoji": "表情",
-    "emojiDesc": "插入表情符號",
-    "whiteboard": "畫板",
-    "whiteboardDesc": "建立可繪製的畫板",
-    "draw": "繪圖板",
-    "drawDesc": "建立手繪風格的繪圖板"
-  },
-  "whiteboard": {
-    "title": "畫板",
-    "edit": "編輯",
-    "close": "關閉",
-    "delete": "刪除",
-    "saveAndClose": "儲存並關閉",
-    "clickToCreate": "點擊建立畫板"
-  },
-  "draw": {
-    "title": "繪圖板",
-    "edit": "編輯",
-    "close": "關閉",
-    "delete": "刪除",
-    "saveAndClose": "儲存並關閉",
-    "clickToCreate": "點擊建立繪圖板",
-    "dblclickToEdit": "雙擊編輯"
-  },
-  "bubble": {
-    "turnInto": "轉換為",
-    "bold": "粗體",
-    "italic": "斜體",
-    "underline": "底線",
-    "strikethrough": "刪除線",
-    "code": "行內程式碼",
-    "highlight": "螢光標記",
-    "link": "連結",
-    "alignLeft": "靠左對齊",
-    "alignCenter": "置中",
-    "alignRight": "靠右對齊",
-    "fontSize": "字型大小",
-    "fontSizeDefault": "預設",
-    "emoji": "表情"
-  },
-  "turnInto": {
-    "text": "正文",
-    "heading1": "標題 1",
-    "heading2": "標題 2",
-    "heading3": "標題 3",
-    "bulletList": "無序列表",
-    "orderedList": "有序列表",
-    "taskList": "任務列表",
-    "blockquote": "引用",
-    "codeBlock": "程式碼區塊"
-  },
-  "color": {
-    "textColor": "文字顏色",
-    "highlightColor": "背景顏色",
-    "default": "預設",
-    "gray": "灰色",
-    "brown": "棕色",
-    "orange": "橙色",
-    "yellow": "黃色",
-    "green": "綠色",
-    "blue": "藍色",
-    "purple": "紫色",
-    "pink": "粉色",
-    "red": "紅色",
-    "none": "無",
-    "cyan": "青色"
-  },
-  "link": {
-    "placeholder": "輸入連結網址...",
-    "confirm": "確定",
-    "cancel": "取消"
-  },
-  "table": {
-    "moveUp": "上移列",
-    "moveDown": "下移列",
-    "moveLeft": "左移欄",
-    "moveRight": "右移欄",
-    "insertRowAbove": "在上方插入列",
-    "insertRowBelow": "在下方插入列",
-    "insertColumnLeft": "在左側插入欄",
-    "insertColumnRight": "在右側插入欄",
-    "color": "顏色",
-    "clearColumn": "清空欄內容",
-    "duplicateRow": "在下方插入列",
-    "duplicateColumn": "在右側插入欄",
-    "deleteRow": "刪除列",
-    "deleteColumn": "刪除欄",
-    "defaultColor": "預設",
-    "lightGray": "淺灰",
-    "lightRed": "淺紅",
-    "lightOrange": "淺橙",
-    "lightYellow": "淺黃",
-    "lightGreen": "淺綠",
-    "lightBlue": "淺藍",
-    "lightPurple": "淺紫",
-    "lightPink": "淺粉",
-    "mergeCells": "合併儲存格",
-    "splitCell": "拆分儲存格",
-    "toggleHeaderRow": "切換表頭列",
-    "toggleHeaderColumn": "切換表頭欄",
-    "deleteTable": "刪除表格",
-    "cellAlign": "儲存格對齊",
-    "cellAlignLeft": "靠左對齊",
-    "cellAlignCenter": "置中對齊",
-    "cellAlignRight": "靠右對齊",
-    "fullWidth": "全寬顯示",
-    "stripedRows": "斑馬紋",
-    "sortAsc": "升序排列",
-    "sortDesc": "降序排列",
-    "clearCell": "清空儲存格",
-    "sizePicker": "選擇表格尺寸",
-    "sizePickerHint": "{rows} × {cols} 表格"
-  },
-  "callout": {
-    "info": "資訊",
-    "warning": "警告",
-    "success": "成功",
-    "error": "錯誤"
-  },
-  "toggle": {
-    "placeholder": "摺疊標題...",
-    "empty": "空內容，點擊展開後編輯"
-  },
-  "toc": {
-    "title": "目錄",
-    "empty": "新增標題後，目錄將自動產生",
-    "untitled": "無標題"
-  },
-  "image": {
-    "alignment": "對齊",
-    "alignLeft": "靠左對齊",
-    "alignCenter": "置中",
-    "alignRight": "靠右對齊",
-    "size": "尺寸",
-    "small": "小圖",
-    "medium": "中圖",
-    "large": "大圖",
-    "reset": "重設大小",
-    "delete": "刪除",
-    "caption": "新增說明...",
-    "uploading": "上傳中...",
-    "uploadFailed": "上傳失敗",
-    "loadFailed": "圖片載入失敗",
-    "retry": "重試"
-  },
-  "video": {
-    "delete": "刪除",
-    "uploading": "上傳中..."
-  },
-  "attachment": {
-    "download": "下載",
-    "delete": "刪除",
-    "untitled": "未命名檔案"
-  },
-  "upload": {
-    "fileSizeExceeds": "檔案大小超出限制",
-    "uploadFailed": "上傳失敗，請重試",
-    "imageUploadFailed": "圖片上傳失敗",
-    "videoUploadFailed": "影片上傳失敗",
-    "attachmentUploadFailed": "附件上傳失敗"
-  },
-  "mention": {
-    "noResults": "沒有找到匹配的用戶",
-    "loading": "搜尋中..."
-  },
-  "embed": {
-    "placeholder": "輸入連結地址...",
-    "submit": "嵌入",
-    "loading": "載入中...",
-    "open": "開啟連結",
-    "delete": "刪除"
-  },
-  "codeBlock": {
-    "copyCode": "複製程式碼",
-    "copied": "已複製",
-    "searchLanguage": "搜尋語言...",
-    "noLanguage": "沒有匹配的語言"
-  },
-  "blockMenu": {
-    "delete": "刪除",
-    "duplicate": "複製",
-    "moveUp": "上移",
-    "moveDown": "下移",
-    "turnInto": "轉換為"
-  },
-  "search": {
-    "find": "查找",
-    "findPlaceholder": "查找...",
-    "replace": "替換",
-    "replaceAll": "全部替換",
-    "replacePlaceholder": "替換為...",
-    "noResults": "無結果",
-    "caseSensitive": "區分大小寫",
-    "previousMatch": "上一個",
-    "nextMatch": "下一個",
-    "close": "關閉",
-    "showReplace": "顯示替換",
-    "hideReplace": "隱藏替換"
-  }
-}
diff --git a/web/apps/web-ele/src/locales/langs/zh-TW/zq-smart-table.json b/web/apps/web-ele/src/locales/langs/zh-TW/zq-smart-table.json
deleted file mode 100644
index b21fae7..0000000
--- a/web/apps/web-ele/src/locales/langs/zh-TW/zq-smart-table.json
+++ /dev/null
@@ -1,550 +0,0 @@
-{
-  "common": {
-    "confirm": "確認",
-    "cancel": "取消",
-    "delete": "刪除",
-    "edit": "編輯",
-    "save": "儲存",
-    "add": "新增",
-    "search": "搜尋",
-    "reset": "重設",
-    "newLine": "換行",
-    "loading": "載入中...",
-    "noData": "暫無資料",
-    "more": "更多",
-    "close": "關閉",
-    "rename": "重新命名",
-    "duplicate": "複製",
-    "export": "匯出",
-    "import": "匯入",
-    "deleteSuccess": "刪除成功",
-    "deleteFailed": "刪除失敗"
-  },
-  "app": {
-    "title": "ZQ 知識庫",
-    "description": "多維表格與文檔協作平台"
-  },
-  "theme": {
-    "light": "淺色模式",
-    "dark": "深色模式",
-    "system": "跟隨系統"
-  },
-  "language": {
-    "zhCN": "简体中文",
-    "zhTW": "繁體中文",
-    "en": "English"
-  },
-  "sidebar": {
-    "allItems": "所有項目",
-    "allTables": "所有表格",
-    "newTable": "新建多維表格",
-    "newDocument": "新建文檔",
-    "newDocumentTitle": "新建文檔",
-    "dashboard": "儀表板",
-    "deleteTable": "刪除",
-    "deleteTableConfirm": "確定要刪除「{name}」嗎？此操作不可撤銷。",
-    "renameTable": "重新命名",
-    "newTableTitle": "新建多維表格",
-    "searchPlaceholder": "搜尋項目...",
-    "tables": "多維表格",
-    "documents": "文檔",
-    "collapse": "收起側欄",
-    "expand": "展開側欄",
-    "noResults": "沒有匹配的項目",
-    "emptyTables": "暫無表格",
-    "emptyDocuments": "暫無文檔",
-    "newSubPage": "新建子頁面",
-    "moveToRoot": "移動到根級"
-  },
-  "document": {
-    "placeholder": "輸入 / 喚起命令選單...",
-    "untitled": "無標題文檔",
-    "titlePlaceholder": "請輸入標題",
-    "autoSaved": "已自動儲存",
-    "saving": "儲存中...",
-    "modifiedToday": "今天修改",
-    "modifiedYesterday": "昨天修改",
-    "modified": "修改",
-    "unknownUser": "未知使用者",
-    "toc": "目錄",
-    "export": "匯出",
-    "exporting": "正在匯出，請稍候...",
-    "exportMarkdown": "匯出 Markdown",
-    "exportPdf": "匯出 PDF",
-    "exportWord": "匯出 Word",
-    "exportSuccess": "匯出成功",
-    "exportFailed": "匯出失敗",
-    "moreActions": "更多操作"
-  },
-  "table": {
-    "addRecord": "新增記錄",
-    "addField": "新增欄位",
-    "deleteRecord": "刪除記錄",
-    "deleteField": "刪除欄位",
-    "fieldName": "欄位名稱",
-    "fieldType": "欄位類型",
-    "rowCount": "{count} 筆記錄",
-    "selectedCount": "已選擇 {count} 筆",
-    "emptyTable": "表格為空，點擊新增第一筆記錄",
-    "configField": "設定欄位",
-    "hideField": "隱藏欄位",
-    "sortAsc": "升冪排列",
-    "sortDesc": "降冪排列",
-    "insertLeft": "向左插入",
-    "insertRight": "向右插入",
-    "expandRecord": "展開記錄",
-    "recordDetail": "記錄詳情",
-    "batchDelete": "批量刪除",
-    "selectAll": "全選",
-    "noTitle": "(無標題)",
-    "renameField": "重新命名欄位",
-    "duplicateField": "複製欄位",
-    "editField": "編輯欄位",
-    "filterByField": "按此欄位篩選",
-    "clearSort": "清除排序",
-    "fieldDescription": "欄位描述",
-    "fieldOptions": "選項",
-    "maxRating": "最大評分",
-    "numberFormat": "數字格式",
-    "numberFormatNumber": "數字",
-    "numberFormatCurrency": "貨幣 (¥)",
-    "numberFormatPercent": "百分比 (%)",
-    "numberFormatYuan": "元",
-    "precision": "小數位數",
-    "includeTime": "包含時間",
-    "currencySymbol": "貨幣符號",
-    "formulaExpression": "公式表達式",
-    "formulaResultType": "結果類型",
-    "fieldGroupBasic": "基礎欄位",
-    "fieldGroupAdvanced": "高級欄位",
-    "fieldGroupSystem": "系統欄位",
-    "copyRecord": "複製記錄",
-    "insertAbove": "在上方插入",
-    "insertBelow": "在下方插入",
-    "deleteRecordConfirm": "確定要刪除這條記錄嗎？",
-    "copiedToClipboard": "已複製到剪貼板",
-    "frozenField": "凍結至此欄位",
-    "unfreezeField": "取消凍結",
-    "multipleSelect": "允許多選",
-    "regionLevel": "地區層級",
-    "regionProvince": "省",
-    "regionCity": "省/市",
-    "regionDistrict": "省/市/區",
-    "maxImageCount": "最大圖片數量",
-    "currencyCNY": "¥ 人民幣",
-    "currencyUSD": "$ 美元",
-    "currencyEUR": "€ 歐元",
-    "currencyGBP": "£ 英鎊",
-    "currencyKRW": "₩ 韓元",
-    "formulaPlaceholder": "e.g. {field1} + {field2}",
-    "keyboardShortcuts": "快速鍵",
-    "paste": "貼上",
-    "redo": "重做",
-    "clearCell": "清除儲存格",
-    "editCell": "編輯儲存格",
-    "cancelEdit": "取消編輯",
-    "navigate": "儲存格導覽",
-    "nextCell": "下一格/上一格儲存格",
-    "clearFilter": "清除此欄位篩選"
-  },
-  "field": {
-    "text": "文字",
-    "number": "數字",
-    "singleSelect": "單選",
-    "multiSelect": "多選",
-    "date": "日期",
-    "checkbox": "核取方塊",
-    "person": "人員",
-    "attachment": "附件",
-    "url": "連結",
-    "email": "電子郵件",
-    "phone": "電話",
-    "rating": "評分",
-    "progress": "進度",
-    "currency": "貨幣",
-    "autoNumber": "自動編號",
-    "location": "地理位置",
-    "createdTime": "建立時間",
-    "modifiedTime": "修改時間",
-    "createdBy": "建立人",
-    "modifiedBy": "修改人",
-    "formula": "公式",
-    "richText": "富文本",
-    "user": "使用者",
-    "department": "部門",
-    "region": "地區",
-    "image": "圖片",
-    "link": "關聯",
-    "lookup": "引用",
-    "rollup": "匯總"
-  },
-  "view": {
-    "grid": "表格檢視",
-    "kanban": "看板檢視",
-    "gallery": "相簿檢視",
-    "form": "表單檢視",
-    "addView": "新增檢視",
-    "deleteView": "刪除視圖",
-    "renameView": "重新命名視圖",
-    "duplicateView": "複製視圖",
-    "deleteViewConfirm": "確定要刪除視圖「{name}」嗎？",
-    "calendar": "日曆檢視",
-    "gantt": "甘特檢視"
-  },
-  "toolbar": {
-    "filter": "篩選",
-    "sort": "排序",
-    "group": "分組",
-    "hideFields": "隱藏欄位",
-    "rowHeight": "行高",
-    "rowHeightShort": "緊湊",
-    "rowHeightMedium": "預設",
-    "rowHeightTall": "寬鬆",
-    "rowHeightExtraTall": "超高",
-    "fieldVisibility": "欄位顯示",
-    "showAll": "顯示全部",
-    "hideAll": "隱藏全部",
-    "search": "搜尋",
-    "addFilter": "新增篩選條件",
-    "addSort": "新增排序規則",
-    "addGroup": "新增分組",
-    "fields": "個欄位",
-    "undo": "撤銷",
-    "copy": "複製",
-    "zebra": "斑馬紋",
-    "export": "匯出",
-    "exportCSV": "匯出 CSV",
-    "exportFailed": "匯出失敗",
-    "import": "匯入",
-    "importCSV": "匯入 CSV",
-    "importSuccess": "匯入成功",
-    "importFailed": "匯入失敗",
-    "conditionalFormat": "條件格式",
-    "noConditionalFormats": "暫無條件格式規則",
-    "addRule": "新增規則",
-    "rule": "規則",
-    "applyToRow": "整行",
-    "bgColor": "背景色",
-    "textColor": "文字色",
-    "preview": "預覽",
-    "addRecord": "新增記錄",
-    "resetData": "重設資料",
-    "resetDataConfirm": "確定要重設所有資料嗎？此操作不可恢復。",
-    "confirmReset": "確定重設",
-    "resetSampleData": "重設範例資料",
-    "exportExcel": "匯出 Excel",
-    "copiedRowCol": "已複製 {rows} 行 × {cols} 列",
-    "pastedRowCol": "已貼上 {rows} 行 × {cols} 列",
-    "collapseAll": "全部摺疊",
-    "expandAll": "全部展開"
-  },
-  "filter": {
-    "equals": "等於",
-    "notEquals": "不等於",
-    "contains": "包含",
-    "notContains": "不包含",
-    "isEmpty": "為空",
-    "isNotEmpty": "不為空",
-    "greaterThan": "大於",
-    "lessThan": "小於",
-    "where": "當",
-    "and": "且",
-    "or": "或",
-    "noFilters": "暫無篩選條件"
-  },
-  "kanban": {
-    "uncategorized": "未分類",
-    "addCard": "新增卡片",
-    "noGroupField": "請選擇分組欄位",
-    "groupBy": "分組依據",
-    "cardFields": "卡片欄位",
-    "showFields": "顯示欄位"
-  },
-  "gantt": {
-    "startField": "開始日期",
-    "endField": "結束日期",
-    "taskName": "任務名稱",
-    "noDateField": "請先新增日期欄位",
-    "zoomDay": "日",
-    "zoomWeek": "週",
-    "zoomMonth": "月",
-    "durationDays": "{days} 天",
-    "noDateCount": "{count} 筆無日期",
-    "todayMark": "今天",
-    "milestoneField": "里程碑欄位",
-    "autoDetect": "自動識別",
-    "milestone": "里程碑",
-    "toggleDependencies": "顯示/隱藏依賴線",
-    "toggleCriticalPath": "顯示/隱藏關鍵路徑",
-    "depType": "依賴類型",
-    "depDesc_FS": "完成-開始",
-    "depDesc_FF": "完成-完成",
-    "depDesc_SS": "開始-開始",
-    "depDesc_SF": "開始-完成",
-    "deleteDep": "刪除依賴",
-    "dragToMove": "拖曳移動任務",
-    "dragToResize": "拖曳調整時長"
-  },
-  "calendar": {
-    "today": "今天",
-    "dateField": "開始日期",
-    "endDateField": "結束日期",
-    "noDateField": "請先新增日期欄位",
-    "none": "無",
-    "more": "更多",
-    "allDay": "全天",
-    "modeMonth": "月",
-    "modeWeek": "週",
-    "modeDay": "日",
-    "weekSun": "日",
-    "weekMon": "一",
-    "weekTue": "二",
-    "weekWed": "三",
-    "weekThu": "四",
-    "weekFri": "五",
-    "weekSat": "六"
-  },
-  "gallery": {
-    "title": "相冊檢視",
-    "coverField": "封面欄位",
-    "noCover": "無封面",
-    "yes": "是",
-    "no": "否"
-  },
-  "form": {
-    "title": "表單檢視",
-    "formTitle": "資料收集表單",
-    "formDescription": "請填寫以下資訊",
-    "submit": "提交",
-    "submitSuccess": "提交成功！",
-    "required": "必填",
-    "fieldRequired": "{name} 不能為空",
-    "invalidEmail": "請輸入有效的電子郵件地址",
-    "invalidPhone": "請輸入有效的電話號碼",
-    "invalidUrl": "請輸入有效的 URL 地址",
-    "checkFormErrors": "請檢查表單中的錯誤"
-  },
-  "permission": {
-    "title": "權限設定",
-    "tabCollaborators": "協作者",
-    "tabFieldPerm": "欄位權限",
-    "tabRowPerm": "行權限",
-    "searchUser": "搜尋使用者",
-    "invite": "邀請",
-    "addSuccess": "新增成功",
-    "addFailed": "新增失敗",
-    "updateFailed": "更新失敗",
-    "removeConfirm": "確定移除 {name}？",
-    "removeCollaborator": "移除協作者",
-    "removed": "已移除",
-    "roleOwner": "所有者",
-    "roleManager": "管理者",
-    "roleEditor": "編輯者",
-    "roleViewer": "唯讀者",
-    "roleCustom": "自訂",
-    "accessWrite": "可編輯",
-    "accessRead": "可見",
-    "accessHidden": "隱藏",
-    "fieldPermSaved": "欄位權限已儲存",
-    "saveFailed": "儲存失敗",
-    "rowPermUpdated": "行權限已更新",
-    "fieldPermTip": "點擊欄位權限標籤可切換存取級別（可編輯 / 可見 / 隱藏），修改後點擊「儲存」生效。",
-    "rowPermTip": "行權限控制每個角色可查看和編輯的記錄範圍。",
-    "viewRecords": "可查看記錄：",
-    "editRecords": "可編輯記錄：",
-    "allRecords": "全部記錄",
-    "creatorOnly": "僅自己建立的",
-    "noCollaborators": "暫無協作者",
-    "noFieldPerm": "暫未設定，點擊「儲存」可初始化",
-    "subjectUser": "使用者",
-    "subjectDept": "部門",
-    "subjectRole": "角色",
-    "documentScopeHint": "文件沒有欄與列資料維度，權限由協作者角色與「編輯內容／匯出」等能力控制；不適用欄位權限與列權限。"
-  },
-  "cellRenderer": {
-    "today": "今天",
-    "yesterday": "昨天",
-    "tomorrow": "明天",
-    "yuan": "元"
-  },
-  "link": {
-    "targetTable": "關聯目標表",
-    "selectTable": "請選擇目標表",
-    "linkField": "關聯欄位",
-    "selectLinkField": "請選擇關聯欄位",
-    "lookupField": "引用欄位",
-    "rollupField": "匯總欄位",
-    "selectField": "請選擇欄位",
-    "aggregation": "聚合方式",
-    "aggCount": "計數 (COUNT)",
-    "aggCounta": "非空計數 (COUNTA)",
-    "aggSum": "求和 (SUM)",
-    "aggAvg": "平均值 (AVG)",
-    "aggMin": "最小值 (MIN)",
-    "aggMax": "最大值 (MAX)",
-    "searchPlaceholder": "搜尋記錄..."
-  },
-  "dashboard": {
-    "title": "儀表板",
-    "addChart": "新增圖表",
-    "barChart": "柱狀圖",
-    "lineChart": "折線圖",
-    "pieChart": "圓餅圖",
-    "statNumber": "統計數字",
-    "totalRecords": "總記錄數",
-    "sum": "求和",
-    "average": "平均值",
-    "max": "最大值",
-    "min": "最小值",
-    "empty": "空值",
-    "filled": "有值",
-    "percentEmpty": "空值佔比",
-    "percentFilled": "有值佔比",
-    "completed": "已完成",
-    "completionRate": "完成率",
-    "statusDist": "狀態分佈",
-    "priorityDist": "優先級分佈",
-    "progressDist": "進度分佈",
-    "distribution": "分布統計",
-    "noSelectField": "請新增單選欄位",
-    "noNumberField": "請新增數字/進度/評分欄位",
-    "noCheckbox": "請新增核取方塊欄位"
-  },
-  "summary": {
-    "sum": "求和",
-    "avg": "平均值",
-    "min": "最小值",
-    "max": "最大值",
-    "count": "計數",
-    "counta": "非空計數",
-    "countEmpty": "空值數",
-    "percentEmpty": "空值佔比",
-    "percentFilled": "填充率",
-    "clickToAdd": "彙總",
-    "none": "無",
-    "groupSubtotal": "小計"
-  },
-  "formula": {
-    "availableFields": "可引用欄位（點擊插入）",
-    "placeholder": "輸入公式，如 IF({狀態}=\"完成\", {金額} * 1.1, {金額})",
-    "functionReference": "函數參考",
-    "resultText": "文字",
-    "resultNumber": "數字",
-    "resultDate": "日期",
-    "resultBoolean": "布林"
-  },
-  "validation": {
-    "title": "資料校驗",
-    "min": "最小值",
-    "max": "最大值",
-    "minLength": "最小長度",
-    "maxLength": "最大長度",
-    "pattern": "正規表達式",
-    "patternPlaceholder": "如 ^[A-Z]{2}\\d{4}$",
-    "unique": "值不可重複",
-    "customMessage": "自訂錯誤提示",
-    "customMessagePlaceholder": "校驗失敗時顯示的提示",
-    "noLimit": "不限",
-    "required": "「{name}」不能為空",
-    "minError": "「{name}」不能小於 {min}",
-    "maxError": "「{name}」不能大於 {max}",
-    "minLengthError": "「{name}」長度不能少於 {min} 個字元",
-    "maxLengthError": "「{name}」長度不能超過 {max} 個字元",
-    "patternError": "「{name}」格式不正確",
-    "uniqueError": "「{name}」的值已存在，不能重複"
-  },
-  "comment": {
-    "title": "評論",
-    "placeholder": "輸入評論，@ 提及用戶...",
-    "send": "發送",
-    "reply": "回覆",
-    "edit": "編輯",
-    "delete": "刪除",
-    "deleteConfirm": "確定刪除這條評論？",
-    "noComments": "暫無評論",
-    "mentionHint": "輸入 @ 搜尋用戶",
-    "justNow": "剛剛",
-    "minutesAgo": "{n} 分鐘前",
-    "hoursAgo": "{n} 小時前",
-    "daysAgo": "{n} 天前",
-    "editComment": "編輯評論",
-    "cancelEdit": "取消",
-    "saveEdit": "儲存",
-    "replyTo": "回覆 {name}",
-    "commentCount": "{count} 條評論",
-    "postFailed": "評論發送失敗",
-    "updateFailed": "評論更新失敗",
-    "deleteFailed": "評論刪除失敗"
-  },
-  "mention": {
-    "noResults": "沒有找到匹配的用戶",
-    "navigate": "導航",
-    "select": "選擇",
-    "close": "關閉"
-  },
-  "trash": {
-    "title": "回收站",
-    "empty": "回收站為空",
-    "restore": "恢復",
-    "permanentDelete": "永久刪除",
-    "permanentDeleteConfirm": "確定要永久刪除這條記錄嗎？此操作不可撤銷。",
-    "emptyTrash": "清空回收站",
-    "emptyTrashConfirm": "確定要清空回收站嗎？此操作不可撤銷。",
-    "restoreSuccess": "恢復成功",
-    "deleteSuccess": "永久刪除成功",
-    "emptySuccess": "回收站已清空",
-    "deletedAt": "刪除時間",
-    "recordCount": "{count} 條記錄",
-    "batchRestore": "批量恢復",
-    "selectedCount": "已選擇 {count} 條"
-  },
-  "version": {
-    "title": "版本歷史",
-    "empty": "暫無版本記錄",
-    "createSnapshot": "儲存快照",
-    "manualSnapshot": "手動儲存",
-    "createSuccess": "版本快照已儲存",
-    "createFailed": "儲存版本快照失敗",
-    "preview": "預覽版本",
-    "restore": "恢復此版本",
-    "restoreConfirm": "恢復版本確認",
-    "restoreConfirmMsg": "確定要恢復到版本 v{version} 嗎？當前內容將被儲存為新版本。",
-    "restoreSuccess": "版本已恢復",
-    "restoreFailed": "恢復版本失敗",
-    "deleteConfirm": "刪除版本確認",
-    "deleteConfirmMsg": "確定要刪除此版本嗎？此操作不可撤銷。",
-    "loadMore": "載入更多"
-  },
-  "template": {
-    "selectTitle": "選擇文件模板",
-    "blankDocument": "空白文件",
-    "fromTemplate": "從模板建立",
-    "searchPlaceholder": "搜尋模板...",
-    "allCategories": "全部",
-    "system": "系統",
-    "empty": "暫無模板",
-    "loadFailed": "載入模板失敗",
-    "usedCount": "已使用 {count} 次",
-    "saveAsTemplate": "儲存為模板",
-    "templateSuffix": "模板",
-    "name": "模板名稱",
-    "namePlaceholder": "請輸入模板名稱",
-    "nameRequired": "請輸入模板名稱",
-    "description": "模板描述",
-    "descriptionPlaceholder": "請輸入模板描述（可選）",
-    "categoryLabel": "分類",
-    "categoryPlaceholder": "請輸入分類",
-    "save": "儲存",
-    "saveSuccess": "模板儲存成功",
-    "saveFailed": "模板儲存失敗",
-    "creating": "正在建立，請稍候...",
-    "category": {
-      "custom": "自訂",
-      "system": "系統模板",
-      "meeting": "會議",
-      "report": "報告",
-      "plan": "計畫",
-      "note": "筆記"
-    }
-  }
-}
diff --git a/web/apps/web-ele/src/store/wiki.ts b/web/apps/web-ele/src/store/wiki.ts
deleted file mode 100644
index 5baac6a..0000000
--- a/web/apps/web-ele/src/store/wiki.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import type { WikiSpace } from '#/types/zq-smart-table/table'
-import {
-  getWikiSpacesApi,
-  createWikiSpaceApi,
-  updateWikiSpaceApi,
-  deleteWikiSpaceApi,
-  type WikiSpaceItem,
-} from '#/api/smart-table'
-
-function wikiSpaceFromApi(s: WikiSpaceItem): WikiSpace {
-  return {
-    id: s.id,
-    name: s.name,
-    icon: s.icon || 'BookOpen',
-    avatar: s.avatar || null,
-    description: s.description,
-    cover: s.cover || null,
-    category: s.category || 'default',
-    visibility: s.visibility || 'private',
-    documentCount: s.document_count ?? 0,
-    createdAt: s.sys_create_datetime,
-    updatedAt: s.sys_update_datetime,
-    creatorId: s.sys_creator_id,
-    creatorName: s.creator_name,
-  }
-}
-
-export const useWikiStore = defineStore('wiki', () => {
-  const spaces = ref<WikiSpace[]>([])
-  const loading = ref(false)
-
-  async function loadSpaces() {
-    loading.value = true
-    try {
-      const raw = await getWikiSpacesApi()
-      const list = Array.isArray(raw) ? raw : (raw as any)?.data ?? []
-      spaces.value = list.map(wikiSpaceFromApi)
-    } catch (e) {
-      console.error('[Wiki] Failed to load spaces', e)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  async function createSpace(data: {
-    name: string
-    icon?: string
-    avatar?: string
-    description?: string
-    category?: string
-    visibility?: string
-  }) {
-    try {
-      const raw = await createWikiSpaceApi(data)
-      const item = (raw as any)?.data ?? raw
-      const space = wikiSpaceFromApi(item)
-      spaces.value.push(space)
-      return space.id
-    } catch (e) {
-      console.error('[Wiki] Failed to create space', e)
-    }
-  }
-
-  async function updateSpace(spaceId: string, data: Record<string, any>) {
-    try {
-      const raw = await updateWikiSpaceApi(spaceId, data)
-      const item = (raw as any)?.data ?? raw
-      const idx = spaces.value.findIndex((s) => s.id === spaceId)
-      if (idx !== -1) {
-        spaces.value[idx] = wikiSpaceFromApi(item)
-      }
-    } catch (e) {
-      console.error('[Wiki] Failed to update space', e)
-    }
-  }
-
-  async function deleteSpace(spaceId: string) {
-    try {
-      await deleteWikiSpaceApi(spaceId)
-      spaces.value = spaces.value.filter((s) => s.id !== spaceId)
-    } catch (e) {
-      console.error('[Wiki] Failed to delete space', e)
-    }
-  }
-
-  function $reset() {
-    spaces.value = []
-    loading.value = false
-  }
-
-  return {
-    spaces,
-    loading,
-    loadSpaces,
-    createSpace,
-    updateSpace,
-    deleteSpace,
-    $reset,
-  }
-})
diff --git a/web/apps/web-ele/src/store/zq-smart-table.ts b/web/apps/web-ele/src/store/zq-smart-table.ts
deleted file mode 100644
index a98a59b..0000000
--- a/web/apps/web-ele/src/store/zq-smart-table.ts
+++ /dev/null
@@ -1,1691 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref, computed } from 'vue'
-import { FieldType, type FieldConfig } from '#/types/zq-smart-table/field'
-import { ViewType, SmartItemType, type Table, type Record as TableRecord, type ViewConfig, type SummaryAggregation } from '#/types/zq-smart-table/table'
-import dayjs from 'dayjs'
-import {
-  getTableListApi, getTableFullApi, createTableApi, updateTableApi, deleteTableApi,
-  moveTableApi,
-  updateDocumentContentApi,
-  createFieldApi, updateFieldApi, deleteFieldApi, reorderFieldsApi,
-  createRecordApi, updateCellApi, deleteRecordApi, getRecordListApi,
-  batchUpdateCellsApi, batchUpdateMultiRecordCellsApi,
-  createViewApi, updateViewApi, deleteViewApi,
-  getMyPermissionApi, getSummaryApi,
-  type SmartFieldItem, type SmartViewItem, type SmartRecordItem,
-  type MyPermission, type RecordFilterParam, type RecordSortParam,
-} from '#/api/smart-table'
-import {
-  cacheTableData,
-  getCachedTableData,
-  addPendingOp,
-  getPendingCount,
-  syncAllPendingOps,
-  clearOfflineCache,
-} from '#/composables/use-offline-cache'
-
-// ==================== Backend <-> Frontend conversion helpers ====================
-
-const FIELD_CONFIG_KEYS = [
-  'options', 'precision', 'numberFormat', 'dateFormat',
-  'includeTime', 'maxRating', 'currencySymbol', 'formula', 'formulaResultType',
-  'multiple', 'regionLevel', 'maxImageCount',
-  'linkedTableId', 'symmetricFieldId', 'linkFieldId', 'lookupFieldId',
-  'rollupFieldId', 'aggregation', 'validation',
-] as const
-
-function fieldFromApi(f: SmartFieldItem): FieldConfig {
-  const base: FieldConfig = {
-    id: f.id,
-    name: f.name,
-    type: f.type as FieldType,
-    width: f.width,
-    visible: f.visible,
-    required: f.required,
-    description: f.description ?? undefined,
-  }
-  if (f.config) {
-    for (const key of FIELD_CONFIG_KEYS) {
-      if (f.config[key] !== undefined) {
-        ;(base as any)[key] = f.config[key]
-      }
-    }
-  }
-  return base
-}
-
-function fieldToApiConfig(field: FieldConfig): Record<string, any> {
-  const config: Record<string, any> = {}
-  for (const key of FIELD_CONFIG_KEYS) {
-    if ((field as any)[key] !== undefined) {
-      config[key] = (field as any)[key]
-    }
-  }
-  return config
-}
-
-const VIEW_CONFIG_KEYS = [
-  'filters', 'filterLogic', 'sorts', 'groups', 'visibleFieldIds',
-  'conditionalFormats', 'kanbanFieldId', 'ganttStartFieldId', 'ganttEndFieldId',
-  'rowHeight', 'zebra', 'frozenFieldId', 'summaryConfig',
-] as const
-
-function viewFromApi(v: SmartViewItem): ViewConfig {
-  const base: ViewConfig = {
-    id: v.id,
-    name: v.name,
-    type: (v.type as ViewType) || ViewType.Grid,
-    filters: [],
-    filterLogic: 'and',
-    sorts: [],
-    groups: [],
-    visibleFieldIds: [],
-  }
-  if (v.config) {
-    for (const key of VIEW_CONFIG_KEYS) {
-      if (v.config[key] !== undefined) {
-        ;(base as any)[key] = v.config[key]
-      }
-    }
-  }
-  return base
-}
-
-function viewToApiConfig(view: ViewConfig): Record<string, any> {
-  const config: Record<string, any> = {}
-  for (const key of VIEW_CONFIG_KEYS) {
-    if ((view as any)[key] !== undefined) {
-      config[key] = (view as any)[key]
-    }
-  }
-  return config
-}
-
-function recordFromApi(r: SmartRecordItem): TableRecord {
-  return {
-    id: r.id,
-    values: r.values || {},
-    createdTime: r.sys_create_datetime || '',
-    modifiedTime: r.sys_update_datetime || '',
-    createdBy: r.sys_creator_id,
-    modifiedBy: r.sys_modifier_id,
-  }
-}
-
-// ==================== Store ====================
-
-interface HistoryEntry {
-  recordId: string
-  fieldId: string
-  oldValue: unknown
-  newValue: unknown
-}
-
-export const useTableStore = defineStore('smart-table', () => {
-  const tables = ref<Table[]>([])
-  const activeTableId = ref<string>('')
-  const searchText = ref('')
-  const loading = ref(false)
-  const creatingFromTemplate = ref(false)
-  const wikiSpaceId = ref<string | null>(null)
-  const loadingMore = ref(false)
-  const undoStack = ref<HistoryEntry[]>([])
-  const redoStack = ref<HistoryEntry[]>([])
-  const maxHistory = 50
-
-  // Pagination state per table: { tableId: { nextCursor, hasMore, total } }
-  const paginationMap = ref<Record<string, { nextCursor: string | null; hasMore: boolean; total: number }>>({})
-
-  // Batched cell write queue: accumulate writes per record, flush as single API call
-  const cellWriteQueue = ref<Record<string, Record<string, unknown>>>({})
-  let _cellFlushTimer: ReturnType<typeof setTimeout> | null = null
-  const CELL_WRITE_DELAY = 300
-  const CELL_BATCH_MAX = 20
-
-  // ==================== Offline state ====================
-  const isOnline = ref(navigator.onLine)
-  const offlinePendingCount = ref(0)
-  const offlineSyncing = ref(false)
-
-  async function _handleOnline() {
-    isOnline.value = true
-    await syncOfflineOps()
-  }
-
-  function _handleOffline() {
-    isOnline.value = false
-  }
-
-  function initOfflineListeners() {
-    window.addEventListener('online', _handleOnline)
-    window.addEventListener('offline', _handleOffline)
-    getPendingCount().then((c) => { offlinePendingCount.value = c })
-  }
-
-  function destroyOfflineListeners() {
-    window.removeEventListener('online', _handleOnline)
-    window.removeEventListener('offline', _handleOffline)
-  }
-
-  async function syncOfflineOps() {
-    if (offlineSyncing.value || !isOnline.value) return
-    offlineSyncing.value = true
-    try {
-      const synced = await syncAllPendingOps()
-      offlinePendingCount.value = await getPendingCount()
-      if (synced > 0 && activeTableId.value) {
-        await reloadRecords()
-      }
-    } finally {
-      offlineSyncing.value = false
-    }
-  }
-
-  async function _refreshOfflineCount() {
-    offlinePendingCount.value = await getPendingCount()
-  }
-
-  // ==================== Permission state ====================
-  const myPermission = ref<MyPermission | null>(null)
-
-  const canManageTable = computed(() => myPermission.value?.capabilities?.manage_table ?? false)
-  const canManagePermission = computed(() => myPermission.value?.capabilities?.manage_permission ?? false)
-  const canManageField = computed(() => myPermission.value?.capabilities?.manage_field ?? false)
-  const canManageView = computed(() => myPermission.value?.capabilities?.manage_view ?? false)
-  const canAddRecord = computed(() => myPermission.value?.capabilities?.add_record ?? false)
-  const canEditRecord = computed(() => myPermission.value?.capabilities?.edit_record ?? false)
-  const canDeleteRecord = computed(() => myPermission.value?.capabilities?.delete_record ?? false)
-  const canExport = computed(() => myPermission.value?.capabilities?.export_data ?? false)
-  const canImport = computed(() => myPermission.value?.capabilities?.import_data ?? false)
-  const isOwnerOrManager = computed(() => {
-    const rt = myPermission.value?.role_type
-    return rt === 'owner' || rt === 'manager' || rt === 'superadmin'
-  })
-
-  async function loadMyPermission(tableId: string) {
-    try {
-      const raw = await getMyPermissionApi(tableId)
-      const data = (raw as any)?.data ?? raw
-      myPermission.value = data
-    } catch {
-      myPermission.value = null
-    }
-  }
-
-  // ==================== Summary state ====================
-  const summaryData = ref<Record<string, any>>({})
-  let _summaryTimer: ReturnType<typeof setTimeout> | null = null
-  const SUMMARY_DEBOUNCE = 400
-
-  // ==================== Group collapse state ====================
-  const collapsedGroups = ref<Set<string>>(new Set())
-
-  function toggleGroupCollapse(key: string) {
-    const s = new Set(collapsedGroups.value)
-    if (s.has(key)) s.delete(key)
-    else s.add(key)
-    collapsedGroups.value = s
-  }
-
-  function isGroupCollapsed(key: string): boolean {
-    return collapsedGroups.value.has(key)
-  }
-
-  function collapseAllGroups() {
-    const grouped = getGroupedRecords()
-    collapsedGroups.value = new Set(grouped.map((g) => g.key))
-  }
-
-  function expandAllGroups() {
-    collapsedGroups.value = new Set()
-  }
-
-  const activeTable = computed(() => tables.value.find((t) => t.id === activeTableId.value))
-  const activeView = computed(() => {
-    const t = activeTable.value
-    if (!t) return undefined
-    return t.views.find((v) => v.id === t.activeViewId)
-  })
-
-  async function loadSummary(tableId?: string) {
-    const tid = tableId ?? activeTableId.value
-    const v = activeView.value
-    if (!tid || !v?.summaryConfig || Object.keys(v.summaryConfig).length === 0) {
-      summaryData.value = {}
-      return
-    }
-    const queryOpts = _viewToFilterParams(v)
-    const searchKw = searchText.value.trim() || undefined
-    try {
-      const raw = await getSummaryApi(tid, {
-        aggregations: v.summaryConfig as Record<string, string>,
-        filters: queryOpts.filters,
-        filter_logic: queryOpts.filter_logic,
-        search: searchKw,
-      })
-      const data = (raw as any)?.data ?? raw
-      summaryData.value = data.summaries || {}
-    } catch (e) {
-      console.error('[SmartTable] Failed to load summary', e)
-      summaryData.value = {}
-    }
-  }
-
-  function loadSummaryDebounced(tableId?: string) {
-    if (_summaryTimer) clearTimeout(_summaryTimer)
-    _summaryTimer = setTimeout(() => {
-      loadSummary(tableId)
-      _summaryTimer = null
-    }, SUMMARY_DEBOUNCE)
-  }
-
-  function updateSummaryConfig(fieldId: string, agg: SummaryAggregation | null) {
-    const v = activeView.value
-    if (!v) return
-    if (!v.summaryConfig) v.summaryConfig = {}
-    if (agg) {
-      v.summaryConfig[fieldId] = agg
-    } else {
-      delete v.summaryConfig[fieldId]
-    }
-    saveActiveViewConfig()
-    loadSummaryDebounced()
-  }
-
-  // ==================== Query helpers ====================
-
-  function _viewToFilterParams(v?: ViewConfig): { filters?: RecordFilterParam[]; sorts?: RecordSortParam[]; filter_logic?: string } {
-    if (!v) return {}
-    const params: { filters?: RecordFilterParam[]; sorts?: RecordSortParam[]; filter_logic?: string } = {}
-    if (v.filters.length > 0) {
-      params.filters = v.filters.map((f) => ({ field_id: f.fieldId, operator: f.operator, value: f.value }))
-      params.filter_logic = v.filterLogic ?? 'and'
-    }
-    if (v.sorts.length > 0) {
-      params.sorts = v.sorts.map((s) => ({ field_id: s.fieldId, direction: s.direction }))
-    }
-    return params
-  }
-
-  let _reloadTimer: ReturnType<typeof setTimeout> | null = null
-  const RELOAD_DEBOUNCE = 300
-
-  // ==================== Load from API ====================
-
-  async function loadTableList(spaceId?: string | null) {
-    if (spaceId !== undefined) {
-      wikiSpaceId.value = spaceId ?? null
-    }
-    tables.value = []
-    activeTableId.value = ''
-    loading.value = true
-    try {
-      const list = await getTableListApi(wikiSpaceId.value)
-      const items = Array.isArray(list) ? list : (list as any)?.data ?? []
-      tables.value = items.map((t: any) => ({
-        id: t.id,
-        name: t.name,
-        icon: t.icon || (t.type === 'document' ? 'FileText' : 'Grid'),
-        type: (t.type as SmartItemType) || SmartItemType.Table,
-        parentId: t.parent_id ?? null,
-        fields: [],
-        records: [],
-        views: [],
-        activeViewId: '',
-      }))
-      if (tables.value.length > 0) {
-        activeTableId.value = tables.value[0]!.id
-      }
-    } catch (e) {
-      console.error('[SmartTable] Failed to load table list', e)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  async function loadTableFull(tableId: string) {
-    await flushDocumentSave()
-    documentEdited.value = false
-    loading.value = true
-    try {
-      const raw = await getTableFullApi(tableId)
-      const data = (raw as any)?.data ?? raw
-      const table = _buildTableFromApiData(tableId, data)
-
-      if (table.type === SmartItemType.Document) {
-        _upsertTable(tableId, table)
-        activeTableId.value = tableId
-        await loadMyPermission(tableId)
-        cacheTableData(tableId, data).catch(() => {})
-        return
-      }
-
-      paginationMap.value[tableId] = {
-        nextCursor: data.next_cursor ?? null,
-        hasMore: data.has_more ?? false,
-        total: data.record_total ?? table.records.length,
-      }
-
-      _upsertTable(tableId, table)
-      activeTableId.value = tableId
-      computeFormulaFields(table)
-      await loadMyPermission(tableId)
-      loadSummaryDebounced(tableId)
-      schedulePrefetch(tableId)
-
-      cacheTableData(tableId, data).catch(() => {})
-    } catch (e) {
-      console.error('[SmartTable] Failed to load table', e)
-
-      if (!isOnline.value) {
-        const cached = await getCachedTableData(tableId)
-        if (cached) {
-          const table = _buildTableFromApiData(tableId, cached)
-          paginationMap.value[tableId] = {
-            nextCursor: cached.next_cursor ?? null,
-            hasMore: cached.has_more ?? false,
-            total: cached.record_total ?? table.records.length,
-          }
-          _upsertTable(tableId, table)
-          activeTableId.value = tableId
-          computeFormulaFields(table)
-        }
-      }
-    } finally {
-      loading.value = false
-    }
-  }
-
-  function _buildTableFromApiData(tableId: string, data: any): Table {
-    const itemType = (data.type as SmartItemType) || SmartItemType.Table
-    const table: Table = {
-      id: data.id ?? tableId,
-      name: data.name,
-      icon: data.icon || (itemType === SmartItemType.Document ? 'FileText' : 'Grid'),
-      type: itemType,
-      parentId: data.parent_id ?? null,
-      content: data.content ?? undefined,
-      cover: data.cover ?? null,
-      emoji: data.emoji ?? null,
-      fields: (data.fields || []).map(fieldFromApi),
-      records: (data.records || []).map(recordFromApi),
-      views: (data.views || []).map(viewFromApi),
-      activeViewId: data.active_view_id || '',
-      createdAt: data.sys_create_datetime ?? undefined,
-      updatedAt: data.sys_update_datetime ?? undefined,
-      creatorId: data.sys_creator_id ?? undefined,
-      creatorName: data.creator_name ?? undefined,
-      creatorAvatar: data.creator_avatar ?? undefined,
-    }
-    if (!table.activeViewId && table.views.length > 0) {
-      table.activeViewId = table.views[0]!.id
-    }
-    return table
-  }
-
-  function _upsertTable(tableId: string, table: Table) {
-    const idx = tables.value.findIndex((t) => t.id === tableId)
-    if (idx !== -1) {
-      tables.value[idx] = table
-    } else {
-      tables.value.push(table)
-    }
-  }
-
-  async function reloadRecords(tableId?: string) {
-    const tid = tableId ?? activeTableId.value
-    if (!tid) return
-    const t = tables.value.find((tb) => tb.id === tid)
-    if (!t) return
-    if (t.type === SmartItemType.Document) return
-
-    const v = t.views.find((vv) => vv.id === t.activeViewId)
-    const queryOpts = _viewToFilterParams(v)
-    const searchKw = searchText.value.trim() || undefined
-
-    loading.value = true
-    try {
-      const raw = await getRecordListApi(tid, null, 500, { ...queryOpts, search: searchKw })
-      const data = (raw as any)?.data ?? raw
-      t.records = (data.items || []).map(recordFromApi)
-      paginationMap.value[tid] = {
-        nextCursor: data.next_cursor ?? null,
-        hasMore: data.has_more ?? false,
-        total: data.total ?? t.records.length,
-      }
-      computeFormulaFields(t)
-      loadSummaryDebounced(tid)
-      // Clear prefetch cache for this table and schedule new prefetch
-      for (const key of Object.keys(prefetchCache.value)) {
-        if (key.startsWith(`${tid}:`)) delete prefetchCache.value[key]
-      }
-      schedulePrefetch(tid)
-    } catch (e) {
-      console.error('[SmartTable] Failed to reload records', e)
-    } finally {
-      loading.value = false
-    }
-  }
-
-  function reloadRecordsDebounced(tableId?: string) {
-    if (_reloadTimer) clearTimeout(_reloadTimer)
-    _reloadTimer = setTimeout(() => {
-      reloadRecords(tableId)
-      _reloadTimer = null
-    }, RELOAD_DEBOUNCE)
-  }
-
-  // Prefetch cache for next page
-  const prefetchCache = ref<Record<string, { records: TableRecord[]; nextCursor: string | null; hasMore: boolean }>>({})
-  let _prefetchTimer: ReturnType<typeof setTimeout> | null = null
-  const PREFETCH_DELAY = 500
-
-  async function loadMoreRecords(tableId?: string) {
-    const tid = tableId ?? activeTableId.value
-    if (!tid || loadingMore.value) return
-    const pag = paginationMap.value[tid]
-    if (!pag || !pag.hasMore || !pag.nextCursor) return
-
-    const t = tables.value.find((tb) => tb.id === tid)
-    if (!t) return
-
-    loadingMore.value = true
-    try {
-      const cacheKey = `${tid}:${pag.nextCursor}`
-      const cached = prefetchCache.value[cacheKey]
-
-      if (cached) {
-        t.records.push(...cached.records)
-        paginationMap.value[tid] = {
-          nextCursor: cached.nextCursor,
-          hasMore: cached.hasMore,
-          total: pag.total,
-        }
-        delete prefetchCache.value[cacheKey]
-        computeFormulaFields(t)
-      } else {
-        const v = t.views.find((vv) => vv.id === t.activeViewId)
-        const queryOpts = _viewToFilterParams(v)
-        const searchKw = searchText.value.trim() || undefined
-
-        const raw = await getRecordListApi(tid, pag.nextCursor, 200, { ...queryOpts, search: searchKw })
-        const data = (raw as any)?.data ?? raw
-        const newRecords = (data.items || []).map(recordFromApi)
-        t.records.push(...newRecords)
-        paginationMap.value[tid] = {
-          nextCursor: data.next_cursor ?? null,
-          hasMore: data.has_more ?? false,
-          total: data.total !== undefined && data.total >= 0 ? data.total : pag.total,
-        }
-        computeFormulaFields(t)
-      }
-
-      schedulePrefetch(tid)
-    } catch (e) {
-      console.error('[SmartTable] Failed to load more records', e)
-    } finally {
-      loadingMore.value = false
-    }
-  }
-
-  function schedulePrefetch(tableId?: string) {
-    if (_prefetchTimer) clearTimeout(_prefetchTimer)
-    _prefetchTimer = setTimeout(() => {
-      prefetchNextPage(tableId)
-      _prefetchTimer = null
-    }, PREFETCH_DELAY)
-  }
-
-  async function prefetchNextPage(tableId?: string) {
-    const tid = tableId ?? activeTableId.value
-    if (!tid || loadingMore.value) return
-    const pag = paginationMap.value[tid]
-    if (!pag || !pag.hasMore || !pag.nextCursor) return
-
-    const cacheKey = `${tid}:${pag.nextCursor}`
-    if (prefetchCache.value[cacheKey]) return
-
-    const t = tables.value.find((tb) => tb.id === tid)
-    if (!t) return
-    const v = t.views.find((vv) => vv.id === t.activeViewId)
-    const queryOpts = _viewToFilterParams(v)
-    const searchKw = searchText.value.trim() || undefined
-
-    try {
-      const raw = await getRecordListApi(tid, pag.nextCursor, 200, { ...queryOpts, search: searchKw })
-      const data = (raw as any)?.data ?? raw
-      const newRecords = (data.items || []).map(recordFromApi)
-      prefetchCache.value[cacheKey] = {
-        records: newRecords,
-        nextCursor: data.next_cursor ?? null,
-        hasMore: data.has_more ?? false,
-      }
-    } catch {
-      // prefetch failure is silent
-    }
-  }
-
-  // ==================== Table CRUD ====================
-
-  async function addTable(name: string) {
-    try {
-      const payload: any = { name, icon: 'Grid', type: 'table' }
-      if (wikiSpaceId.value) payload.wiki_space_id = wikiSpaceId.value
-      const raw = await createTableApi(payload)
-      const data = (raw as any)?.data ?? raw
-      const table: Table = {
-        id: data.id,
-        name: data.name,
-        icon: data.icon || 'Grid',
-        type: SmartItemType.Table,
-        fields: [],
-        records: [],
-        views: [],
-        activeViewId: '',
-      }
-      tables.value.push(table)
-      activeTableId.value = data.id
-      return data.id
-    } catch (e) {
-      console.error('[SmartTable] Failed to create table', e)
-    }
-  }
-
-  async function addTableFromTemplate(template: {
-    name: string
-    fields: Array<{
-      name: string
-      type: string
-      width?: number
-      options?: Array<{ label: string; color: string }>
-      multiple?: boolean
-      currencySymbol?: string
-      dateFormat?: string
-      includeTime?: boolean
-      maxRating?: number
-    }>
-    viewType: string
-    viewName?: string
-    kanbanFieldName?: string
-    sampleData?: Array<Record<string, any>>
-  }) {
-    creatingFromTemplate.value = true
-    try {
-      const tplPayload: any = { name: template.name, icon: 'Grid', type: 'table' }
-      if (wikiSpaceId.value) tplPayload.wiki_space_id = wikiSpaceId.value
-      const raw = await createTableApi(tplPayload)
-      const data = (raw as any)?.data ?? raw
-      const tableId = data.id
-      const table: Table = {
-        id: tableId,
-        name: data.name,
-        icon: data.icon || 'Grid',
-        type: SmartItemType.Table,
-        fields: [],
-        records: [],
-        views: [],
-        activeViewId: '',
-      }
-      tables.value.push(table)
-      activeTableId.value = tableId
-
-      const fieldIdMap: Record<string, string> = {}
-      const fieldOptionMap: Record<string, Array<{ id: string; label: string; color: string }>> = {}
-
-      for (let i = 0; i < template.fields.length; i++) {
-        const tf = template.fields[i]!
-        const config: Record<string, any> = {}
-        if (tf.options) {
-          config.options = tf.options.map((o, idx) => ({
-            id: `opt_${Date.now()}_${idx}`,
-            label: o.label,
-            color: o.color,
-          }))
-        }
-        if (tf.multiple !== undefined) config.multiple = tf.multiple
-        if (tf.currencySymbol) config.currencySymbol = tf.currencySymbol
-        if (tf.dateFormat) config.dateFormat = tf.dateFormat
-        if (tf.includeTime !== undefined) config.includeTime = tf.includeTime
-        if (tf.maxRating !== undefined) config.maxRating = tf.maxRating
-
-        const fieldPayload = {
-          name: tf.name,
-          type: tf.type,
-          width: tf.width || 150,
-          visible: true,
-          required: false,
-          config,
-          sort: i,
-        }
-        const fieldRaw = await createFieldApi(tableId, fieldPayload)
-        const fieldData = (fieldRaw as any)?.data ?? fieldRaw
-        const field: FieldConfig = {
-          id: fieldData.id,
-          name: tf.name,
-          type: tf.type as FieldType,
-          width: tf.width || 150,
-          visible: true,
-          required: false,
-          ...config,
-        }
-        if (config.options) {
-          field.options = config.options
-          fieldOptionMap[tf.name] = config.options
-        }
-        table.fields.push(field)
-        fieldIdMap[tf.name] = fieldData.id
-      }
-
-      const viewConfig: Record<string, any> = {
-        visibleFieldIds: table.fields.map((f) => f.id),
-        filters: [],
-        filterLogic: 'and',
-        sorts: [],
-        groups: [],
-      }
-
-      if (template.kanbanFieldName && fieldIdMap[template.kanbanFieldName]) {
-        viewConfig.kanbanFieldId = fieldIdMap[template.kanbanFieldName]
-      }
-
-      const viewPayload = {
-        name: template.viewName || '默认视图',
-        type: template.viewType,
-        config: viewConfig,
-      }
-      const viewRaw = await createViewApi(tableId, viewPayload)
-      const viewData = (viewRaw as any)?.data ?? viewRaw
-      const view: ViewConfig = {
-        id: viewData.id,
-        name: viewPayload.name,
-        type: template.viewType as ViewType,
-        filters: [],
-        filterLogic: 'and',
-        sorts: [],
-        groups: [],
-        visibleFieldIds: table.fields.map((f) => f.id),
-      }
-      if (viewConfig.kanbanFieldId) view.kanbanFieldId = viewConfig.kanbanFieldId
-      table.views.push(view)
-      table.activeViewId = view.id
-      await updateTableApi(tableId, { active_view_id: view.id })
-
-      if (template.sampleData?.length) {
-        const fieldTypeMap: Record<string, string> = {}
-        for (const tf of template.fields) {
-          fieldTypeMap[tf.name] = tf.type
-        }
-
-        for (const row of template.sampleData) {
-          const values: Record<string, any> = {}
-          for (const [fieldName, rawVal] of Object.entries(row)) {
-            const fieldId = fieldIdMap[fieldName]
-            if (!fieldId) continue
-            const fType = fieldTypeMap[fieldName]
-            if (fType === FieldType.SingleSelect) {
-              const opts = fieldOptionMap[fieldName]
-              const matched = opts?.find((o) => o.label === rawVal)
-              values[fieldId] = matched ? matched.id : rawVal
-            } else {
-              values[fieldId] = rawVal
-            }
-          }
-          try {
-            const recRaw = await createRecordApi(tableId, values)
-            const recData = (recRaw as any)?.data ?? recRaw
-            const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
-            const record: TableRecord = {
-              id: recData.id,
-              values,
-              createdTime: recData.sys_create_datetime || now,
-              modifiedTime: recData.sys_update_datetime || now,
-            }
-            table.records.push(record)
-          } catch (recErr) {
-            console.error('[SmartTable] Failed to create sample record', recErr)
-          }
-        }
-      }
-
-      return tableId
-    } catch (e) {
-      console.error('[SmartTable] Failed to create table from template', e)
-    } finally {
-      creatingFromTemplate.value = false
-    }
-  }
-
-  async function renameTable(tableId: string, name: string) {
-    const t = tables.value.find((tb) => tb.id === tableId)
-    if (t) t.name = name
-    try {
-      await updateTableApi(tableId, { name })
-    } catch (e) {
-      console.error('[SmartTable] Failed to rename table', e)
-    }
-  }
-
-  async function updateTableCover(tableId: string, cover: string | null) {
-    const t = tables.value.find((tb) => tb.id === tableId)
-    if (t) t.cover = cover
-    try {
-      await updateTableApi(tableId, { cover })
-    } catch (e) {
-      console.error('[SmartTable] Failed to update cover', e)
-    }
-  }
-
-  async function updateTableEmoji(tableId: string, emoji: string | null) {
-    const t = tables.value.find((tb) => tb.id === tableId)
-    if (t) t.emoji = emoji
-    try {
-      await updateTableApi(tableId, { emoji })
-    } catch (e) {
-      console.error('[SmartTable] Failed to update emoji', e)
-    }
-  }
-
-  async function deleteTable(tableId: string) {
-    try {
-      await deleteTableApi(tableId)
-    } catch (e) {
-      console.error('[SmartTable] Failed to delete table', e)
-    }
-    const idsToRemove = _collectDescendantIds(tableId)
-    idsToRemove.add(tableId)
-    tables.value = tables.value.filter((t) => !idsToRemove.has(t.id))
-    if (idsToRemove.has(activeTableId.value)) {
-      activeTableId.value = tables.value[0]?.id || ''
-    }
-  }
-
-  function _collectDescendantIds(parentId: string): Set<string> {
-    const result = new Set<string>()
-    const children = tables.value.filter((t) => t.parentId === parentId)
-    for (const child of children) {
-      result.add(child.id)
-      for (const id of _collectDescendantIds(child.id)) {
-        result.add(id)
-      }
-    }
-    return result
-  }
-
-  // ==================== Document ====================
-
-  const documentSaving = ref(false)
-  const documentEdited = ref(false)
-  let _docSaveTimer: ReturnType<typeof setTimeout> | null = null
-  let _docPendingSave: { tableId: string; content: any } | null = null
-  const DOC_SAVE_DEBOUNCE = 1000
-
-  async function addDocument(name: string, parentId?: string | null) {
-    try {
-      const docPayload: any = { name, icon: 'FileText', type: 'document', parent_id: parentId ?? null }
-      if (wikiSpaceId.value) docPayload.wiki_space_id = wikiSpaceId.value
-      const raw = await createTableApi(docPayload)
-      const data = (raw as any)?.data ?? raw
-      const table: Table = {
-        id: data.id,
-        name: data.name,
-        icon: data.icon || 'FileText',
-        type: SmartItemType.Document,
-        parentId: parentId ?? null,
-        content: undefined,
-        fields: [],
-        records: [],
-        views: [],
-        activeViewId: '',
-      }
-      tables.value.push(table)
-      activeTableId.value = data.id
-      documentEdited.value = false
-      return data.id
-    } catch (e) {
-      console.error('[SmartTable] Failed to create document', e)
-    }
-  }
-
-  async function addDocumentFromTemplate(name: string, templateContent: Record<string, any>, parentId?: string | null) {
-    const docId = await addDocument(name, parentId)
-    if (docId && templateContent) {
-      try {
-        await updateDocumentContentApi(docId, templateContent)
-        const t = tables.value.find(x => x.id === docId)
-        if (t) t.content = templateContent
-      } catch (e) {
-        console.error('[SmartTable] Failed to set template content', e)
-      }
-    }
-    return docId
-  }
-
-  async function addSubPage(parentId: string, name: string) {
-    return addDocument(name, parentId)
-  }
-
-  async function moveTable(tableId: string, newParentId: string | null, afterId?: string | null) {
-    const item = tables.value.find((t) => t.id === tableId)
-    if (!item) return
-    if (newParentId === tableId) return
-    if (newParentId && _isDescendant(tableId, newParentId)) return
-
-    const snapshot = [...tables.value]
-    item.parentId = newParentId
-
-    // Reorder locally: remove, then insert at correct position
-    const idx = tables.value.indexOf(item)
-    if (idx !== -1) tables.value.splice(idx, 1)
-
-    if (afterId) {
-      const afterIdx = tables.value.findIndex((t) => t.id === afterId)
-      if (afterIdx !== -1) {
-        tables.value.splice(afterIdx + 1, 0, item)
-      } else {
-        tables.value.push(item)
-      }
-    } else {
-      // Insert before the first sibling at this parent level
-      const firstSiblingIdx = tables.value.findIndex(
-        (t) => (t.parentId ?? null) === (newParentId ?? null),
-      )
-      if (firstSiblingIdx !== -1) {
-        tables.value.splice(firstSiblingIdx, 0, item)
-      } else {
-        tables.value.push(item)
-      }
-    }
-
-    try {
-      await moveTableApi(tableId, newParentId, afterId)
-    } catch (e) {
-      tables.value = snapshot
-      console.error('[SmartTable] Failed to move table', e)
-    }
-  }
-
-  function _isDescendant(ancestorId: string, nodeId: string): boolean {
-    let current = tables.value.find((t) => t.id === nodeId)
-    while (current?.parentId) {
-      if (current.parentId === ancestorId) return true
-      current = tables.value.find((t) => t.id === current!.parentId)
-    }
-    return false
-  }
-
-  function updateDocumentContent(content: any) {
-    const t = activeTable.value
-    if (!t || t.type !== SmartItemType.Document) return
-    t.content = content
-    documentEdited.value = true
-
-    if (_docSaveTimer) clearTimeout(_docSaveTimer)
-    _docPendingSave = { tableId: t.id, content }
-    documentSaving.value = true
-    _docSaveTimer = setTimeout(() => {
-      _executeDocumentSave()
-    }, DOC_SAVE_DEBOUNCE)
-  }
-
-  async function _executeDocumentSave() {
-    const pending = _docPendingSave
-    if (!pending) {
-      documentSaving.value = false
-      return
-    }
-    _docPendingSave = null
-    _docSaveTimer = null
-    try {
-      await updateDocumentContentApi(pending.tableId, pending.content)
-    } catch (e) {
-      console.error('[SmartTable] Failed to save document content', e)
-    } finally {
-      if (!_docPendingSave) {
-        documentSaving.value = false
-      }
-    }
-  }
-
-  async function flushDocumentSave() {
-    if (_docSaveTimer) {
-      clearTimeout(_docSaveTimer)
-      _docSaveTimer = null
-    }
-    if (_docPendingSave) {
-      await _executeDocumentSave()
-    }
-  }
-
-  // ==================== Record CRUD ====================
-
-  const currentUser = ref('当前用户')
-
-  function getNextAutoNumber(table: Table, fieldId: string): number {
-    let max = 0
-    for (const r of table.records) {
-      const v = Number(r.values[fieldId])
-      if (!isNaN(v) && v > max) max = v
-    }
-    return max + 1
-  }
-
-  function fillSystemFields(table: Table, record: TableRecord) {
-    for (const field of table.fields) {
-      if (field.type === FieldType.AutoNumber) {
-        record.values[field.id] = getNextAutoNumber(table, field.id)
-      }
-    }
-    record.createdBy = currentUser.value
-    record.modifiedBy = currentUser.value
-  }
-
-  // Formula values are now computed by the backend and returned in record.values.
-  // This function is kept as a no-op for backward compatibility with existing call sites.
-  function computeFormulaFields(_table: Table) {
-    // no-op: backend handles formula computation
-  }
-
-  async function addRecord(tableId?: string) {
-    const t = tableId ? tables.value.find((tb) => tb.id === tableId) : activeTable.value
-    if (!t) return
-    const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
-    const record: TableRecord = { id: '', values: {}, createdTime: now, modifiedTime: now }
-    fillSystemFields(t, record)
-
-    if (!isOnline.value) {
-      record.id = `offline_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`
-      t.records.push(record)
-      computeFormulaFields(t)
-      addPendingOp({
-        type: 'createRecord',
-        tableId: t.id,
-        recordId: record.id,
-        payload: { values: record.values },
-      }).then(() => _refreshOfflineCount())
-      return record
-    }
-
-    try {
-      const raw = await createRecordApi(t.id, record.values)
-      const data = (raw as any)?.data ?? raw
-      record.id = data.id
-      record.createdTime = data.sys_create_datetime || now
-      t.records.push(record)
-      computeFormulaFields(t)
-      return record
-    } catch (e) {
-      console.error('[SmartTable] Failed to create record', e)
-    }
-  }
-
-  function insertRecord(anchorRecordId: string, position: 'above' | 'below') {
-    const t = activeTable.value
-    if (!t) return
-    const idx = t.records.findIndex((r) => r.id === anchorRecordId)
-    if (idx === -1) return
-    const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
-    const record: TableRecord = { id: '', values: {}, createdTime: now, modifiedTime: now }
-    fillSystemFields(t, record)
-    const insertIdx = position === 'above' ? idx : idx + 1
-
-    createRecordApi(t.id, record.values).then((raw) => {
-      const data = (raw as any)?.data ?? raw
-      record.id = data.id
-    }).catch((e) => console.error('[SmartTable] Failed to create record', e))
-
-    record.id = `temp_${Date.now()}`
-    t.records.splice(insertIdx, 0, record)
-    computeFormulaFields(t)
-    return record
-  }
-
-  function duplicateRecord(recordId: string) {
-    const t = activeTable.value
-    if (!t) return
-    const src = t.records.find((r) => r.id === recordId)
-    if (!src) return
-    const idx = t.records.indexOf(src)
-    const now = dayjs().format('YYYY-MM-DD HH:mm:ss')
-    const values = JSON.parse(JSON.stringify(src.values))
-    const record: TableRecord = { id: '', values, createdTime: now, modifiedTime: now }
-    fillSystemFields(t, record)
-
-    createRecordApi(t.id, values).then((raw) => {
-      const data = (raw as any)?.data ?? raw
-      record.id = data.id
-    }).catch((e) => console.error('[SmartTable] Failed to duplicate record', e))
-
-    record.id = `temp_${Date.now()}`
-    t.records.splice(idx + 1, 0, record)
-    computeFormulaFields(t)
-    return record
-  }
-
-  function flushCellWriteQueue() {
-    const queue = { ...cellWriteQueue.value }
-    cellWriteQueue.value = {}
-    _cellFlushTimer = null
-
-    const recordIds = Object.keys(queue)
-    if (recordIds.length === 0) return
-
-    const tid = activeTableId.value
-    if (!tid) return
-
-    if (!isOnline.value) {
-      for (const recordId of recordIds) {
-        const cells = queue[recordId]!
-        for (const [fieldId, value] of Object.entries(cells)) {
-          addPendingOp({
-            type: 'updateCell',
-            tableId: tid,
-            recordId,
-            payload: { fieldId, value },
-          }).catch(() => {})
-        }
-      }
-      _refreshOfflineCount()
-      return
-    }
-
-    if (recordIds.length === 1) {
-      const recordId = recordIds[0]!
-      const cells = queue[recordId]!
-      const fieldIds = Object.keys(cells)
-      if (fieldIds.length === 1) {
-        updateCellApi(recordId, fieldIds[0]!, cells[fieldIds[0]!]).catch((e) =>
-          console.error('[SmartTable] Failed to update cell', e),
-        )
-      } else {
-        batchUpdateCellsApi(recordId, cells).catch((e) =>
-          console.error('[SmartTable] Failed to batch update cells', e),
-        )
-      }
-      return
-    }
-
-    const updates = recordIds.map((rid) => ({
-      record_id: rid,
-      cells: queue[rid]!,
-    }))
-    batchUpdateMultiRecordCellsApi(tid, updates).catch((e) =>
-      console.error('[SmartTable] Failed to batch update multi records', e),
-    )
-  }
-
-  function debouncedCellWrite(recordId: string, fieldId: string, value: unknown) {
-    if (!cellWriteQueue.value[recordId]) {
-      cellWriteQueue.value[recordId] = {}
-    }
-    cellWriteQueue.value[recordId]![fieldId] = value
-
-    const totalFields = Object.values(cellWriteQueue.value).reduce(
-      (sum, cells) => sum + Object.keys(cells).length, 0,
-    )
-    if (totalFields >= CELL_BATCH_MAX) {
-      if (_cellFlushTimer) clearTimeout(_cellFlushTimer)
-      flushCellWriteQueue()
-      return
-    }
-
-    if (_cellFlushTimer) clearTimeout(_cellFlushTimer)
-    _cellFlushTimer = setTimeout(flushCellWriteQueue, CELL_WRITE_DELAY)
-  }
-
-  function updateCellValue(recordId: string, fieldId: string, value: unknown) {
-    const t = activeTable.value
-    if (!t) return
-    const record = t.records.find((r) => r.id === recordId)
-    if (!record) return
-    const oldValue = (record.values as any)[fieldId]
-    ;(record.values as any)[fieldId] = value
-    record.modifiedTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
-    record.modifiedBy = currentUser.value
-    undoStack.value.push({ recordId, fieldId, oldValue, newValue: value })
-    if (undoStack.value.length > maxHistory) undoStack.value.shift()
-    redoStack.value = []
-    computeFormulaFields(t)
-
-    debouncedCellWrite(recordId, fieldId, value)
-  }
-
-  function undo() {
-    const entry = undoStack.value.pop()
-    if (!entry) return
-    const t = activeTable.value
-    if (!t) return
-    const record = t.records.find((r) => r.id === entry.recordId)
-    if (!record) return
-    ;(record.values as any)[entry.fieldId] = entry.oldValue
-    record.modifiedTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
-    redoStack.value.push(entry)
-    debouncedCellWrite(entry.recordId, entry.fieldId, entry.oldValue)
-  }
-
-  function redo() {
-    const entry = redoStack.value.pop()
-    if (!entry) return
-    const t = activeTable.value
-    if (!t) return
-    const record = t.records.find((r) => r.id === entry.recordId)
-    if (!record) return
-    ;(record.values as any)[entry.fieldId] = entry.newValue
-    record.modifiedTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
-    undoStack.value.push(entry)
-    debouncedCellWrite(entry.recordId, entry.fieldId, entry.newValue)
-  }
-
-  async function deleteRecord(recordId: string) {
-    const t = activeTable.value
-    if (!t) return
-    const idx = t.records.findIndex((r) => r.id === recordId)
-    if (idx !== -1) t.records.splice(idx, 1)
-
-    if (!isOnline.value) {
-      if (!recordId.startsWith('offline_')) {
-        addPendingOp({
-          type: 'deleteRecord',
-          tableId: t.id,
-          recordId,
-          payload: {},
-        }).then(() => _refreshOfflineCount())
-      }
-      return
-    }
-
-    try {
-      await deleteRecordApi(recordId)
-    } catch (e) {
-      console.error('[SmartTable] Failed to delete record', e)
-    }
-  }
-
-  // ==================== Field CRUD ====================
-
-  async function addField(field: FieldConfig) {
-    const t = activeTable.value
-    if (!t) return
-    try {
-      const raw = await createFieldApi(t.id, {
-        name: field.name,
-        type: field.type,
-        width: field.width,
-        visible: field.visible,
-        required: field.required,
-        description: field.description,
-        config: fieldToApiConfig(field),
-        sort: t.fields.length,
-      })
-      const data = (raw as any)?.data ?? raw
-      field.id = data.id
-      t.fields.push(field)
-      t.views.forEach((v) => v.visibleFieldIds.push(field.id))
-
-      for (const v of t.views) {
-        const cfg = viewToApiConfig(v)
-        updateViewApi(v.id, { config: cfg }).catch(() => {})
-      }
-    } catch (e) {
-      console.error('[SmartTable] Failed to add field', e)
-    }
-  }
-
-  function insertField(field: FieldConfig, anchorFieldId: string, position: 'left' | 'right') {
-    const t = activeTable.value
-    if (!t) return
-    const idx = t.fields.findIndex((f) => f.id === anchorFieldId)
-    if (idx === -1) return
-    const insertIdx = position === 'left' ? idx : idx + 1
-
-    createFieldApi(t.id, {
-      name: field.name, type: field.type, width: field.width,
-      visible: field.visible, required: field.required,
-      description: field.description,
-      config: fieldToApiConfig(field), sort: insertIdx,
-    }).then((raw) => {
-      const data = (raw as any)?.data ?? raw
-      field.id = data.id
-      reorderFieldsApi(t.id, t.fields.map((f) => f.id)).catch(() => {})
-    }).catch((e) => console.error('[SmartTable] Failed to insert field', e))
-
-    field.id = field.id || `temp_${Date.now()}`
-    t.fields.splice(insertIdx, 0, field)
-    t.views.forEach((v) => {
-      const vi = v.visibleFieldIds.indexOf(anchorFieldId)
-      if (vi !== -1) {
-        v.visibleFieldIds.splice(position === 'left' ? vi : vi + 1, 0, field.id)
-      } else {
-        v.visibleFieldIds.push(field.id)
-      }
-    })
-  }
-
-  function duplicateField(fieldId: string) {
-    const t = activeTable.value
-    if (!t) return
-    const srcField = t.fields.find((f) => f.id === fieldId)
-    if (!srcField) return
-    const newField: FieldConfig = {
-      ...JSON.parse(JSON.stringify(srcField)),
-      id: `temp_${Date.now()}`,
-      name: srcField.name + ' (copy)',
-    }
-    insertField(newField, fieldId, 'right')
-    t.records.forEach((r) => {
-      if (r.values[fieldId] !== undefined) {
-        r.values[newField.id] = JSON.parse(JSON.stringify(r.values[fieldId]))
-      }
-    })
-  }
-
-  async function renameField(fieldId: string, name: string) {
-    const t = activeTable.value
-    if (!t) return
-    const field = t.fields.find((f) => f.id === fieldId)
-    if (field) {
-      field.name = name
-      try {
-        await updateFieldApi(fieldId, { name })
-      } catch (e) {
-        console.error('[SmartTable] Failed to rename field', e)
-      }
-    }
-  }
-
-  async function updateFieldFull(fieldId: string, updates: Partial<FieldConfig>) {
-    const t = activeTable.value
-    if (!t) return
-    const field = t.fields.find((f) => f.id === fieldId)
-    if (!field) return
-    Object.assign(field, updates)
-    try {
-      const apiData: Partial<SmartFieldItem> = {}
-      if (updates.name !== undefined) apiData.name = updates.name
-      if (updates.type !== undefined) apiData.type = updates.type
-      if (updates.description !== undefined) apiData.description = updates.description ?? null
-      if (updates.required !== undefined) apiData.required = updates.required
-      if (updates.width !== undefined) apiData.width = updates.width
-      if (updates.visible !== undefined) apiData.visible = updates.visible
-      apiData.config = fieldToApiConfig(field)
-      await updateFieldApi(fieldId, apiData)
-    } catch (e) {
-      console.error('[SmartTable] Failed to update field', e)
-    }
-  }
-
-  async function deleteField(fieldId: string) {
-    const t = activeTable.value
-    if (!t) return
-    const idx = t.fields.findIndex((f) => f.id === fieldId)
-    if (idx !== -1) t.fields.splice(idx, 1)
-    t.views.forEach((v) => {
-      const vi = v.visibleFieldIds.indexOf(fieldId)
-      if (vi !== -1) v.visibleFieldIds.splice(vi, 1)
-    })
-    t.records.forEach((r) => delete r.values[fieldId])
-    try {
-      await deleteFieldApi(fieldId)
-    } catch (e) {
-      console.error('[SmartTable] Failed to delete field', e)
-    }
-  }
-
-  // ==================== View CRUD ====================
-
-  async function addView(view: ViewConfig) {
-    const t = activeTable.value
-    if (!t) return
-    try {
-      const raw = await createViewApi(t.id, {
-        name: view.name,
-        type: view.type,
-        config: viewToApiConfig(view),
-      })
-      const data = (raw as any)?.data ?? raw
-      view.id = data.id
-      t.views.push(view)
-      t.activeViewId = view.id
-      await updateTableApi(t.id, { active_view_id: view.id })
-    } catch (e) {
-      console.error('[SmartTable] Failed to add view', e)
-    }
-  }
-
-  async function setActiveView(viewId: string) {
-    const t = activeTable.value
-    if (!t) return
-    const changed = t.activeViewId !== viewId
-    t.activeViewId = viewId
-    try {
-      await updateTableApi(t.id, { active_view_id: viewId })
-    } catch (e) {
-      console.error('[SmartTable] Failed to set active view', e)
-    }
-    if (changed) {
-      reloadRecords()
-    }
-  }
-
-  async function deleteView(viewId: string) {
-    const t = activeTable.value
-    if (!t || t.views.length <= 1) return
-    const idx = t.views.findIndex((v) => v.id === viewId)
-    if (idx === -1) return
-    t.views.splice(idx, 1)
-    if (t.activeViewId === viewId) {
-      t.activeViewId = t.views[0]!.id
-    }
-    try {
-      await deleteViewApi(viewId)
-      await updateTableApi(t.id, { active_view_id: t.activeViewId })
-    } catch (e) {
-      console.error('[SmartTable] Failed to delete view', e)
-    }
-  }
-
-  async function duplicateView(viewId: string) {
-    const t = activeTable.value
-    if (!t) return
-    const src = t.views.find((v) => v.id === viewId)
-    if (!src) return
-    const newView: ViewConfig = {
-      ...JSON.parse(JSON.stringify(src)),
-      id: '',
-      name: src.name + ' (copy)',
-    }
-    await addView(newView)
-  }
-
-  async function renameView(viewId: string, name: string) {
-    const t = activeTable.value
-    if (!t) return
-    const v = t.views.find((vv) => vv.id === viewId)
-    if (v) {
-      v.name = name
-      try {
-        await updateViewApi(viewId, { name })
-      } catch (e) {
-        console.error('[SmartTable] Failed to rename view', e)
-      }
-    }
-  }
-
-  let _saveViewTimer: ReturnType<typeof setTimeout> | null = null
-  const SAVE_VIEW_DEBOUNCE = 500
-
-  function saveActiveViewConfig() {
-    const v = activeView.value
-    if (!v) return
-    if (_saveViewTimer) clearTimeout(_saveViewTimer)
-    _saveViewTimer = setTimeout(() => {
-      updateViewApi(v.id, { config: viewToApiConfig(v) }).catch((e) =>
-        console.error('[SmartTable] Failed to save view config', e),
-      )
-      _saveViewTimer = null
-    }, SAVE_VIEW_DEBOUNCE)
-  }
-
-  function saveActiveViewConfigAndReload() {
-    saveActiveViewConfig()
-    reloadRecordsDebounced()
-  }
-
-  // ==================== Query (records are already server-filtered) ====================
-
-  function getFilteredRecords(): TableRecord[] {
-    const t = activeTable.value
-    if (!t) return []
-    return [...t.records]
-  }
-
-  function computeLocalAggregation(
-    records: TableRecord[],
-    fieldId: string,
-    agg: SummaryAggregation,
-  ): number | string | null {
-    const vals: number[] = []
-    let nonEmpty = 0
-    let empty = 0
-    for (const r of records) {
-      const raw = r.values[fieldId]
-      if (raw === null || raw === undefined || raw === '') {
-        empty++
-      } else {
-        nonEmpty++
-        const n = Number(raw)
-        if (!Number.isNaN(n)) vals.push(n)
-      }
-    }
-    const total = records.length
-    switch (agg) {
-      case 'COUNT': return total
-      case 'COUNTA': return nonEmpty
-      case 'COUNT_EMPTY': return empty
-      case 'PERCENT_EMPTY': return total ? Math.round((empty / total) * 100) : 0
-      case 'PERCENT_FILLED': return total ? Math.round((nonEmpty / total) * 100) : 0
-      case 'SUM': return vals.length ? vals.reduce((a, b) => a + b, 0) : null
-      case 'AVG': return vals.length ? vals.reduce((a, b) => a + b, 0) / vals.length : null
-      case 'MIN': return vals.length ? Math.min(...vals) : null
-      case 'MAX': return vals.length ? Math.max(...vals) : null
-      default: return null
-    }
-  }
-
-  function getGroupedRecords(): { key: string; label: string; records: TableRecord[]; subtotals: Record<string, any> }[] {
-    const t = activeTable.value
-    const v = activeView.value
-    if (!t || !v || v.groups.length === 0) return []
-    const records = getFilteredRecords()
-    const groupField = v.groups[0]!
-    const field = t.fields.find((f) => f.id === groupField.fieldId)
-    if (!field) return []
-
-    const groups = new Map<string, TableRecord[]>()
-    for (const record of records) {
-      const val = String(record.values[groupField.fieldId] ?? '')
-      if (!groups.has(val)) groups.set(val, [])
-      groups.get(val)!.push(record)
-    }
-
-    const summaryConfig = v.summaryConfig || {}
-
-    return Array.from(groups.entries()).map(([key, recs]) => {
-      let label = key || ''
-      if (field.options) {
-        const opt = field.options.find((o) => o.id === key)
-        if (opt) label = opt.label
-      }
-
-      const subtotals: Record<string, any> = {}
-      for (const [fid, agg] of Object.entries(summaryConfig)) {
-        subtotals[fid] = computeLocalAggregation(recs, fid, agg as SummaryAggregation)
-      }
-
-      return { key, label, records: recs, subtotals }
-    })
-  }
-
-  // ==================== State reset ====================
-
-  function clearStorage() {
-    if (_docSaveTimer) {
-      clearTimeout(_docSaveTimer)
-      _docSaveTimer = null
-    }
-    _docPendingSave = null
-    documentSaving.value = false
-    documentEdited.value = false
-
-    tables.value = []
-    activeTableId.value = ''
-    searchText.value = ''
-    loading.value = false
-    loadingMore.value = false
-    undoStack.value = []
-    redoStack.value = []
-    paginationMap.value = {}
-    cellWriteQueue.value = {}
-    prefetchCache.value = {}
-    myPermission.value = null
-    summaryData.value = {}
-    offlinePendingCount.value = 0
-    clearOfflineCache().catch(() => {})
-  }
-
-  const activePagination = computed(() => paginationMap.value[activeTableId.value])
-
-  /**
-   * 前端单元格校验。返回 { rule, params } 错误对象或 null（通过）。
-   * 组件层通过 t() 将 rule 翻译为用户可读的消息。
-   */
-  function validateCell(field: FieldConfig, value: unknown): { rule: string; params: Record<string, any>; message?: string } | null {
-    const v = field.validation
-    if (!v) {
-      if (field.required && (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0))) {
-        return { rule: 'required', params: { name: field.name } }
-      }
-      return null
-    }
-
-    if (field.required && (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0))) {
-      return { rule: 'required', params: { name: field.name }, message: v.message }
-    }
-    if (value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0)) {
-      return null
-    }
-
-    if (v.min != null) {
-      const num = Number(value)
-      if (!isNaN(num) && num < v.min) return { rule: 'min', params: { name: field.name, min: v.min }, message: v.message }
-    }
-    if (v.max != null) {
-      const num = Number(value)
-      if (!isNaN(num) && num > v.max) return { rule: 'max', params: { name: field.name, max: v.max }, message: v.message }
-    }
-    if (v.minLength != null) {
-      if (String(value).length < v.minLength) return { rule: 'minLength', params: { name: field.name, min: v.minLength }, message: v.message }
-    }
-    if (v.maxLength != null) {
-      if (String(value).length > v.maxLength) return { rule: 'maxLength', params: { name: field.name, max: v.maxLength }, message: v.message }
-    }
-    if (v.pattern) {
-      try {
-        if (!new RegExp(v.pattern).test(String(value))) return { rule: 'pattern', params: { name: field.name }, message: v.message }
-      } catch { /* invalid regex, skip */ }
-    }
-    return null
-  }
-
-  const tableTree = computed(() => {
-    const map = new Map<string, Table & { children: Table[] }>()
-    const roots: Array<Table & { children: Table[] }> = []
-    for (const t of tables.value) {
-      map.set(t.id, { ...t, children: [] })
-    }
-    for (const t of tables.value) {
-      const node = map.get(t.id)!
-      if (t.parentId && map.has(t.parentId)) {
-        map.get(t.parentId)!.children.push(node)
-      } else {
-        roots.push(node)
-      }
-    }
-    return roots
-  })
-
-  return {
-    tables,
-    tableTree,
-    activeTableId,
-    wikiSpaceId,
-    searchText,
-    loading,
-    creatingFromTemplate,
-    loadingMore,
-    currentUser,
-    activeTable,
-    activeView,
-    activePagination,
-    paginationMap,
-    loadTableList,
-    loadTableFull,
-    loadMoreRecords,
-    prefetchNextPage,
-    reloadRecords,
-    reloadRecordsDebounced,
-    flushCellWriteQueue,
-    addTable,
-    addTableFromTemplate,
-    addDocument,
-    addDocumentFromTemplate,
-    addSubPage,
-    moveTable,
-    updateDocumentContent,
-    flushDocumentSave,
-    documentSaving,
-    documentEdited,
-    renameTable,
-    updateTableCover,
-    updateTableEmoji,
-    deleteTable,
-    addRecord,
-    insertRecord,
-    duplicateRecord,
-    updateCellValue,
-    deleteRecord,
-    addField,
-    insertField,
-    duplicateField,
-    renameField,
-    updateFieldFull,
-    deleteField,
-    addView,
-    setActiveView,
-    deleteView,
-    duplicateView,
-    renameView: renameView as (viewId: string, name: string) => void,
-    saveActiveViewConfig,
-    saveActiveViewConfigAndReload,
-    getFilteredRecords,
-    getGroupedRecords,
-    computeFormulaFields,
-    clearStorage,
-    undo,
-    redo,
-    canUndo: computed(() => undoStack.value.length > 0),
-    canRedo: computed(() => redoStack.value.length > 0),
-    // Permission
-    myPermission,
-    loadMyPermission,
-    canManageTable,
-    canManagePermission,
-    canManageField,
-    canManageView,
-    canAddRecord,
-    canEditRecord,
-    canDeleteRecord,
-    canExport,
-    canImport,
-    isOwnerOrManager,
-    // Summary
-    summaryData,
-    loadSummary,
-    loadSummaryDebounced,
-    updateSummaryConfig,
-    // Group collapse
-    collapsedGroups,
-    toggleGroupCollapse,
-    isGroupCollapsed,
-    collapseAllGroups,
-    expandAllGroups,
-    // Validation
-    validateCell,
-    // Offline
-    isOnline,
-    offlinePendingCount,
-    offlineSyncing,
-    initOfflineListeners,
-    destroyOfflineListeners,
-    syncOfflineOps,
-  }
-})
diff --git a/web/apps/web-ele/src/styles/zq-smart-table/index.css b/web/apps/web-ele/src/styles/zq-smart-table/index.css
deleted file mode 100644
index 64b9086..0000000
--- a/web/apps/web-ele/src/styles/zq-smart-table/index.css
+++ /dev/null
@@ -1,454 +0,0 @@
-@import "./theme.css";
-
-/* ========== Cell editing: mainstream airtable-style inline editing ========== */
-
-/* Active cell outline */
-.zq-cell-editing {
-  outline: 2px solid var(--zq-brand-color) !important;
-  outline-offset: -1px;
-  padding: 0 !important;
-  z-index: 2;
-  position: relative;
-}
-
-/* --- el-input / el-input-number wrappers --- */
-.zq-cell-editing .el-input__wrapper,
-.zq-cell-editing .el-input-number .el-input__wrapper {
-  box-shadow: none !important;
-  border: none !important;
-  border-radius: 0 !important;
-  background: transparent !important;
-  padding: 0 6px !important;
-}
-
-.zq-cell-editing .el-input__wrapper:hover,
-.zq-cell-editing .el-input__wrapper.is-focus {
-  box-shadow: none !important;
-}
-
-.zq-cell-editing .el-input__inner {
-  height: 100%;
-  font-size: 12px;
-  color: var(--zq-text-primary);
-}
-
-/* --- el-select (Element Plus 2.4+) --- */
-.zq-cell-editing .el-select {
-  width: 100% !important;
-}
-
-.zq-cell-editing .el-select__wrapper {
-  box-shadow: none !important;
-  border: none !important;
-  border-radius: 0 !important;
-  background: transparent !important;
-  padding: 0 6px !important;
-  min-height: 0 !important;
-  height: 100% !important;
-  line-height: 22px !important;
-  gap: 2px !important;
-}
-
-.zq-cell-editing .el-select__wrapper:hover,
-.zq-cell-editing .el-select__wrapper.is-focused,
-.zq-cell-editing .el-select__wrapper.is-hovering {
-  box-shadow: none !important;
-}
-
-/* Hide the select arrow / suffix */
-.zq-cell-editing .el-select__suffix {
-  display: none !important;
-}
-
-.zq-cell-editing .el-select__caret {
-  display: none !important;
-}
-
-/* Select placeholder text */
-.zq-cell-editing .el-select__placeholder {
-  font-size: 12px;
-}
-
-/* Multi-select tags inside cell */
-.zq-cell-editing .el-select .el-tag {
-  max-height: 20px;
-  font-size: 11px;
-}
-
-/* --- el-input-number: hide +/- controls --- */
-.zq-cell-editing .el-input-number {
-  width: 100% !important;
-}
-
-.zq-cell-editing .el-input-number__decrease,
-.zq-cell-editing .el-input-number__increase {
-  display: none !important;
-}
-
-/* --- el-date-picker --- */
-.zq-cell-editing .el-date-editor.el-input,
-.zq-cell-editing .el-date-editor {
-  width: 100% !important;
-}
-
-.zq-cell-editing .el-date-editor .el-input__wrapper {
-  box-shadow: none !important;
-  border: none !important;
-  padding: 0 6px !important;
-}
-
-/* Hide date prefix icon */
-.zq-cell-editing .el-input__prefix {
-  display: none !important;
-}
-
-/* ========== Table cell display enhancements ========== */
-
-/* First data column (title) bold text */
-.zq-cell-title {
-  font-weight: 600 !important;
-  color: var(--zq-text-primary);
-}
-
-/* Empty cell placeholder */
-.zq-cell-placeholder {
-  color: var(--zq-text-placeholder);
-  font-style: normal;
-  opacity: 0;
-  transition: opacity 0.15s;
-}
-
-td:hover .zq-cell-placeholder {
-  opacity: 1;
-}
-
-/* Sticky left columns (checkbox, row number, expand) */
-.zq-sticky-col {
-  position: sticky !important;
-  z-index: 3;
-  background: var(--zq-bg-cell);
-}
-
-/* Row hover highlight */
-tr:hover .zq-sticky-col {
-  background: var(--zq-bg-cell-hover) !important;
-}
-
-/* Selected row sticky column */
-tr.zq-row-selected .zq-sticky-col {
-  background: var(--zq-brand-color-light) !important;
-}
-
-/* ========== Select dropdown fix: ensure popper below cell ========== */
-.zq-cell-editing .el-select {
-  --el-select-input-focus-border-color: transparent !important;
-}
-
-/* Force select popper to appear below the trigger with correct offset */
-.zq-select-popper {
-  margin-top: 10px !important;
-}
-
-/* ========== Row number / actions toggle ========== */
-.zq-row-num-cell .zq-row-num {
-  display: block;
-}
-.zq-row-num-cell .zq-row-actions {
-  display: none;
-  align-items: center;
-  gap: 4px;
-}
-tr:hover .zq-row-num-cell .zq-row-num {
-  display: none;
-}
-tr:hover .zq-row-num-cell .zq-row-actions {
-  display: flex;
-}
-
-/* ========== Header arrow & filter hover ========== */
-.zq-header-arrow:hover,
-.zq-header-filter:hover {
-  background: var(--zq-border-color-light);
-}
-
-/* ========== Right-click context menu ========== */
-.zq-ctx-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 16px;
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--zq-text-primary);
-  transition: background 0.15s;
-}
-
-.zq-ctx-item:hover {
-  background: var(--zq-bg-cell-hover);
-}
-
-.zq-ctx-danger {
-  color: var(--zq-danger-color) !important;
-}
-
-.zq-ctx-divider {
-  height: 1px;
-  margin: 4px 0;
-  background: var(--zq-border-color-light);
-}
-
-/* ========== Field config popover ========== */
-.zq-field-popover {
-  padding: 0 !important;
-  border-radius: 8px !important;
-}
-
-.zq-field-popover .el-popover__title {
-  display: none;
-}
-
-/* ========== Frozen columns ========== */
-.zq-frozen-col {
-  position: sticky;
-  z-index: 4;
-  background: inherit;
-}
-
-.zq-frozen-col-last {
-  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.06);
-}
-
-thead .zq-frozen-col {
-  z-index: 21;
-}
-
-/* ========== Focused cell (keyboard nav) ========== */
-.zq-cell-focused {
-  outline: 2px solid var(--zq-brand-color) !important;
-  outline-offset: -2px;
-}
-
-/* ========== Region selection ========== */
-.zq-cell-in-selection {
-  background: var(--zq-brand-color-light) !important;
-  position: relative;
-}
-
-.zq-cell-in-selection::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: -1px;
-  bottom: -1px;
-  pointer-events: none;
-  border: 0 solid var(--zq-brand-color);
-  z-index: 5;
-}
-.zq-sel-top::after    { border-top-width: 2px !important; }
-.zq-sel-bottom::after { border-bottom-width: 2px !important; }
-.zq-sel-left::after   { border-left-width: 2px !important; }
-.zq-sel-right::after  { border-right-width: 2px !important; }
-
-/* ========== Search highlight ========== */
-.zq-cell-search-hit {
-  background: rgba(255, 196, 0, 0.18) !important;
-}
-
-/* ========== Validation error ========== */
-.zq-cell-error {
-  outline: 2px solid #f54a45 !important;
-  outline-offset: -1px;
-  background: rgba(245, 74, 69, 0.06) !important;
-}
-
-/* ========== Column drag reorder ========== */
-.zq-col-drag-over {
-  border-left: 2px solid var(--zq-brand-color) !important;
-}
-
-/* ========== Row drag reorder ========== */
-.zq-row-drag-over td {
-  border-top: 2px solid var(--zq-brand-color) !important;
-}
-
-/* ========== Drawer field icon ========== */
-.zq-drawer-field-icon {
-  color: var(--zq-text-placeholder);
-  flex-shrink: 0;
-}
-
-/* ========== Checkbox check animation ========== */
-.el-checkbox__input.is-checked .el-checkbox__inner {
-  animation: zq-check-bounce 0.25s ease;
-}
-@keyframes zq-check-bounce {
-  0% { transform: scale(0.8); }
-  50% { transform: scale(1.15); }
-  100% { transform: scale(1); }
-}
-
-/* ========== Row fade-in ========== */
-.zq-row-enter-active {
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-.zq-row-enter-from {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-/* ========== Custom scrollbar ========== */
-.zq-table-scroll::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-.zq-table-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-.zq-table-scroll::-webkit-scrollbar-thumb {
-  background: var(--zq-border-color);
-  border-radius: 4px;
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-.zq-table-scroll::-webkit-scrollbar-thumb:hover {
-  background: var(--zq-text-placeholder);
-  border: 2px solid transparent;
-  background-clip: content-box;
-}
-.zq-table-scroll::-webkit-scrollbar-corner {
-  background: transparent;
-}
-
-/* ========== Scroll shadow indicators ========== */
-.zq-scroll-shadow-left {
-  box-shadow: inset 12px 0 8px -8px rgba(0,0,0,0.08);
-}
-.zq-scroll-shadow-right {
-  box-shadow: inset -12px 0 8px -8px rgba(0,0,0,0.08);
-}
-.zq-scroll-shadow-both {
-  box-shadow: inset 12px 0 8px -8px rgba(0,0,0,0.08), inset -12px 0 8px -8px rgba(0,0,0,0.08);
-}
-
-/* ========== Keyboard shortcut badge ========== */
-.zq-kbd {
-  display: inline-block;
-  padding: 2px 6px;
-  font-size: 11px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  line-height: 1.4;
-  color: var(--zq-text-secondary);
-  background: var(--zq-bg-secondary);
-  border: 1px solid var(--zq-border-color-light);
-  border-radius: 4px;
-  box-shadow: 0 1px 0 var(--zq-border-color-light);
-}
-
-/* ========== Row left indicator ========== */
-.zq-row-indicator td:first-child {
-  position: relative;
-}
-.zq-row-indicator td:first-child::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: 3px;
-  border-radius: 0 2px 2px 0;
-  background: transparent;
-  transition: background 0.15s;
-}
-.zq-row-indicator:hover td:first-child::before {
-  background: var(--zq-brand-color);
-  opacity: 0.4;
-}
-.zq-row-selected td:first-child::before {
-  background: var(--zq-brand-color) !important;
-  opacity: 1 !important;
-}
-
-/* ========== Zebra stripes (alternating rows) ========== */
-.zq-table-zebra tbody tr:nth-child(even) td {
-  background: var(--zq-bg-secondary) !important;
-}
-
-/* ========== Group collapse / subtotal ========== */
-.zq-group-header td {
-  transition: background 0.15s;
-}
-.zq-group-header:hover td {
-  background: var(--zq-bg-cell-hover) !important;
-}
-.zq-group-chevron {
-  transition: transform 0.2s ease;
-  color: var(--zq-text-secondary);
-  flex-shrink: 0;
-}
-.zq-group-chevron.rotate-90 {
-  transform: rotate(90deg);
-}
-.zq-group-subtotal td {
-  background: var(--zq-bg-secondary);
-}
-
-/* ========== Summary row (fixed at bottom) ========== */
-.zq-summary-row {
-  position: relative;
-  z-index: 5;
-}
-.zq-summary-sticky-col {
-  position: sticky !important;
-  left: 0;
-  z-index: 3;
-  background: var(--zq-bg-header);
-}
-
-/* ========== Print styles ========== */
-@media print {
-  body { background: #fff !important; }
-  .zq-table-scroll { overflow: visible !important; max-height: none !important; }
-  table { page-break-inside: auto; }
-  tr { page-break-inside: avoid; page-break-after: auto; }
-  thead { display: table-header-group; }
-  .zq-sticky-col, .zq-frozen-col { position: static !important; }
-  .el-drawer, .el-overlay, .el-message, .el-message-box { display: none !important; }
-  .zq-frozen-col-last { box-shadow: none !important; }
-}
-
-/* ========== Scrollbar styling ========== */
-.zq-table-scroll::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.zq-table-scroll::-webkit-scrollbar-thumb {
-  background: var(--zq-border-color);
-  border-radius: 3px;
-}
-
-.zq-table-scroll::-webkit-scrollbar-thumb:hover {
-  background: var(--zq-text-placeholder);
-}
-
-/* ========== Record drawer: comment panel full height ========== */
-.zq-drawer-body:has(.zq-drawer-with-comment) {
-  padding: 0 !important;
-}
-.zq-drawer-body:has(.zq-drawer-with-comment) > .el-scrollbar {
-  height: 100%;
-}
-.zq-drawer-body:has(.zq-drawer-with-comment) .el-scrollbar__wrap {
-  overflow: hidden !important;
-}
-.zq-drawer-body:has(.zq-drawer-with-comment) .el-scrollbar__view,
-.zq-drawer-body:has(.zq-drawer-with-comment) .el-scrollbar__view > div {
-  height: 100%;
-  padding: 0 !important;
-}
-
-/* Comment input focus ring */
-.zq-comment-input-wrap:focus-within {
-  border-color: var(--zq-brand-color) !important;
-}
diff --git a/web/apps/web-ele/src/styles/zq-smart-table/theme.css b/web/apps/web-ele/src/styles/zq-smart-table/theme.css
deleted file mode 100644
index 28ee9a6..0000000
--- a/web/apps/web-ele/src/styles/zq-smart-table/theme.css
+++ /dev/null
@@ -1,45 +0,0 @@
-:root {
-  --zq-bg-primary: #ffffff;
-  --zq-bg-secondary: #f5f7fa;
-  --zq-bg-sidebar: #f0f2f5;
-  --zq-bg-toolbar: #ffffff;
-  --zq-bg-cell: #ffffff;
-  --zq-bg-cell-hover: #f5f7fa;
-  --zq-bg-header: #fafafa;
-  --zq-text-primary: #1f2329;
-  --zq-text-secondary: #646a73;
-  --zq-text-placeholder: #bbbfc4;
-  --zq-border-color: #dee0e3;
-  --zq-border-color-light: #e8eaed;
-  --zq-brand-color: #3370ff;
-  --zq-brand-color-hover: #4e83fd;
-  --zq-brand-color-light: #e1eaff;
-  --zq-success-color: #34c724;
-  --zq-warning-color: #ff7d00;
-  --zq-danger-color: #f54a45;
-  --zq-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --zq-shadow-lg: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-html.dark {
-  --zq-bg-primary: #1a1a1a;
-  --zq-bg-secondary: #232324;
-  --zq-bg-sidebar: #1e1e1f;
-  --zq-bg-toolbar: #252526;
-  --zq-bg-cell: #1e1e1f;
-  --zq-bg-cell-hover: #2a2a2b;
-  --zq-bg-header: #252526;
-  --zq-text-primary: #e0e0e0;
-  --zq-text-secondary: #a0a0a0;
-  --zq-text-placeholder: #5a5a5a;
-  --zq-border-color: #3a3a3c;
-  --zq-border-color-light: #2e2e30;
-  --zq-brand-color: #4e83fd;
-  --zq-brand-color-hover: #6e9bff;
-  --zq-brand-color-light: #1a2744;
-  --zq-success-color: #34c724;
-  --zq-warning-color: #ff7d00;
-  --zq-danger-color: #f54a45;
-  --zq-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  --zq-shadow-lg: 0 4px 12px 0 rgba(0, 0, 0, 0.4);
-}
diff --git a/web/apps/web-ele/src/types/zq-smart-table/field.ts b/web/apps/web-ele/src/types/zq-smart-table/field.ts
deleted file mode 100644
index 024c519..0000000
--- a/web/apps/web-ele/src/types/zq-smart-table/field.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-export enum FieldType {
-  Text = 'text',
-  Number = 'number',
-  SingleSelect = 'singleSelect',
-  MultiSelect = 'multiSelect',
-  Date = 'date',
-  Checkbox = 'checkbox',
-  Person = 'person',
-  Attachment = 'attachment',
-  URL = 'url',
-  Email = 'email',
-  Phone = 'phone',
-  Rating = 'rating',
-  Progress = 'progress',
-  Currency = 'currency',
-  AutoNumber = 'autoNumber',
-  Location = 'location',
-  CreatedTime = 'createdTime',
-  ModifiedTime = 'modifiedTime',
-  CreatedBy = 'createdBy',
-  ModifiedBy = 'modifiedBy',
-  Formula = 'formula',
-  RichText = 'richText',
-  User = 'user',
-  Department = 'department',
-  Region = 'region',
-  Image = 'image',
-  Link = 'link',
-  Lookup = 'lookup',
-  Rollup = 'rollup',
-}
-
-export type NumberFormat = 'number' | 'currency' | 'percent' | 'yuan'
-export type CurrencySymbol = '¥' | '$' | '€' | '£' | '₩'
-
-export interface SelectOption {
-  id: string
-  label: string
-  color: string
-}
-
-export interface AttachmentItem {
-  id: string
-  name: string
-  size: number
-  type: string
-  url: string
-  thumbnailUrl?: string
-}
-
-export type RollupAggregation = 'COUNT' | 'COUNTA' | 'SUM' | 'AVG' | 'MIN' | 'MAX'
-
-export interface FieldValidation {
-  min?: number | null
-  max?: number | null
-  minLength?: number | null
-  maxLength?: number | null
-  pattern?: string | null
-  unique?: boolean
-  message?: string
-}
-
-export interface LinkedRecordItem {
-  id: string
-  title: string
-}
-
-export interface FieldConfig {
-  id: string
-  name: string
-  type: FieldType
-  width: number
-  visible: boolean
-  required: boolean
-  description?: string
-  options?: SelectOption[]
-  precision?: number
-  numberFormat?: NumberFormat
-  dateFormat?: string
-  includeTime?: boolean
-  maxRating?: number
-  currencySymbol?: CurrencySymbol
-  formula?: string
-  formulaResultType?: 'text' | 'number' | 'date' | 'boolean'
-  multiple?: boolean
-  regionLevel?: 'province' | 'city' | 'district'
-  maxImageCount?: number
-  linkedTableId?: string
-  symmetricFieldId?: string
-  linkFieldId?: string
-  lookupFieldId?: string
-  rollupFieldId?: string
-  aggregation?: RollupAggregation
-  validation?: FieldValidation
-}
-
-export const FIELD_TYPE_LABELS: Record<FieldType, string> = {
-  [FieldType.Text]: 'field.text',
-  [FieldType.Number]: 'field.number',
-  [FieldType.SingleSelect]: 'field.singleSelect',
-  [FieldType.MultiSelect]: 'field.multiSelect',
-  [FieldType.Date]: 'field.date',
-  [FieldType.Checkbox]: 'field.checkbox',
-  [FieldType.Person]: 'field.person',
-  [FieldType.Attachment]: 'field.attachment',
-  [FieldType.URL]: 'field.url',
-  [FieldType.Email]: 'field.email',
-  [FieldType.Phone]: 'field.phone',
-  [FieldType.Rating]: 'field.rating',
-  [FieldType.Progress]: 'field.progress',
-  [FieldType.Currency]: 'field.currency',
-  [FieldType.AutoNumber]: 'field.autoNumber',
-  [FieldType.Location]: 'field.location',
-  [FieldType.CreatedTime]: 'field.createdTime',
-  [FieldType.ModifiedTime]: 'field.modifiedTime',
-  [FieldType.CreatedBy]: 'field.createdBy',
-  [FieldType.ModifiedBy]: 'field.modifiedBy',
-  [FieldType.Formula]: 'field.formula',
-  [FieldType.RichText]: 'field.richText',
-  [FieldType.User]: 'field.user',
-  [FieldType.Department]: 'field.department',
-  [FieldType.Region]: 'field.region',
-  [FieldType.Image]: 'field.image',
-  [FieldType.Link]: 'field.link',
-  [FieldType.Lookup]: 'field.lookup',
-  [FieldType.Rollup]: 'field.rollup',
-}
-
-export const SELECT_COLORS = [
-  '#4e83fd', '#36b37e', '#ff991f', '#f54a45',
-  '#8777d9', '#00b8d9', '#ff6b6b', '#36b37e',
-  '#ffc400', '#6554c0', '#00c7e6', '#ff8f73',
-]
diff --git a/web/apps/web-ele/src/types/zq-smart-table/index.ts b/web/apps/web-ele/src/types/zq-smart-table/index.ts
deleted file mode 100644
index fa4fd85..0000000
--- a/web/apps/web-ele/src/types/zq-smart-table/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './field'
-export * from './table'
diff --git a/web/apps/web-ele/src/types/zq-smart-table/table.ts b/web/apps/web-ele/src/types/zq-smart-table/table.ts
deleted file mode 100644
index dd8f0e5..0000000
--- a/web/apps/web-ele/src/types/zq-smart-table/table.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import type { FieldConfig, AttachmentItem } from './field'
-
-export type CellValue = string | number | boolean | string[] | AttachmentItem[] | null | undefined
-
-export type DependencyType = 'FS' | 'FF' | 'SS' | 'SF'
-
-export interface GanttDependency {
-  id: string
-  fromRecordId: string
-  toRecordId: string
-  type: DependencyType
-}
-
-export interface Record {
-  id: string
-  values: { [fieldId: string]: CellValue }
-  createdTime: string
-  modifiedTime: string
-  createdBy?: string
-  modifiedBy?: string
-}
-
-export enum ViewType {
-  Grid = 'grid',
-  Kanban = 'kanban',
-  Gallery = 'gallery',
-  Form = 'form',
-  Calendar = 'calendar',
-  Gantt = 'gantt',
-}
-
-export interface SortRule {
-  fieldId: string
-  direction: 'asc' | 'desc'
-}
-
-export interface FilterRule {
-  fieldId: string
-  operator: FilterOperator
-  value: CellValue
-}
-
-export enum FilterOperator {
-  Equals = 'equals',
-  NotEquals = 'notEquals',
-  Contains = 'contains',
-  NotContains = 'notContains',
-  IsEmpty = 'isEmpty',
-  IsNotEmpty = 'isNotEmpty',
-  GreaterThan = 'greaterThan',
-  LessThan = 'lessThan',
-}
-
-export interface GroupRule {
-  fieldId: string
-}
-
-export type RowHeight = 'short' | 'medium' | 'tall' | 'extraTall'
-
-export interface ConditionalFormatRule {
-  id: string
-  fieldId: string
-  operator: FilterOperator
-  value: CellValue
-  bgColor: string
-  textColor: string
-  applyToRow: boolean
-}
-
-export type SummaryAggregation =
-  | 'SUM' | 'AVG' | 'MIN' | 'MAX'
-  | 'COUNT' | 'COUNTA' | 'COUNT_EMPTY'
-  | 'PERCENT_EMPTY' | 'PERCENT_FILLED'
-
-export interface ViewConfig {
-  id: string
-  name: string
-  type: ViewType
-  filters: FilterRule[]
-  filterLogic: 'and' | 'or'
-  sorts: SortRule[]
-  groups: GroupRule[]
-  visibleFieldIds: string[]
-  conditionalFormats?: ConditionalFormatRule[]
-  kanbanFieldId?: string
-  ganttStartFieldId?: string
-  ganttEndFieldId?: string
-  ganttDependencies?: GanttDependency[]
-  ganttMilestoneFieldId?: string
-  calendarDateFieldId?: string
-  calendarEndDateFieldId?: string
-  calendarMode?: 'month' | 'week' | 'day'
-  rowHeight?: RowHeight
-  zebra?: boolean
-  frozenFieldId?: string
-  summaryConfig?: Record<string, SummaryAggregation>
-}
-
-export enum SmartItemType {
-  Table = 'table',
-  Document = 'document',
-}
-
-export interface Table {
-  id: string
-  name: string
-  icon: string
-  type: SmartItemType
-  parentId?: string | null
-  wikiSpaceId?: string | null
-  content?: any
-  cover?: string | null
-  emoji?: string | null
-  fields: FieldConfig[]
-  records: Record[]
-  views: ViewConfig[]
-  activeViewId: string
-  children?: Table[]
-  createdAt?: string
-  updatedAt?: string
-  creatorId?: string
-  creatorName?: string
-  creatorAvatar?: string
-}
-
-export interface WikiSpace {
-  id: string
-  name: string
-  icon: string
-  avatar?: string | null
-  description?: string
-  cover?: string | null
-  category: string
-  visibility: string
-  documentCount?: number
-  createdAt?: string
-  updatedAt?: string
-  creatorId?: string
-  creatorName?: string
-}
diff --git a/web/apps/web-ele/src/utils/form-data-filters.ts b/web/apps/web-ele/src/utils/form-data-filters.ts
deleted file mode 100644
index 4483634..0000000
--- a/web/apps/web-ele/src/utils/form-data-filters.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import type { FormDataFilter } from '#/components/form-design/store/formDesignStore';
-
-import { getFormDataListApi } from '#/api/online-dev/form-data-api';
-
-/** 根据 formFilters 与当前表单值构建列表 API 查询参数 */
-export function buildFormDataFilterParams(
-  filters: FormDataFilter[],
-  modelValue: Record<string, any>,
-): Record<string, any> {
-  const params: Record<string, any> = {};
-
-  for (const filter of filters) {
-    if (!filter.sourceField || !filter.targetField) continue;
-
-    const sourceValue = modelValue[filter.sourceField];
-
-    if (filter.filterType === 'null') {
-      params[`${filter.targetField}__null`] = 'true';
-      continue;
-    }
-    if (filter.filterType === 'not_null') {
-      params[`${filter.targetField}__not_null`] = 'true';
-      continue;
-    }
-
-    if (
-      sourceValue === undefined ||
-      sourceValue === null ||
-      sourceValue === ''
-    ) {
-      continue;
-    }
-
-    switch (filter.filterType) {
-      case 'eq': {
-        params[filter.targetField] = sourceValue;
-        break;
-      }
-      case 'gt': {
-        params[`${filter.targetField}__gt`] = sourceValue;
-        break;
-      }
-      case 'gte': {
-        params[`${filter.targetField}__gte`] = sourceValue;
-        break;
-      }
-      case 'in': {
-        const values = Array.isArray(sourceValue)
-          ? sourceValue.join(',')
-          : sourceValue;
-        params[`filter_${filter.targetField}`] = values;
-        break;
-      }
-      case 'like': {
-        params[`${filter.targetField}__like`] = sourceValue;
-        break;
-      }
-      case 'lt': {
-        params[`${filter.targetField}__lt`] = sourceValue;
-        break;
-      }
-      case 'lte': {
-        params[`${filter.targetField}__lte`] = sourceValue;
-        break;
-      }
-      case 'ne': {
-        params[`${filter.targetField}__ne`] = sourceValue;
-        break;
-      }
-      default: {
-        break;
-      }
-    }
-  }
-
-  return params;
-}
-
-/** 将 formFilters 转为 FormDataList.initialFilters 格式 */
-export function buildFormSelectorInitialFilters(
-  filters: FormDataFilter[],
-  modelValue: Record<string, any>,
-): Record<string, { type: string; value: any }> {
-  const result: Record<string, { type: string; value: any }> = {};
-
-  for (const filter of filters) {
-    if (!filter.sourceField || !filter.targetField) continue;
-
-    const sourceValue = modelValue[filter.sourceField];
-
-    if (filter.filterType === 'null') {
-      result[filter.targetField] = { type: 'null', value: true };
-      continue;
-    }
-    if (filter.filterType === 'not_null') {
-      result[filter.targetField] = { type: 'not_null', value: true };
-      continue;
-    }
-
-    if (
-      sourceValue === undefined ||
-      sourceValue === null ||
-      sourceValue === ''
-    ) {
-      continue;
-    }
-
-    const type =
-      filter.filterType === 'in' ? 'in' : filter.filterType || 'eq';
-    result[filter.targetField] = { type, value: sourceValue };
-  }
-
-  return result;
-}
-
-/** 分页拉取全部表单数据（用于一对多关联自动填充） */
-export async function fetchAllFormDataPages(
-  formCode: string,
-  filterParams: Record<string, any>,
-  pageSize = 500,
-): Promise<Record<string, any>[]> {
-  const allItems: Record<string, any>[] = [];
-  let page = 1;
-  let total = Number.POSITIVE_INFINITY;
-
-  while (allItems.length < total) {
-    const res = await getFormDataListApi(formCode, {
-      ...filterParams,
-      page,
-      pageSize,
-    });
-    const items = res?.items || [];
-    total = res?.total ?? items.length;
-    allItems.push(...items);
-    if (items.length < pageSize) break;
-    page += 1;
-  }
-
-  return allItems;
-}
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index f41dc61..235e0b8 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -778,18 +778,12 @@ importers:
       nanoid:
         specifier: ^5.1.7
         version: 5.1.7
-      perfect-freehand:
-        specifier: ^1.2.3
-        version: 1.2.3
       pinia:
         specifier: ^3.0.3
         version: 3.0.4(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
-      roughjs:
-        specifier: ^4.6.6
-        version: 4.6.6
       uuid:
         specifier: ^13.0.0
         version: 13.0.0
@@ -8190,9 +8184,6 @@ packages:
   h3@1.15.4:
     resolution: {integrity: sha512-z5cFQWDffyOe4vQ9xIqNfCZdV4p//vy6fBnr8Q1AWnVZ0teurKMG66rLj++TKwKPUP3u7iMUvrvKaEUiQw2QWQ==}
 
-  hachure-fill@0.5.2:
-    resolution: {integrity: sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==}
-
   happy-dom@17.6.3:
     resolution: {integrity: sha512-UVIHeVhxmxedbWPCfgS55Jg2rDfwf2BCKeylcPSqazLz5w3Kri7Q4xdBJubsr/+VUzFLh0VjIvh13RaDA2/Xug==}
     engines: {node: '>=20.0.0'}
@@ -9636,9 +9627,6 @@ packages:
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
-  path-data-parser@0.1.0:
-    resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
-
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -9693,9 +9681,6 @@ packages:
   perfect-debounce@2.0.0:
     resolution: {integrity: sha512-fkEH/OBiKrqqI/yIgjR92lMfs2K8105zt/VT6+7eTjNwisrsh47CeIED9z58zI7DfKdH3uHAn25ziRZn3kgAow==}
 
-  perfect-freehand@1.2.3:
-    resolution: {integrity: sha512-bHZSfqDHGNlPpgH2yxXgPHlQSPpEbo+qg7li0M78J9vNAi2yjwLeA4x79BEQhX44lEWpCLSFCeRZwpw0niiXPA==}
-
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -9769,12 +9754,6 @@ packages:
     resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
     engines: {node: '>=10.13.0'}
 
-  points-on-curve@0.2.0:
-    resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==}
-
-  points-on-path@0.2.1:
-    resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
-
   popmotion@11.0.5:
     resolution: {integrity: sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==}
 
@@ -10822,9 +10801,6 @@ packages:
     resolution: {integrity: sha512-G7689wvCM0szMFXUAhi3GfNGcSPlndg077cdRWoq7UegOAwfU2MJ0jD7s7jB+2ppKA75Kr/O0HwAP9+rRdBctg==}
     engines: {node: ^14.13.1 || >=16.0.0}
 
-  roughjs@4.6.6:
-    resolution: {integrity: sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==}
-
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
@@ -20304,8 +20280,6 @@ snapshots:
       ufo: 1.6.1
       uncrypto: 0.1.3
 
-  hachure-fill@0.5.2: {}
-
   happy-dom@17.6.3:
     dependencies:
       webidl-conversions: 7.0.0
@@ -21760,8 +21734,6 @@ snapshots:
 
   path-browserify@1.0.1: {}
 
-  path-data-parser@0.1.0: {}
-
   path-exists@4.0.0: {}
 
   path-exists@5.0.0: {}
@@ -21798,8 +21770,6 @@ snapshots:
 
   perfect-debounce@2.0.0: {}
 
-  perfect-freehand@1.2.3: {}
-
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -21854,13 +21824,6 @@ snapshots:
 
   pngjs@5.0.0: {}
 
-  points-on-curve@0.2.0: {}
-
-  points-on-path@0.2.1:
-    dependencies:
-      path-data-parser: 0.1.0
-      points-on-curve: 0.2.0
-
   popmotion@11.0.5:
     dependencies:
       framesync: 6.1.2
@@ -22983,13 +22946,6 @@ snapshots:
 
   rotated-array-set@3.0.0: {}
 
-  roughjs@4.6.6:
-    dependencies:
-      hachure-fill: 0.5.2
-      path-data-parser: 0.1.0
-      points-on-curve: 0.2.0
-      points-on-path: 0.2.1
-
   rrweb-cssom@0.8.0:
     optional: true