c-admin-kit 1.0.0

package/src/components/SimpleTable/useTableColumnConfig.ts

@@ -0,0 +1,139 @@
+import { ref, computed, nextTick } from "vue"
+import type { TableColumn, TableColumnConfigProps, UseTableColumnConfigReturn } from '../../types'
+
+/**
+ * 表格自定义列配置 Hook (解耦版，优先使用外部传入 API，未传则默认降级使用 LocalStorage)
+ */
+export function useTableColumnConfig(
+  props: TableColumnConfigProps,
+  calculateTableHeight?: () => void
+): UseTableColumnConfigReturn {
+  // 所有带有标识的列，附加一个 _key
+  const enhancedColumns = computed<TableColumn[]>(() => {
+    return (props.columns || []).map((col, index) => {
+      return {
+        ...col,
+        _key: col.prop || col.slot || col.type || col.label || `col_${index}`,
+      }
+    })
+  })
+
+  // 允许在面板中配置的列 (过滤掉 selection、drag 和没有 label 的列)
+  const settingColumns = computed<TableColumn[]>(() => {
+    return enhancedColumns.value.filter(
+      (col) => col.type !== "selection" && col.type !== "drag" && col.label
+    )
+  })
+
+  const visibleColKeys = ref<string[]>([])
+  const tempVisibleColKeys = ref<string[]>([])
+  const popoverRef = ref<any>(null)
+  const savingColumns = ref(false)
+
+  // 真正传递给 el-table 的列
+  const computedColumns = computed<TableColumn[]>(() => {
+    if (!props.tableKey) return enhancedColumns.value
+    return enhancedColumns.value.filter((col) => {
+      const isConfigurable = settingColumns.value.some((c) => c._key === col._key)
+      if (!isConfigurable) return true
+      return visibleColKeys.value.includes(col._key!)
+    })
+  })
+
+  const getStorageKey = (): string => {
+    return `c_table_hide_cols_${props.tableKey}`
+  }
+
+  // 初始化列配置
+  const initTableConfig = async (): Promise<void> => {
+    visibleColKeys.value = settingColumns.value.map((c) => c._key!)
+    if (!props.tableKey) return
+
+    try {
+      let hideList: string[] = []
+      // 1. 如果外部提供了获取配置的 API
+      if (typeof props.getColumnConfigApi === 'function') {
+        const res = await props.getColumnConfigApi({ tableKey: props.tableKey })
+        hideList = res?.data || res || []
+      } else {
+        // 2. 默认降级使用 localStorage
+        const cached = localStorage.getItem(getStorageKey())
+        if (cached) {
+          hideList = JSON.parse(cached)
+        }
+      }
+
+      if (Array.isArray(hideList) && hideList.length > 0) {
+        visibleColKeys.value = settingColumns.value
+          .filter((c) => !hideList.includes(c._key!))
+          .map((c) => c._key!)
+      }
+    } catch (e) {
+      console.warn("CSimpleTable: 获取表格隐藏列配置失败", e)
+    }
+  }
+
+  const handlePopoverShow = (): void => {
+    tempVisibleColKeys.value = [...visibleColKeys.value]
+  }
+
+  const handleCancelSettings = (): void => {
+    if (popoverRef.value) {
+      popoverRef.value.hide()
+    }
+  }
+
+  const handleConfirmSettings = async (): Promise<void> => {
+    savingColumns.value = true
+
+    if (props.tableKey) {
+      const hideFields = settingColumns.value
+        .filter((c) => !tempVisibleColKeys.value.includes(c._key!))
+        .map((c) => c._key!)
+
+      try {
+        if (typeof props.saveColumnConfigApi === 'function') {
+          await props.saveColumnConfigApi({
+            tableKey: props.tableKey,
+            hideFields,
+          })
+        } else {
+          localStorage.setItem(getStorageKey(), JSON.stringify(hideFields))
+        }
+
+        visibleColKeys.value = [...tempVisibleColKeys.value]
+
+        if (calculateTableHeight) {
+          nextTick(() => {
+            calculateTableHeight()
+          })
+        }
+
+        if (popoverRef.value) {
+          popoverRef.value.hide()
+        }
+      } catch (error) {
+        console.error("CSimpleTable: 保存表格隐藏列配置失败", error)
+      } finally {
+        savingColumns.value = false
+      }
+    } else {
+      visibleColKeys.value = [...tempVisibleColKeys.value]
+      savingColumns.value = false
+      if (popoverRef.value) popoverRef.value.hide()
+    }
+  }
+
+  return {
+    computedColumns,
+    settingColumns,
+    visibleColKeys,
+    tempVisibleColKeys,
+    popoverRef,
+    savingColumns,
+    initTableConfig,
+    handlePopoverShow,
+    handleCancelSettings,
+    handleConfirmSettings,
+  }
+}

