@yxhl/specter-pui-vtk 1.0.0

package/src/components/assembly/VtkEmpty.vue

@@ -0,0 +1,107 @@
+<!-- 空页面 -->
+<template>
+  <v-empty-state
+    :headline="headline"
+    :title="title"
+    :text="text"
+    :image="image"
+    :icon="icon"
+    :rounded="rounded"
+    :elevation="elevation"
+  >
+    <!-- 图像插槽 -->
+    <template v-if="$slots.media" #media>
+      <slot name="media"></slot>
+    </template>
+
+    <!-- 标题插槽 -->
+    <template v-if="$slots.title" #title>
+      <slot name="title"></slot>
+    </template>
+
+    <!-- 文本插槽 -->
+    <template v-if="$slots.text" #text>
+      <slot name="text"></slot>
+    </template>
+
+    <!-- 操作按钮插槽 -->
+    <template v-if="$slots.actions" #actions>
+      <slot name="actions"></slot>
+    </template>
+
+    <!-- 底部插槽 -->
+    <template v-if="$slots.bottom" #bottom>
+      <slot name="bottom"></slot>
+    </template>
+  </v-empty-state>
+</template>
+
+<script setup>
+// 定义组件名称
+defineOptions({
+  name: "VtkEmpty",
+  inheritAttrs: false,
+});
+
+// 定义 props
+const props = defineProps({
+  // 标题
+  title: {
+    type: String,
+    default: ''
+  },
+  // 副标题/文本
+  text: {
+    type: String,
+    default: ''
+  },
+  // 头部文本（更大字体）
+  headline: {
+    type: String,
+    default: ''
+  },
+  // 图标
+  icon: {
+    type: String,
+    default: ''
+  },
+  // 图像
+  image: {
+    type: String,
+    default: ''
+  },
+  // 圆角
+  rounded: {
+    type: [Boolean, String, Number],
+    default: 'circle'
+  },
+  // 阴影
+  elevation: {
+    type: [Number, String],
+    default: 0
+  }
+});
+</script>
+
+<style scoped>
+/* 可以添加自定义样式 */
+:deep(.v-empty-state) {
+  padding: 24px;
+}
+
+:deep(.v-empty-state__media) {
+  margin-bottom: 16px;
+}
+
+:deep(.v-empty-state__headline) {
+  margin-bottom: 8px;
+}
+
+:deep(.v-empty-state__title) {
+  margin-bottom: 8px;
+}
+
+:deep(.v-empty-state__actions) {
+  margin-top: 16px;
+}
+</style>

package/src/components/assembly/VtkFab.vue

