jcjy-components 0.0.68 → 0.0.69

package/dist/components/auth-gateway/bind-org-dialog.vue

@@ -4,10 +4,10 @@
     fullscreen
     :show-close="false"
     body-class="!p-0"
-    header-class="hidden"
+    header-class="!hidden"
     class="!p-0"
   >
-    <header class="h-100 relative">
+    <header class="h-[400px] relative">
       <img
         src="./img/bind-bg.jpg"
         class="w-full h-full"
@@ -17,7 +17,7 @@
         class="absolute top-0 left-0 right-0 bottom-0 bg-black/40 w-full h-full"
       ></div>
     </header>
-    <div class="text-center -mt-100 relative z-1 pt-20">
+    <div class="text-center -mt-[400px] relative z-1 pt-20">
       <div class="text-white font-bold text-2xl">验证身份信息</div>
       <div class="font-400 text-lg text-white my-2">
         我们需要验证你的身份信息，以便为你提供更好的服务

package/dist/components/file-manager/float-file-manager.vue

@@ -0,0 +1,16 @@
+<template>
+  <FloatingBall>
+    <template #ball>
+      <slot />
+    </template>
+
+    <div class="h-[58vh] w-[700px]">
+      <FileManager v-bind="$attrs" />
+    </div>
+  </FloatingBall>
+</template>
+
+<script setup lang="ts">
+import FloatingBall from "../floating-ball/index.vue";
+import FileManager from "./index.vue";
+</script>

package/dist/components/file-manager/index.vue

@@ -1,3 +1,149 @@
 <template>
-  <div>file-manager</div>
+  <div class="rounded overflow-hidden flex flex-col h-full py-2">
+    <header class="border border-b-0 border-gray-100 shrink-0 py-4 px-4">
+      <el-breadcrumb separator="/" class="mb-2 text-sm">
+        <el-breadcrumb-item>文件</el-breadcrumb-item>
+        <el-breadcrumb-item>文件夹</el-breadcrumb-item>
+      </el-breadcrumb>
+      <div class="flex items-center justify-between">
+        <div class="flex-1">
+          <el-progress
+            text-inside
+            :stroke-width="20"
+            :percentage="10"
+            :color="sizeColors"
+            class="!w-4/5"
+          >
+            <template #default="{ percentage }">
+              <span class="text-sm text-black/50"> {{ percentage }}/100 </span>
+            </template>
+          </el-progress>
+        </div>
+
+        <el-space>
+          <el-input
+            placeholder="请输入关键词~~"
+            v-model="localSearch"
+            :model-modifiers="{
+              trim: true,
+            }"
+            @keydown.enter="getData"
+            class="!w-52"
+            clearable
+          />
+          <el-button-group type="primary">
+            <el-button> 新建文件夹 </el-button>
+            <el-button> 上传 </el-button>
+          </el-button-group>
+        </el-space>
+      </div>
+    </header>
+    <main
+      class="flex-1 overflow-hidden"
+      v-loading="loading"
+      element-loading-text="正在加载中..."
+    >
+      <el-table
+        border
+        :data="list"
+        height="100%"
+        @row-dblclick="handleRowDblclick"
+      >
+        <el-table-column type="index" width="50" align="center" />
+        <el-table-column label="名称" align="center"> </el-table-column>
+        <el-table-column width="100" label="大小" sortable align="center">
+        </el-table-column>
+        <el-table-column width="100" label="文件类型" align="center">
+        </el-table-column>
+        <el-table-column width="150" label="上传时间" align="center" sortable>
+        </el-table-column>
+        <el-table-column label="操作" width="155" fixed="right" align="center">
+          <template #default="{ row }">
+            <el-button link> 查看 </el-button>
+            <el-button link type="primary"> 下载 </el-button>
+            <el-button link type="danger"> 删除 </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </main>
+    <footer class="shrink-0 flex flex-row-reverse pt-3">
+      <el-pagination
+        v-model:current-page="params.page"
+        v-model:page-size="params.pageSize"
+        :page-sizes="[30, 80, 150, 300]"
+        background
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      />
+    </footer>
+  </div>
 </template>