package/src/components/diff/index.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="c-diff-container" v-loading="loading">
+    <span
+      v-for="(part, index) in diffResult"
+      :key="index"
+      :class="getPartClass(part)"
+      :title="getPartTitle(part)"
+      v-html="escapeHtml(part.value)"
+    ></span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from "vue";
+
+interface DiffPart {
+  type: "unchanged" | "removed" | "added";
+  value: string;
+}
+
+defineOptions({ name: "CDiff" });
+
+const props = defineProps({
+  oldText: { type: String, default: "" },
+  newText: { type: String, default: "" },
+  similarityThreshold: { type: Number, default: 0.6 },
+});
+
+const loading = ref(false);
+const diffResult = ref<DiffPart[]>([]);
+
+const escapeHtml = (text: string | number) => {
+  return String(text)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+};
+
+// Levenshtein 编辑距离算法
+const levenshteinDistance = (a: string, b: string): number => {
+  const dp: number[][] = Array(a.length + 1)
+    .fill(null)
+    .map(() => Array(b.length + 1).fill(0));
+
+  for (let i = 0; i <= a.length; i++) dp[i][0] = i;
+  for (let j = 0; j <= b.length; j++) dp[0][j] = j;
+
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      dp[i][j] =
+        a[i - 1] === b[j - 1]
+          ? dp[i - 1][j - 1]
+          : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+    }
+  }
+  return dp[a.length][b.length];
+};
+
+const calculateSimilarity = (a: string, b: string): number => {
+  if (!a && !b) return 1;
+  if (!a || !b) return 0;
+  const longer = a.length > b.length ? a : b;
+  return (longer.length - levenshteinDistance(a, b)) / longer.length;
+};
+
+const diffChars = (oldStr: string, newStr: string): DiffPart[] => {
+  const oldArr = Array.from(oldStr);
+  const newArr = Array.from(newStr);
+
+  if (oldArr.length * newArr.length > 1_000_000) {
+    return [
+      ...(oldStr ? [{ type: "removed" as const, value: oldStr }] : []),
+      ...(newStr ? [{ type: "added" as const, value: newStr }] : []),
+    ];
+  }
+
+  const dp = Array(oldArr.length + 1)
+    .fill(null)
+    .map(() => new Int32Array(newArr.length + 1));
+
+  for (let i = 0; i <= oldArr.length; i++) {
+    for (let j = 0; j <= newArr.length; j++) {
+      if (i === 0) dp[i][j] = j;
+      else if (j === 0) dp[i][j] = i;
+      else if (oldArr[i - 1] === newArr[j - 1]) dp[i][j] = dp[i - 1][j - 1];
+      else
+        dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+    }
+  }
+
+  const result: DiffPart[] = [];
+  let i = oldArr.length,
+    j = newArr.length;
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && oldArr[i - 1] === newArr[j - 1]) {
+      result.push({ type: "unchanged", value: oldArr[i - 1] });
+      i--;
+      j--;
+    } else if (i > 0 && (j === 0 || dp[i][j] === dp[i - 1][j] + 1)) {
+      result.push({ type: "removed", value: oldArr[i - 1] });
+      i--;
+    } else {
+      result.push({ type: "added", value: newArr[j - 1] });
+      j--;
+    }
+  }
+
+  const merged: DiffPart[] = [];
+  for (const item of result.reverse()) {
+    if (merged.length && merged[merged.length - 1].type === item.type) {
+      merged[merged.length - 1].value += item.value;
+    } else {
+      merged.push({ ...item });
+    }
+  }
+  return merged;
+};
+
+const splitIntoLines = (text: string): string[] => {
+  return text ? text.split(/\r?\n/) : [];
+};
+
+const diffLines = (oldText: string, newText: string): DiffPart[] => {
+  const oldLines = splitIntoLines(oldText);
+  const newLines = splitIntoLines(newText);
+
+  const result: DiffPart[] = [];
+  let i = 0,
+    j = 0;
+
+  while (i < oldLines.length || j < newLines.length) {
+    if (i >= oldLines.length) {
+      result.push({ type: "added", value: newLines[j++] + "\n" });
+      continue;
+    }
+    if (j >= newLines.length) {
+      result.push({ type: "removed", value: oldLines[i++] + "\n" });
+      continue;
+    }
+
+    const oldLine = oldLines[i];
+    const newLine = newLines[j];
+    const oldTrim = oldLine.trim();
+    const newTrim = newLine.trim();
+    const sim = calculateSimilarity(oldTrim, newTrim);
+
+    const lenRatio =
+      Math.min(oldLine.length, newLine.length) /
+      Math.max(oldLine.length, newLine.length || 1);
+
+    const simNextOld =
+      i + 1 < oldLines.length
+        ? calculateSimilarity(oldLines[i + 1].trim(), newTrim)
+        : 0;
+    const simNextNew =
+      j + 1 < newLines.length
+        ? calculateSimilarity(oldTrim, newLines[j + 1].trim())
+        : 0;
+
+    const maxSim = Math.max(sim, simNextOld, simNextNew);
+
+    if (sim >= props.similarityThreshold && sim === maxSim && lenRatio > 0.5) {
+      if (oldLine === newLine) {
+        result.push({ type: "unchanged", value: oldLine + "\n" });
+      } else {
+        result.push(...diffChars(oldLine, newLine));
+        result.push({ type: "unchanged", value: "\n" });
+      }
+      i++;
+      j++;
+    } else if (simNextOld > sim && simNextOld >= props.similarityThreshold) {
+      result.push({ type: "removed", value: oldLine + "\n" });
+      i++;
+    } else if (simNextNew > sim && simNextNew >= props.similarityThreshold) {
+      result.push({ type: "added", value: newLine + "\n" });
+      j++;
+    } else {
+      if (sim < 0.3) {
+        result.push({ type: "removed", value: oldLine + "\n" });
+        result.push({ type: "added", value: newLine + "\n" });
+        i++;
+        j++;
+      } else {
+        result.push(...diffChars(oldLine, newLine));
+        result.push({ type: "unchanged", value: "\n" });
+        i++;
+        j++;
+      }
+    }
+  }
+
+  return result;
+};
+
+let cancelled = false;
+
+const computeDiff = async () => {
+  loading.value = true;
+  cancelled = false;
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 10));
+
+  if (cancelled) return;
+
+  try {
+    diffResult.value = diffLines(props.oldText, props.newText);
+  } catch (err) {
+    console.error("CDiff compute error:", err);
+    diffResult.value = [{ type: "unchanged", value: "Diff 计算出错" }];
+  } finally {
+    if (!cancelled) loading.value = false;
+  }
+};
+
+watch(
+  () => [props.oldText, props.newText],
+  () => {
+    cancelled = true;
+    computeDiff();
+  },
+  { immediate: true }
+);
+
+const getPartClass = (part: DiffPart) => {
+  return {
+    "diff-removed": part.type === "removed",
+    "diff-added": part.type === "added",
+  };
+};
+
+const getPartTitle = (part: DiffPart) => {
+  return part.type === "removed"
+    ? "已删除"
+    : part.type === "added"
+    ? "已添加"
+    : "";
+};
+</script>
+
+<style scoped>
+.c-diff-container {
+  font-family: monospace;
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #333;
+}
+
+.diff-removed {
+  background-color: #fee2e2;
+  color: #991b1b;
+  text-decoration: line-through;
+  text-decoration-color: #dc2626;
+  text-decoration-thickness: 2px;
+}
+
+.diff-added {
+  background-color: #dcfce7;
+  color: #166534;
+  font-weight: 600;
+}
+</style>

