c-admin-kit 1.0.0

package/src/components/CollapsibleContainer/index.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="collapsible-container">
+    <!-- 左侧面板 -->
+    <div class="left-panel" :class="{ collapsed: isCollapsed, resizing: isResizing }">
+      <div class="toggle-btn" @click="toggleCollapse">
+        <el-icon>
+          <Expand v-if="isCollapsed" />
+          <Fold v-else />
+        </el-icon>
+      </div>
+      <div v-show="!isCollapsed" class="left-content">
+        <slot name="left"></slot>
+      </div>
+      <!-- 拖拽分隔线 -->
+      <div
+        v-if="!isCollapsed"
+        class="resize-handle"
+        @mousedown="startResize"
+      ></div>
+    </div>
+    <!-- 右侧面板 -->
+    <div class="right-panel">
+      <div class="right-content">
+        <slot name="right"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Expand, Fold } from '@element-plus/icons-vue'
+
+defineOptions({ name: 'CCollapsibleContainer' })
+
+const props = defineProps({
+  defaultCollapsed: {
+    type: Boolean,
+    default: false
+  },
+  defaultWidth: {
+    type: Number,
+    default: 240
+  },
+  minWidth: {
+    type: Number,
+    default: 200
+  },
+  maxWidth: {
+    type: Number,
+    default: 600
+  },
+  height: {
+    type: String,
+    default: 'calc(100vh - 84px)'
+  }
+})
+
+const emit = defineEmits<{
+  (e: 'collapse-change', collapsed: boolean): void
+  (e: 'width-change', width: number): void
+}>()
+
+const isCollapsed = ref(props.defaultCollapsed)
+const leftPanelWidth = ref(props.defaultWidth)
+const isResizing = ref(false)
+
+const gridTemplateColumns = computed(() => {
+  return isCollapsed.value ? '48px 1fr' : `${leftPanelWidth.value}px 1fr`
+})
+
+const actualLeftPanelWidth = computed(() => {
+  return isCollapsed.value ? '48px' : `${leftPanelWidth.value}px`
+})
+
+const toggleCollapse = (): void => {
+  isCollapsed.value = !isCollapsed.value
+  emit('collapse-change', isCollapsed.value)
+}
+
+const startResize = (e: MouseEvent): void => {
+  e.preventDefault()
+  isResizing.value = true
+
+  const startX = e.clientX
+  const startWidth = leftPanelWidth.value
+
+  let rafId: number | null = null
+  let pendingWidth: number | null = null
+
+  const updateWidth = (): void => {
+    if (pendingWidth !== null) {
+      leftPanelWidth.value = pendingWidth
+      emit('width-change', pendingWidth)
+      pendingWidth = null
+    }
+    rafId = null
+  }
+
+  const handleMouseMove = (e: MouseEvent): void => {
+    const delta = e.clientX - startX
+    const newWidth = startWidth + delta
+    const clampedWidth = Math.max(props.minWidth, Math.min(props.maxWidth, newWidth))
+    pendingWidth = clampedWidth
+
+    if (rafId === null) {
+      rafId = requestAnimationFrame(updateWidth)
+    }
+  }
+
+  const handleMouseUp = (): void => {
+    isResizing.value = false
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+    }
+
+    if (pendingWidth !== null) {
+      leftPanelWidth.value = pendingWidth
+      emit('width-change', pendingWidth)
+    }
+
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+  }
+
+  document.body.style.cursor = 'col-resize'
+  document.body.style.userSelect = 'none'
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+}
+
+defineExpose({
+  toggleCollapse,
+  isCollapsed,
+  leftPanelWidth
+})
+</script>
+
+<style scoped>
+.collapsible-container {
+  display: grid;
+  grid-template-columns: v-bind(gridTemplateColumns);
+  height: v-bind(height);
+  width: 100%;
+  background: #f5f7fa;
+  overflow: hidden;
+}
+
+.left-panel {
+  background: #fff;
+  border-right: 1px solid #e4e7ed;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-width: v-bind(actualLeftPanelWidth);
+  min-width: v-bind(actualLeftPanelWidth);
+  position: relative;
+  will-change: max-width, min-width;
+}
+
+.left-panel:not(.resizing) {
+  transition: all 0.3s ease-in-out;
+}
+
+.left-content {
+  height: 100%;
+  padding: 16px;
+  overflow-y: auto;
+  min-width: 0;
+  transition: opacity 0.2s ease-in-out;
+  opacity: 1;
+}
+
+.left-panel.collapsed .left-content {
+  opacity: 0;
+}
+
+.right-panel {
+  background: #fff;
+  transition: all 0.3s ease-in-out;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.toggle-btn {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: transform 0.3s ease-in-out;
+}
+
+.toggle-btn:hover {
+  background-color: #f5f7fa;
+}
+
+.right-content {
+  height: 100%;
+  padding: 16px;
+  overflow-y: auto;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.resize-handle {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+  background: transparent;
+  transition: background 0.2s ease;
+  z-index: 10;
+  will-change: background;
+  padding: 0 4px;
+  margin: 0 -4px;
+}
+
+.resize-handle:hover {
+  background: #409eff;
+}
+
+.resize-handle:active {
+  background: #337ecc;
+}
+
+.collapsible-container:has(.resize-handle:active) {
+  transition: none;
+}
+
+.left-panel:has(.resize-handle:active) {
+  transition: none;
+}
+</style>

package/src/components/CustomDrawer/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <el-drawer
+    v-model="visible"
+    :title="title"
+    :size="size"
+    :direction="direction"
+    :before-close="handleBeforeClose"
+    :close-on-click-modal="closeOnClickModal"
+    :close-on-press-escape="closeOnPressEscape"
+    :destroy-on-close="destroyOnClose"
+    @closed="handleClosed"
+    :class="{ 'drawer-with-footer': showFooter }"
+  >
+    <div
+      class="drawer-content"
+      :class="{ 'has-footer': showFooter }"
+    >
+      <slot></slot>
+    </div>
+    <template
+      #footer
+      v-if="showFooter"
+    >
+      <div class="drawer-footer">
+        <el-button
+          @click="handleCancel"
+          size="default"
+        >
+          取消
+        </el-button>
+        <el-button
+          type="primary"
+          :loading="confirmLoading"
+          @click="handleConfirm"
+          size="default"
+        >
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+
+defineOptions({ name: 'CCustomDrawer' })
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: [String, Number],
+    default: '30%',
+  },
+  direction: {
+    type: String as PropType<'rtl' | 'ltr' | 'ttb' | 'btt'>,
+    default: 'rtl',
+    validator: (val: string) => ['rtl', 'ltr', 'ttb', 'btt'].includes(val),
+  },
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+  closeOnClickModal: {
+    type: Boolean,
+    default: true,
+  },
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true,
+  },
+  destroyOnClose: {
+    type: Boolean,
+    default: false,
+  },
+  confirmLoading: {
+    type: Boolean,
+    default: false,
+  },
+  beforeClose: {
+    type: Function as PropType<((done: () => void) => void) | null>,
+    default: null,
+  },
+  onClose: {
+    type: Function as PropType<(() => void) | null>,
+    default: null,
+  },
+  onConfirm: {
+    type: Function as PropType<(() => void) | null>,
+    default: null,
+  },
+  onCancel: {
+    type: Function as PropType<(() => void) | null>,
+    default: null,
+  },
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'close'): void
+  (e: 'confirm'): void
+  (e: 'cancel'): void
+}>()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val: boolean) => emit('update:modelValue', val),
+})
+
+const handleBeforeClose = (done: () => void): void => {
+  if (props.beforeClose) {
+    props.beforeClose(done)
+  } else {
+    done()
+  }
+}
+
+const handleClosed = (): void => {
+  if (props.onClose) {
+    props.onClose()
+  }
+  emit('close')
+}
+
+const handleConfirm = (): void => {
+  if (props.onConfirm) {
+    props.onConfirm()
+  }
+  emit('confirm')
+}
+
+const handleCancel = (): void => {
+  visible.value = false
+  if (props.onCancel) {
+    props.onCancel()
+  }
+  emit('cancel')
+}
+
+defineExpose({
+  open: () => {
+    visible.value = true
+  },
+  close: () => {
+    visible.value = false
+  },
+})
+</script>
+
+<style scoped>
+.drawer-content {
+  height: 100%;
+}
+
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>