+<script lang="ts" setup>
+import {
+  ElTable,
+  ElTableColumn,
+  ElPagination,
+  ElButtonGroup,
+  ElButton,
+  ElInput,
+  ElProgress,
+  ElSpace,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+} from "element-plus";
+import { nextTick, ref, watch } from "vue";
+import { useDebouncedRef } from "./useDebounceRef";
+type FileItem = any;
+const props = defineProps<{
+  load: (v: any) => Promise<{
+    count: number;
+    rows: FileItem[];
+  }>;
+}>();
+const localSearch = useDebouncedRef("");
+const params = ref({
+  page: 1,
+  pageSize: 30,
+  path: "",
+});
+const total = ref(0);
+const list = ref<FileItem[]>([1, 2]);
+const loading = ref(false);
+const sizeColors = [
+  { color: "#67c23a", percentage: 50 }, // 一半以内都安全
+  { color: "#409eff", percentage: 70 },
+  { color: "#e6a23c", percentage: 85 },
+  { color: "#f56c6c", percentage: 100 },
+];
+watch(
+  [params, localSearch],
+  () => {
+    getData();
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+
+async function getData() {
+  try {
+    loading.value = true;
+    const { count, rows } = await props.load({
+      ...params.value,
+      search: localSearch.value,
+    });
+    total.value = count;
+    list.value = [];
+    nextTick(() => {
+      list.value = rows;
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function handleRowDblclick(row: FileItem) {
+  console.log(33333, row);
+}
+</script>

package/dist/components/file-manager/useDebounceRef.ts

@@ -0,0 +1,21 @@
+import { customRef } from "vue"
+
+export function useDebouncedRef<T>(value: T, delay = 600) {
+  let timer: number
+
+  return customRef<T>((track, trigger) => {
+    return {
+      get() {
+        track()
+        return value
+      },
+      set(newValue: T) {
+        clearTimeout(timer)
+        timer = window.setTimeout(() => {
+          value = newValue
+          trigger()
+        }, delay)
+      },
+    }
+  })
+}

package/dist/components/floating-ball/index.vue

@@ -0,0 +1,294 @@
+<template>
+  <!-- 悬浮球 -->
+  <div
+    ref="ballRef"
+    class="floating-ball"
+    :class="{ dragging }"
+    :style="ballStyle"
+    @mousedown="onDown"
+    @touchstart.prevent="onDown"
+  >
+    <slot name="ball">
+      <div class="ball">+</div>
+    </slot>
+  </div>
+
+  <!-- 面板 -->
+  <teleport to="body">
+    <div
+      v-show="visible"
+      ref="panelRef"
+      class="floating-panel"
+      :style="panelStyle"
+    >
+      <slot />
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
+
+/* ========= 状态 ========= */
+const ballRef = ref<HTMLElement | null>(null);
+const panelRef = ref<HTMLElement | null>(null);
+
+const left = ref(window.innerWidth - 56 - 8);
+const top = ref(window.innerHeight / 2);
+const visible = ref(false);
+const dragging = ref(false);
+
+/* ========= 动态尺寸 ========= */
+const ballRect = ref({ width: 0, height: 0 });
+const panelRect = ref({ width: 0, height: 0 });
+
+function updateBallRect() {
+  if (!ballRef.value) return;
+  const rect = ballRef.value.getBoundingClientRect();
+  ballRect.value = { width: rect.width, height: rect.height };
+}
+
+function updatePanelRect() {
+  if (!panelRef.value) return;
+  const rect = panelRef.value.getBoundingClientRect();
+  panelRect.value = { width: rect.width, height: rect.height };
+}
+
+/* ========= ResizeObserver ========= */
+let ballObserver: ResizeObserver | null = null;
+let panelObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  nextTick(() => {
+    updateBallRect();
+    updatePanelRect();
+  });
+
+  ballObserver = new ResizeObserver(updateBallRect);
+  panelObserver = new ResizeObserver(updatePanelRect);
+  if (ballRef.value) ballObserver.observe(ballRef.value);
+  if (panelRef.value) panelObserver.observe(panelRef.value);
+
+  window.addEventListener("resize", onResize);
+});
+
+onBeforeUnmount(() => {
+  ballObserver?.disconnect();
+  panelObserver?.disconnect();
+  window.removeEventListener("resize", onResize);
+});
+
+const ballW = computed(() => ballRect.value.width);
+const ballH = computed(() => ballRect.value.height);
+const panelW = computed(() => panelRect.value.width);
+const panelH = computed(() => panelRect.value.height);
+
+/* ========= 窗口 resize ========= */
+function onResize() {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  // 确保悬浮球在视口内
+  left.value = Math.max(0, Math.min(left.value, vw - ballW.value));
+  top.value = Math.max(0, Math.min(top.value, vh - ballH.value));
+}
+
+/* ========= 监听 panel 显示 ========= */
+watch(visible, (newVal) => {
+  if (newVal) {
+    nextTick(() => {
+      updatePanelRect();
+    });
+  }
+});
+
+/* ========= 拖拽 ========= */
+let startX = 0;
+let startY = 0;
+let startLeft = 0;
+let startTop = 0;
+let moved = false;
+let startTime = 0;
+let isTouchEvent = false;
+
+function getPoint(e: MouseEvent | TouchEvent) {
+  return "touches" in e ? e.touches[0]! : e;
+}
+
+function onDown(e: MouseEvent | TouchEvent) {
+  isTouchEvent = "touches" in e;
+  const p = getPoint(e);
+  startX = p.clientX;
+  startY = p.clientY;
+  startLeft = left.value;
+  startTop = top.value;
+  moved = false;
+  startTime = Date.now();
+  dragging.value = true;
+
+  if (isTouchEvent) {
+    document.addEventListener("touchmove", onMove, { passive: false });
+    document.addEventListener("touchend", onUp);
+  } else {
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+  }
+}
+
+function onMove(e: MouseEvent | TouchEvent) {
+  const p = getPoint(e);
+  const dx = p.clientX - startX;
+  const dy = p.clientY - startY;
+
+  if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;
+
+  left.value = startLeft + dx;
+  top.value = startTop + dy;
+
+  // 边界限制
+  left.value = Math.max(
+    0,
+    Math.min(left.value, window.innerWidth - ballW.value)
+  );
+  top.value = Math.max(
+    0,
+    Math.min(top.value, window.innerHeight - ballH.value)
+  );
+}
+
+function onUp() {
+  if (isTouchEvent) {
+    document.removeEventListener("touchmove", onMove);
+    document.removeEventListener("touchend", onUp);
+  } else {
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", onUp);
+  }
+
+  dragging.value = false;
+
+  const duration = Date.now() - startTime;
+
+  if (!moved && duration < 200) {
+    visible.value = !visible.value;
+    return;
+  }
+
+  snapToEdge();
+}
+
+/* ========= 自动吸附 ========= */
+function snapToEdge() {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  const distances = {
+    left: left.value,
+    right: vw - left.value - ballW.value,
+    top: top.value,
+    bottom: vh - top.value - ballH.value,
+  };
+
+  const sorted = Object.entries(distances).sort((a, b) => a[1] - b[1]);
+  const edge = sorted[0]?.[0];
+
+  if (edge === "left") left.value = 8;
+  if (edge === "right") left.value = vw - ballW.value - 8;
+  if (edge === "top") top.value = 8;
+  if (edge === "bottom") top.value = vh - ballH.value - 8;
+}
+
+/* ========= ball 样式 ========= */
+const ballStyle = computed(() => ({
+  left: left.value + "px",
+  top: top.value + "px",
+  position: "fixed",
+  zIndex: 9999,
+}));
+
+/* ========= placement ========= */
+const placement = computed<"left" | "right" | "top" | "bottom">(() => {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const distances = {
+    left: left.value,
+    right: vw - left.value - ballW.value,
+    top: top.value,
+    bottom: vh - top.value - ballH.value,
+  };
+  const sorted = Object.entries(distances).sort((a, b) => a[1] - b[1]);
+  return (sorted[0]?.[0] ?? "right") as "left" | "right" | "top" | "bottom";
+});
+
+/* ========= panel 样式 ========= */
+const panelStyle = computed(() => {
+  let x = 0;
+  let y = 0;
+  const gap = 12;
+  const margin = 8;
+
+  switch (placement.value) {
+    case "left":
+      x = left.value + ballW.value + gap;
+      y = top.value;
+      break;
+    case "right":
+      x = left.value - panelW.value - gap;
+      y = top.value;
+      break;
+    case "top":
+      x = left.value;
+      y = top.value + ballH.value + gap;
+      break;
+    case "bottom":
+      x = left.value;
+      y = top.value - panelH.value - gap;
+      break;
+  }
+
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+
+  x = Math.max(margin, Math.min(x, vw - panelW.value - margin));
+  y = Math.max(margin, Math.min(y, vh - panelH.value - margin));
+
+  return {
+    left: x + "px",
+    top: y + "px",
+    position: "fixed",
+    zIndex: 9998,
+  };
+});
+</script>
+
+<style scoped>
+.floating-ball {
+  touch-action: none;
+  user-select: none;
+  cursor: grab;
+}
+
+.floating-ball.dragging {
+  cursor: grabbing;
+}
+
+.ball {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: #409eff;
+  color: #fff;
+  font-size: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.floating-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  transition: left 0.15s ease, top 0.15s ease;
+}
+</style>

package/dist/index.ts

@@ -1,20 +1,23 @@
 import type { App } from "vue";
 import AuthGateway from "./components/auth-gateway/index.vue";
+import FileManager from "./components/file-manager/index.vue";
 import { setTheme, setThemeByUrl } from "./components/auth-gateway/util";
 import { ElLoadingDirective } from "element-plus";
+import FloatFileManager from "./components/file-manager/float-file-manager.vue";
+import FloatingBall from './components/floating-ball/index.vue'
 export const theme = {
   setTheme,
   setThemeByUrl,
 };
-export { AuthGateway };
+export { AuthGateway, FileManager,FloatFileManager,FloatingBall };
 // 用于在父项目中注册 Element Plus 组件的类型声明
-export interface AuthGatewayOptions {
-  // Element Plus 组件通过父项目按需加载，这里不需要导入
-}
 
 export default {
   install(app: App) {
     app.directive("loading", ElLoadingDirective);
     app.component("AuthGateway", AuthGateway);
+    app.component("FileManager", FileManager);
+    app.component("FloatFileManager", FloatFileManager);
+    app.component("FloatingBall", FloatingBall);
   },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jcjy-components",
-  "version": "0.0.68",
+  "version": "0.0.69",
   "description": "Vue 3 组件库",
   "type": "module",
   "main": "./dist/index.ts",
@@ -30,13 +30,11 @@
     "@vitejs/plugin-vue": "^6.0.3",
     "@vue/tsconfig": "^0.8.1",
     "element-plus": "^2.13.0",
-    "oxfmt": "^0.19.0",
-    "oxlint": "^1.34.0",
-    "rollup-plugin-visualizer": "^6.0.5",
+    "oxfmt": "^0.20.0",
+    "oxlint": "^1.35.0",
     "sass": "^1.97.1",
     "typescript": "~5.9.3",
     "vite": "7.3.0",
-    "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.26",
     "vue-tsc": "^3.2.1"
   },
@@ -45,6 +43,10 @@
     "build": "vue-tsc -b && vite build",
     "preview": "vite preview",
     "build:types": "vue-tsc -b && vite build --mode build-types",
-    "push:npm": "node build.js && pnpm publish"
+    "push:npm": "node build.js && pnpm publish",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix",
+    "format": "oxfmt .",
+    "format:check": "oxfmt --check ."
   }
 }