@@ -0,0 +1,78 @@
+<!-- 悬浮按钮 -->
+<template>
+  <transition name="slide-up">
+    <v-fab
+      v-if="showFab"
+      :class="fabClass"
+      color="primary"
+      icon="mdi-arrow-up"
+      @click="scrollToTop"
+    ></v-fab>
+  </transition>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+// 定义组件名称
+defineOptions({
+  name: "VtkFab",
+  inheritAttrs: false,
+});
+
+// 控制悬浮按钮显示状态
+const showFab = ref(false)
+// 自定义类名用于样式调整
+const fabClass = ref('scroll-to-top-fab')
+
+// 监听滚动事件
+const handleScroll = () => {
+  showFab.value = window.scrollY > 100
+}
+
+// 滚动到顶部
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  })
+}
+
+// 组件挂载时添加滚动监听
+onMounted(() => {
+  window.addEventListener('scroll', handleScroll)
+})
+
+// 组件卸载前移除监听
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+</script>
+
+<style scoped>
+.scroll-to-top-fab {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 1004;
+}
+
+/* 滑动动画 */
+.slide-up-enter-active {
+  transition: all 0.2s ease-out;
+}
+
+.slide-up-leave-active {
+  transition: all 0.2s ease-in;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(30px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>

package/src/components/assembly/VtkFormItem.vue

@@ -0,0 +1,166 @@
+<template>
+  <div 
+    class="mb-2"
+    :class="{
+      'form-item--vertical': top,
+      'form-item--horizontal': !top,
+      ...rootClasses
+    }"
+    :style="rootStyles"
+  >
+    <div 
+      v-if="label && !top"
+      class="d-inline-block vtk-width-2 align-middle pb-5"
+      :class="{ 'text-right': !left, 'text-left': left }"
+      style="min-width: 120px; vertical-align: middle;"
+    >
+      <span v-if="must" :class="left ? 'vtk-width-2' : ''" class="text-red mr-1">*</span>
+      <span>{{ label }}</span>
+    </div>
+    
+    <div 
+      v-if="label && top"
+      class="pb-2 text-left"
+    >
+      <span v-if="must" class="text-red mr-1">*</span>
+      <span>{{ label }}</span>
+    </div>
+    
+    <div 
+      v-if="!top"
+      class="d-inline-block vtk-width-6 align-middle"
+      :class="left ? 'vtk-width-8' : ''"
+      style="min-width: 300px; vertical-align: middle;"
+    >
+      <slot></slot>
+    </div>
+    
+    <div 
+      v-if="top"
+      :style="contentStyles"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue';
+
+// 定义组件名称和选项
+defineOptions({
+  name: "VtkFormItem",
+  inheritAttrs: false,
+});
+
+// 获取所有传递的属性
+const attrs = useAttrs();
+
+// 定义props
+const props = defineProps({
+  label: {
+    type: String,
+    default: null,
+  },
+  must: {
+    type: Boolean,
+    default: false,
+  },
+  left: {
+    type: Boolean,
+    default: false,
+  },
+  // 标签在上方的垂直布局
+  top: {
+    type: Boolean,
+    default: false,
+  },
+  // 控制top模式下内容的最大宽度
+  maxWidth: {
+    type: [String, Number],
+    default: '100%'
+  }
+});
+
+// 根元素的类名
+const rootClasses = computed(() => {
+  const classes = {};
+  if (attrs.class) {
+    // 如果是字符串，直接添加
+    if (typeof attrs.class === 'string') {
+      attrs.class.split(' ').forEach(cls => {
+        if (cls) classes[cls] = true;
+      });
+    } 
+    // 如果是对象，合并
+    else if (typeof attrs.class === 'object') {
+      Object.assign(classes, attrs.class);
+    }
+  }
+  return classes;
+});
+
+// 根元素的样式
+const rootStyles = computed(() => {
+  // 合并传入的样式和组件内部样式
+  const styles = {};
+  
+  // 应用父组件传递的样式
+  if (attrs.style) {
+    if (typeof attrs.style === 'string') {
+      // 解析字符串样式
+      attrs.style.split(';').forEach(style => {
+        const [key, value] = style.split(':');
+        if (key && value) {
+          styles[key.trim()] = value.trim();
+        }
+      });
+    } else if (typeof attrs.style === 'object') {
+      // 直接使用对象样式
+      Object.assign(styles, attrs.style);
+    }
+  }
+  
+  return styles;
+});
+
+// 处理maxWidth属性
+const processedMaxWidth = computed(() => {
+  if (typeof props.maxWidth === 'number') {
+    return props.maxWidth + 'px';
+  }
+  return props.maxWidth;
+});
+
+// 内容样式（仅在top模式下应用maxWidth）
+const contentStyles = computed(() => {
+  const styles = {};
+  
+  // 在top模式下应用maxWidth
+  if (props.top && props.maxWidth) {
+    styles.maxWidth = processedMaxWidth.value;
+  }
+  
+  // 在非top模式下保持原有最小宽度
+  if (!props.top) {
+    styles.minWidth = '300px';
+    styles.verticalAlign = 'middle';
+  }
+  
+  return styles;
+});
+</script>
+
+<style scoped>
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.form-item--vertical {
+  display: block;
+}
+
+.form-item--horizontal {
+  display: block;
+}
+</style>

package/src/components/assembly/VtkImg.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="vtk-img-container">
+    <VCard 
+      :class="['vtk-img-card', { 'vtk-img-card--preview': preview }]"
+      @click="openPreview"
+    >
+      <v-img 
+        v-bind="$attrs" 
+        :src="srcWithToken"
+        class="vtk-img"
+        :aspect-ratio="aspectRatio"
+        cover
+      >
+        <template v-slot:placeholder>
+          <div class="d-flex align-center justify-center fill-height">
+            <v-progress-circular indeterminate color="grey-lighten-1"></v-progress-circular>
+          </div>
+        </template>
+      </v-img>
+      
+      <!-- 图片标题和描述 -->
+      <div class="vtk-img-info" v-if="showTitle || showDescription">
+        <VCardTitle v-if="showTitle" class="vtk-img-title text-subtitle-2 pa-2">
+          {{ title }}
+        </VCardTitle>
+        <v-card-subtitle v-if="showDescription" class="vtk-img-description text-caption pa-2">
+          {{ description }}
+        </v-card-subtitle>
+      </div>
+    </VCard>
+    
+    <!-- 使用 v-dialog 的图片预览 -->
+    <VDialog 
+      v-model="showPreview" 
+      max-width="90%" 
+      fullscreen
+      @click:outside="closePreview"
+    >
+      <VCard class="image-viewer-card">
+        <v-toolbar dark color="primary">
+          <VBtn icon dark @click="closePreview">
+            <VIcon>mdi-close</VIcon>
+          </VBtn>
+          <v-toolbar-title>{{ currentImageTitle }}</v-toolbar-title>
+          <VSpacer></VSpacer>
+          <v-toolbar-items>
+            <VBtn icon dark @click="rotateImage(-90)">
+              <VIcon>mdi-rotate-left</VIcon>
+            </VBtn>
+            <VBtn icon dark @click="rotateImage(90)">
+              <VIcon>mdi-rotate-right</VIcon>
+            </VBtn>
+          </v-toolbar-items>
+        </v-toolbar>
+        
+        <div class="image-viewer-content">
+          <VBtn 
+            v-if="hasPrev" 
+            icon 
+            class="nav-button prev-button" 
+            @click="prevImage"
+          >
+            <VIcon>mdi-chevron-left</VIcon>
+          </VBtn>
+          
+          <div class="image-container">
+            <v-img
+              :src="currentImageUrl"
+              class="viewer-image"
+              :style="{ transform: `rotate(${imageRotation}deg)` }"
+            />
+          </div>
+          
+          <VBtn 
+            v-if="hasNext" 
+            icon 
+            class="nav-button next-button" 
+            @click="nextImage"
+          >
+            <VIcon>mdi-chevron-right</VIcon>
+          </VBtn>
+        </div>
+        
+        <div class="image-info">
+          <p class="text-center">{{ currentImageDescription }}</p>
+          <p class="text-center text--secondary">{{ currentIndex + 1 }} / {{ imageList.length }}</p>
+        </div>
+      </VCard>
+    </VDialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+
+defineOptions({
+  name: 'VtkImg',
+  inheritAttrs: true
+});
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: null,
+  },
+  error: {
+    type: String,
+    default: new URL('../../assets/img/wxsq.png', import.meta.url).href,
+  },
+  preview: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  // 图片列表，用于导航功能
+  imageList: {
+    type: Array,
+    default: () => []
+  },
+  // 当前图片索引
+  index: {
+    type: Number,
+    default: 0
+  },
+  // 是否显示标题
+  showTitle: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示描述
+  showDescription: {
+    type: Boolean,
+    default: true
+  },
+  // 图片宽高比
+  aspectRatio: {
+    type: [String, Number],
+    default: 16/9
+  }
+});
+
+// 预览状态
+const showPreview = ref(false);
+// 图片旋转角度
+const imageRotation = ref(0);
+// 当前图片索引（预览模式下使用）
+const currentIndex = ref(0);
+
+// 使用计算属性处理带token的URL
+const srcWithToken = computed(() => {
+  if (!props.src) return props.src;
+  
+  try {
+    // 首先尝试使用 $vtk.storage
+    if (window.$vtk && typeof window.$vtk.storage?.get === 'function') {
+      const token = window.$vtk.storage.get('token');
+      return token ? `${props.src}?stoken=${token}` : props.src;
+    }
+    // 如果 $vtk 不存在，尝试从 localStorage 获取 token
+    else {
+      const token = localStorage.getItem('token');
+      return token ? `${props.src}?stoken=${token}` : props.src;
+    }
+  } catch (error) {
+    // 发生错误时返回原始src
+    console.warn('VtkImg: Failed to get token, using src without token', error);
+    return props.src;
+  }
+});
+
+// 当前预览图片的URL
+const currentImageUrl = computed(() => {
+  if (props.imageList.length > 0 && currentIndex.value < props.imageList.length) {
+    const currentImage = props.imageList[currentIndex.value];
+    if (currentImage && currentImage.url) {
+      try {
+        // 为图片列表中的图片也添加token
+        if (window.$vtk && typeof window.$vtk.storage?.get === 'function') {
+          const token = window.$vtk.storage.get('token');
+          return token ? `${currentImage.url}?stoken=${token}` : currentImage.url;
+        } else {
+          const token = localStorage.getItem('token');
+          return token ? `${currentImage.url}?stoken=${token}` : currentImage.url;
+        }
+      } catch (error) {
+        return currentImage.url;
+      }
+    }
+  }
+  return srcWithToken.value;
+});
+
+// 当前图片标题
+const currentImageTitle = computed(() => {
+  if (props.imageList.length > 0 && currentIndex.value < props.imageList.length) {
+    const currentImage = props.imageList[currentIndex.value];
+    return currentImage?.title || '';
+  }
+  return props.title;
+});
+
+// 当前图片描述
+const currentImageDescription = computed(() => {
+  if (props.imageList.length > 0 && currentIndex.value < props.imageList.length) {
+    const currentImage = props.imageList[currentIndex.value];
+    return currentImage?.description || '';
+  }
+  return props.description;
+});
+
+// 是否有上一张图片
+const hasPrev = computed(() => {
+  return props.imageList.length > 1 && currentIndex.value > 0;
+});
+
+// 是否有下一张图片
+const hasNext = computed(() => {
+  return props.imageList.length > 1 && currentIndex.value < props.imageList.length - 1;
+});
+
+// 监听预览状态变化
+watch(showPreview, (newVal) => {
+  if (newVal) {
+    // 打开预览时重置旋转角度和当前索引
+    imageRotation.value = 0;
+    currentIndex.value = props.index;
+  }
+});
+
+// 打开预览
+const openPreview = () => {
+  if (props.preview) {
+    showPreview.value = true;
+  }
+};
+
+// 关闭预览
+const closePreview = () => {
+  showPreview.value = false;
+};
+
+// 上一张图片
+const prevImage = () => {
+  if (hasPrev.value) {
+    currentIndex.value--;
+    imageRotation.value = 0; // 切换图片时重置旋转
+  }
+};
+
+// 下一张图片
+const nextImage = () => {
+  if (hasNext.value) {
+    currentIndex.value++;
+    imageRotation.value = 0; // 切换图片时重置旋转
+  }
+};
+
+// 旋转图片
+const rotateImage = (degrees) => {
+  imageRotation.value += degrees;
+};
+</script>
+
+<style lang="scss" scoped>
+.vtk-img-container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+.vtk-img-card {
+  height: 100%;
+}
+
+.vtk-img-card--preview {
+  cursor: pointer;
+  transition: transform 0.2s ease-in-out;
+}
+
+.vtk-img-card--preview:hover {
+  transform: translateY(-5px);
+}
+
+.vtk-img {
+  width: 100%;
+}
+
+.vtk-img-info {
+  padding: 0;
+}
+
+.vtk-img-title {
+  word-break: break-word;
+}
+
+.vtk-img-description {
+  word-break: break-word;
+}
+
+/* 图片查看器样式 */
+.image-viewer-card {
+  background-color: rgba(0, 0, 0, 0.9);
+  color: white;
+}
+
+.image-viewer-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100vh - 150px);
+  position: relative;
+}
+
+.image-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.viewer-image {
+  max-width: 90%;
+  max-height: 80vh;
+  transition: transform 0.3s ease;
+}
+
+.nav-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  width: 50px;
+  height: 50px;
+}
+
+.prev-button {
+  left: 20px;
+}
+
+.next-button {
+  right: 20px;
+}
+
+.image-info {
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.image-info p {
+  margin: 5px 0;
+}
+
+:deep(.v-img__img) {
+  background: v-bind('props.error') no-repeat center;
+  background-size: cover;
+}
+
+:deep(.v-img__placeholder) {
+  filter: blur(0px);
+}
+</style>