package/src/components/ImagePreview/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-image
+    :src="realSrc"
+    fit="cover"
+    :style="`width:${realWidth};height:${realHeight};`"
+    :preview-src-list="realSrcList"
+    preview-teleported
+    v-bind="$attrs"
+  >
+    <template #error>
+      <div class="image-slot">
+        <el-icon><PictureFilled /></el-icon>
+      </div>
+    </template>
+  </el-image>
+</template>
+
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+import { PictureFilled } from '@element-plus/icons-vue'
+
+defineOptions({ name: 'CImagePreview' })
+
+const props = defineProps({
+  src: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: ""
+  },
+  width: {
+    type: [Number, String],
+    default: "60px"
+  },
+  height: {
+    type: [Number, String],
+    default: "60px"
+  }
+})
+
+const realSrcList = computed<string[]>(() => {
+  if (!props.src) return []
+  if (Array.isArray(props.src)) {
+    return props.src.map((s) => String(s).trim()).filter(Boolean)
+  }
+  return String(props.src)
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean)
+})
+
+const realSrc = computed(() => {
+  return realSrcList.value[0] || ""
+})
+
+const realWidth = computed(() =>
+  typeof props.width === "string" ? props.width : `${props.width}px`
+)
+
+const realHeight = computed(() =>
+  typeof props.height === "string" ? props.height : `${props.height}px`
+)
+</script>
+
+<style scoped>
+.el-image {
+  border-radius: 5px;
+  background-color: #ebeef5;
+  box-shadow: 0 0 5px 1px #ccc;
+}
+
+:deep(.el-image__inner) {
+  transition: all 0.3s;
+  cursor: pointer;
+}
+
+:deep(.el-image__inner:hover) {
+  transform: scale(1.08);
+}
+
+:deep(.image-slot) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  color: #909399;
+  font-size: 24px;
+}
+</style>