package/src/components/index.ts

@@ -0,0 +1,35 @@
+import type { Component } from 'vue'
+
+import CAsyncButton from './AsyncButton/index.vue'
+import CSelectWithAll from './SelectWithAll/index.vue'
+import CSelectWithPage from './SelectWithPage/index.vue'
+import CSearchBox from './SearchBox/index.vue'
+import CCollapsibleContainer from './CollapsibleContainer/index.vue'
+import CCustomDrawer from './CustomDrawer/index.vue'
+import CSimpleTable from './SimpleTable/index.vue'
+import CDiff from './diff/index.vue'
+import CImagePreview from './ImagePreview/index.vue'
+
+export {
+  CAsyncButton,
+  CSelectWithAll,
+  CSelectWithPage,
+  CSearchBox,
+  CCollapsibleContainer,
+  CCustomDrawer,
+  CSimpleTable,
+  CDiff,
+  CImagePreview,
+}
+
+export const components: Component[] = [
+  CAsyncButton,
+  CSelectWithAll,
+  CSelectWithPage,
+  CSearchBox,
+  CCollapsibleContainer,
+  CCustomDrawer,
+  CSimpleTable,
+  CDiff,
+  CImagePreview,
+]

package/src/composables/index.ts

@@ -0,0 +1,6 @@
+export * from './useListPage'
+export * from './useForm'
+export * from './useConfirmAction'
+export * from './useConfirmSubmit'
+export * from './useDownload'
+export * from './useDialog'

package/src/composables/useConfirmAction.ts

@@ -0,0 +1,62 @@
+import { ElMessageBox } from 'element-plus'
+import { ref } from 'vue'
+import type { UseConfirmActionOptions, UseConfirmActionReturn, AnyRecord, ApiFn } from '../types'
+
+/**
+ * 二次确认操作的通用 Hook (支持后端根据业务返回 confirm: 0/1 的二次确认机制)
+ */
+export function useConfirmAction(apiFn: ApiFn, options: UseConfirmActionOptions = {}): UseConfirmActionReturn {
+  const {
+    onSuccess,
+    onError,
+    confirmTitle = '提示',
+    confirmButtonText = '确认',
+    cancelButtonText = '取消',
+    confirmType = 'warning'
+  } = options
+
+  const loading = ref(false)
+
+  const execute = async (params: AnyRecord): Promise<any> => {
+    try {
+      loading.value = true
+
+      // 第一次调用, 传入 confirm: 0
+      const firstParams = { ...params, confirm: 0 }
+      const res = await apiFn(firstParams)
+
+      // 判断是否需要二次确认 (后端接口约定 msg 提示)
+      if (res && res.code === 200 && res.msg) {
+        await ElMessageBox.confirm(
+          res.msg,
+          confirmTitle,
+          {
+            confirmButtonText,
+            cancelButtonText,
+            type: confirmType,
+          }
+        )
+
+        // 用户确认后再次调用，传入 confirm: 1
+        const secondParams = { ...params, confirm: 1 }
+        const finalRes = await apiFn(secondParams)
+
+        onSuccess?.(finalRes)
+        return finalRes
+      } else {
+        onSuccess?.(res)
+        return res
+      }
+    } catch (error) {
+      onError?.(error)
+      throw error
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    execute,
+    loading
+  }
+}

package/src/composables/useConfirmSubmit.ts

@@ -0,0 +1,68 @@
+import { ElMessage, ElMessageBox } from 'element-plus'
+import type { UseConfirmSubmitOptions } from '../types'
+
+/**
+ * 确认提交 Hook
+ */
+export function useConfirmSubmit(
+  asyncFn: (...args: any[]) => Promise<any>,
+  onSuccess?: (result: any) => void,
+  options: UseConfirmSubmitOptions = {}
+): (...args: any[]) => Promise<any> {
+  const {
+    title = '提示',
+    message = '确定要执行此操作吗？',
+    confirmButtonText = '确定',
+    cancelButtonText = '取消',
+    type = 'warning',
+    successMessage = '操作成功',
+    cancelMessage = '已取消操作',
+    errorMessage = '操作失败',
+    showCancelMessage = true,
+    messageBoxOptions = {}
+  } = options
+
+  const execute = async (...args: any[]): Promise<any> => {
+    try {
+      await ElMessageBox.confirm(message, title, {
+        confirmButtonText,
+        cancelButtonText,
+        type,
+        ...messageBoxOptions
+      })
+
+      const result = await asyncFn(...args)
+
+      if (successMessage) {
+        ElMessage({
+          type: 'success',
+          message: successMessage
+        })
+      }
+
+      if (onSuccess) {
+        onSuccess(result)
+      }
+
+      return result
+    } catch (error) {
+      if (error === 'cancel' || error === 'close') {
+        if (showCancelMessage) {
+          ElMessage({
+            type: 'info',
+            message: cancelMessage
+          })
+        }
+      } else {
+        console.error('Confirm submit error:', error)
+        ElMessage({
+          type: 'error',
+          message: errorMessage
+        })
+      }
+      throw error
+    }
+  }
+
+  return execute
+}

package/src/composables/useDialog.ts

@@ -0,0 +1,48 @@
+import { ref, reactive } from "vue"
+import type { UseDialogOptions, UseDialogReturn, AnyRecord } from '../types'
+
+/**
+ * 弹窗状态与数据管理 Hook
+ */
+export function useDialog(options: UseDialogOptions = {}): UseDialogReturn {
+  const { width = "50%", title = "Dialog", beforeClose } = options
+
+  const visible = ref(false)
+  const dialogTitle = ref(title)
+  const dialogData: AnyRecord = reactive({})
+
+  const open = (data: AnyRecord = {}, customTitle?: string): void => {
+    if (customTitle) {
+      dialogTitle.value = customTitle
+    }
+    Object.assign(dialogData, data)
+    visible.value = true
+  }
+
+  const close = (): void => {
+    visible.value = false
+    setTimeout(() => {
+      Object.keys(dialogData).forEach((key) => {
+        delete dialogData[key]
+      })
+    }, 300)
+  }
+
+  const handleClose = (done: () => void): void => {
+    if (beforeClose) {
+      beforeClose(done)
+    } else {
+      done()
+    }
+  }
+
+  return {
+    visible,
+    dialogTitle,
+    dialogData,
+    width,
+    open,
+    close,
+    handleClose,
+  }
+}

package/src/composables/useDownload.ts

@@ -0,0 +1,83 @@
+import { ref } from "vue"
+import { ElMessage } from "element-plus"
+import dayjs from "dayjs"
+import type { UseDownloadOptions, UseDownloadReturn, AnyRecord } from '../types'
+
+/**
+ * 文件导出与下载 Hook
+ */
+export const useDownload = (
+  apiFunction: (params: AnyRecord, config?: AnyRecord) => Promise<any>,
+  options: UseDownloadOptions = {}
+): UseDownloadReturn => {
+  const {
+    filename = "导出数据",
+    fileExtension = "xlsx",
+    mimeType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8",
+    timeout = 60000,
+    loadingMessage = "正在导出，请稍候...",
+    successMessage = "导出成功！",
+  } = options
+
+  const downloading = ref(false)
+
+  const download = async (params: AnyRecord = {}): Promise<void> => {
+    downloading.value = true
+    try {
+      if (loadingMessage) {
+        ElMessage.info(loadingMessage)
+      }
+
+      const res = await apiFunction(params, {
+        responseType: "blob",
+        timeout,
+      })
+
+      // 尝试从 content-disposition 头提取真实文件名
+      let actualFilename = `${filename}_${dayjs().format("YYYYMMDDHHmmss")}.${fileExtension}`
+      const contentDisposition = res?.headers?.['content-disposition'] || res?.headers?.['Content-Disposition']
+      if (contentDisposition) {
+        const match = contentDisposition.match(/filename\*?=(?:UTF-8'')?([^;]+)/i)
+        if (match && match[1]) {
+          actualFilename = decodeURIComponent(match[1].replace(/['"]/g, '').trim())
+        }
+      }
+
+      const data = res?.data || res
+      const blob = data instanceof Blob ? data : new Blob([data], { type: mimeType })
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+
+      a.href = url
+      a.download = actualFilename
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+
+      if (successMessage) {
+        ElMessage.success(successMessage)
+      }
+    } catch (error: any) {
+      if (error?.response?.data instanceof Blob) {
+        const reader = new FileReader()
+        reader.onload = (e) => {
+          try {
+            const errorMsg = JSON.parse((e.target as FileReader).result as string).message
+            ElMessage.error(`导出失败：${errorMsg}`)
+          } catch {
+            ElMessage.error("导出失败：服务器返回异常")
+          }
+        }
+        reader.readAsText(error.response.data)
+      } else {
+        ElMessage.error(error?.message || "导出失败：网络异常或接口错误")
+      }
+      console.error("useDownload error:", error)
+    } finally {
+      downloading.value = false
+    }
+  }
+
+  return { download, downloading }
+}