@yxhl/specter-pui-vtk 1.0.0

package/src/components/assembly/VtkSearch.vue

@@ -0,0 +1,145 @@
+<template>
+	<div class="search">
+		<VMenu v-model="menu" @update:model-value="obtain" location="bottom start" :close-on-content-click="false">
+			<template v-slot:activator="{ props }">
+				<VTextField v-model="queryParam.condition" :placeholder="$attrs.placeholder || '请输入查询内容'"
+					:style="$attrs.styles" class="box" density="compact" variant="outlined" hide-details
+					@click:append="search" @keyup.enter="search" @click:clear="(queryParam.condition = ''), search()"
+					clearable>
+					<template v-slot:append-inner>
+						<VBadge dot :content="initialIndex" :model-value="initialIndex > 0" color="error"
+							class="advanced-badge">
+							<span v-bind="props"
+								class="text-blue vtk-cursor-pointer d-inline-flex align-center text-body-2">
+								高级
+							</span>
+						</VBadge>
+					</template>
+				</VTextField>
+			</template>
+			<VCard style="width: 380px;margin-top: 25px;">
+				<VCardTitle class="pr-3 d-flex justify-space-between align-center pb-5">
+					高级搜索
+					<VBtn class="mx-0" variant="text" icon @click="close" small>
+						<VIcon>mdi-close</VIcon>
+					</VBtn>
+				</VCardTitle>
+				<VCardText>
+					<slot></slot>
+				</VCardText>
+				<VCardActions class="pt-0 px-4 pb-3">
+					<slot name="actions"></slot>
+					<VSpacer />
+					<VBtn @click="search" variant="flat" color="primary">
+						<VIcon class="mr-1">mdi-magnify</VIcon>搜索
+					</VBtn>
+					<VBtn @click="reset" variant="flat" color="error">
+						<VIcon class="mr-1">mdi-sync</VIcon>重置
+					</VBtn>
+				</VCardActions>
+			</VCard>
+		</VMenu>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+
+defineOptions({
+	name: "VtkSearch"
+});
+
+const props = defineProps({
+	value: {
+		type: Object,
+		default: () => ({})
+	}
+});
+
+const emit = defineEmits(['update:value', 'search']);
+
+// 响应式数据
+const user = ref({});
+const menu = ref(false);
+const queryParam = ref({ ...props.value });
+const initialIndex = ref(0);
+
+// 监听 props.value 的变化
+watch(
+	() => props.value,
+	(newVal) => {
+		queryParam.value = { ...newVal };
+	},
+	{ deep: true }
+);
+
+onMounted(() => {
+	user.value = JSON.parse(localStorage.getItem("user") || "{}");
+	initialIndex.value = 0;
+});
+
+// 方法
+const obtain = () => {
+	if (!menu.value) {
+		initialIndex.value = 0;
+	}
+};
+
+const close = () => {
+	menu.value = false;
+	obtain();
+};
+
+const search = () => {
+	close();
+	emit('update:value', queryParam.value);
+	emit("search");
+};
+
+// 重置
+const reset = () => {
+	// 简化版重置逻辑
+	Object.keys(queryParam.value).forEach(key => {
+		if (key !== 'condition') {
+			delete queryParam.value[key];
+		}
+	});
+
+	delete queryParam.value.condition;
+	initialIndex.value = 0;
+	emit('update:value', queryParam.value);
+	emit("search");
+	menu.value = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.search {
+	position: relative;
+	min-width: 380px;
+	min-height: 40px;
+}
+
+.box {
+	min-width: 380px;
+	min-height: 40px;
+}
+
+
+:deep(.box .v-field__append-inner) {
+	cursor: pointer;
+	padding-left: 16px !important;
+	padding-right: 4px !important;
+	border-left: 1px #cccccc88 solid;
+	min-width: 50px;
+	display: flex;
+	align-items: center;
+}
+
+:deep(.v-overlay__content) {
+	top: 285px !important;
+	left: unset !important;
+	right: 60px !important;
+	min-width: 380px;
+}
+</style>

package/src/components/assembly/VtkSelect.vue

@@ -0,0 +1,104 @@
+<template>
+  <VSelect 
+    v-bind="filteredAttrs" 
+    :items="items" 
+    item-title="codeValue" 
+    item-value="code" 
+    :multiple="multi"
+    :menu-props="{ offsetY: true }" 
+    @update:model-value="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted, useAttrs, computed } from 'vue'
+import Request from "../../commons/request";
+
+// 定义组件名称和选项
+defineOptions({
+  name: "VtkSelect",
+  inheritAttrs: false
+});
+
+// 定义 props
+const props = defineProps({
+  // 数据库字段名字(DISABLE_TYPE) 或 静态的字段（0:否/1:是）
+  list: {
+    type: String,
+    default: null,
+  },
+  multi: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 定义 emits
+const emit = defineEmits(['update:modelValue']);
+
+// 获取所有传递的属性
+const attrs = useAttrs();
+
+// 过滤属性，排除组件内部使用的属性
+const filteredAttrs = computed(() => {
+  const { list, multi, ...rest } = attrs;
+  return rest;
+});
+
+// 响应式数据
+const items = ref([]);
+
+// 方法定义
+const miscs = () => {
+  Request.getForm(`dict/misc/list/${props.list}`).then((res) => {
+    items.value = res.data;
+  });
+};
+
+const statc = () => {
+  if (!props.list) return;
+  
+  props.list.split("/").forEach((it) => {
+    const its = it.split(":");
+    items.value.push({ code: its[0], codeValue: its[1] });
+  });
+};
+
+// 生命周期钩子
+onMounted(() => {
+  if (props.list) {
+    if (props.list.includes(":")) {
+      statc();
+    } else {
+      miscs();
+    }
+  }
+});
+
+// 使用方式
+// <vtk-select
+//   v-model="value"
+//   list="YOUR_LIST"
+//   variant="outlined"      <!-- 样式变体 -->
+//   density="compact"       <!-- 密度 'default' | 'comfortable' | 'compact' -->
+//   clearable               <!-- 可清除 -->
+//   placeholder="请选择"     <!-- 占位符 -->
+//   :rules="rules"          <!-- 验证规则 -->
+//   disabled                <!-- 禁用状态 -->
+//   readonly                <!-- 只读状态 -->
+//   hide-details            <!-- 隐藏详情信息 -->
+// />
+
+</script>
+
+<style>
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  height: 100px;
+  background-color: #007acc;
+}
+</style>

package/src/components/assembly/VtkStepper.vue

@@ -0,0 +1,160 @@
+<template>
+	<VStepper class="elevation-0" v-model="stepIndex">
+		<VStepperHeader class="elevation-0" style="overflow: hidden;">
+			<VRow class="stepList">
+				<VCol class="pl-0 colItem" v-for="(item, index) in step" :key="index" style="">
+					<div class="first-box1 last-box pl-10 py-5 stepItem" :class="stepIndex > index? 'selected' : ''"
+						:complete="stepIndex > index" :step="index + 1">
+						{{ item }}
+					</div>
+				</VCol>
+			</VRow>
+		</VStepperHeader>
+
+		<VStepperWindow>
+			<VStepperWindowItem v-for="(item, index) in list" :key="index" :value="index + 1">
+				<slot :name="index + 1"></slot>
+			</VStepperWindowItem>
+			<slot></slot>
+		</VStepperWindow>
+	</VStepper>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+
+// 定义组件名称
+defineOptions({
+	name: "VtkStepper",
+	inheritAttrs: false,
+});
+
+// 定义props
+const props = defineProps({
+	list: {
+		type: String,
+		default: null,
+	},
+	el: {
+		type: Number,
+		default: 1,
+	},
+});
+
+// 响应式数据
+const stepIndex = ref(props.el);
+const step = ref([]);
+
+// 监听el属性变化
+watch(() => props.el, (val) => {
+	stepIndex.value = val;
+});
+
+// 处理内容
+const content = () => {
+	if (props.list) {
+		step.value = props.list.split(",");
+	}
+};
+
+// 组件挂载时执行
+onMounted(() => {
+	content();
+});
+
+// 监听list变化
+watch(() => props.list, () => {
+	content();
+});
+</script>
+
+<style lang="scss" scoped>
+// 颜色变量定义
+$color-background: #c7ccd538;
+$color-selected: #165dff;
+$color-white: #fff;
+$color-light-bg: #f2f3f5;
+$color-dark-bg: #1e1e1e;
+
+.v-stepper__step {
+	background: $color-background;
+	position: relative;
+}
+
+// 隐藏步骤数字
+:deep(.v-stepper__step__step) {
+	display: none !important;
+}
+
+.stepItem {
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	padding: 24px;
+	position: relative;
+	background: $color-background;
+
+	// 暗色主题样式
+	.v-theme--dark & {
+		color: rgba(255, 255, 255, 0.5);
+	}
+
+	// 选中状态
+	&.selected {
+		background: $color-selected;
+		color: $color-white !important;
+
+		&.last-box::after {
+			border-color: transparent transparent transparent $color-selected;
+		}
+
+		:deep(.v-stepper__label) {
+			color: $color-white !important;
+		}
+	}
+}
+
+.colItem {
+	&:first-child .first-box1::before {
+		border-color: transparent !important;
+	}
+
+	&:last-child .last-box::after {
+		border-color: transparent !important;
+	}
+}
+
+.first-box1::before {
+	position: absolute;
+	left: 0;
+	content: "";
+	width: 0;
+	height: 0;
+	z-index: 0;
+	border: 30px solid;
+	border-color: transparent transparent transparent $color-white;
+
+	.v-theme--dark & {
+		border-color: transparent transparent transparent $color-dark-bg;
+	}
+}
+
+.last-box::after {
+	position: absolute;
+	right: -70px;
+	content: "";
+	z-index: 1;
+	width: 0;
+	height: 0;
+	border: 35px solid;
+	border-color: transparent transparent transparent $color-light-bg;
+
+	.v-theme--dark & {
+		border-color: transparent transparent transparent $color-background;
+	}
+}
+
+.theme--dark.v-stepper {
+	background: transparent;
+}
+</style>

package/src/components/message/alert.vue

@@ -0,0 +1,31 @@
+<template>
+  <VDialog v-model="isActive" persistent :width="options.width">
+    <VCard :color="options.color">
+      <VCardTitle>{{ options.title }}</VCardTitle>
+      <VCardText v-if="options.text">
+        {{ options.text }}
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn text @click="close_modal">确定</VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useMessageStore } from '../../stores/message.js' // 根据实际路径调整
+
+const messageStore = useMessageStore()
+
+
+// 使用 computed 获取响应式数据
+const isActive = computed(() => messageStore.alert?.isActive || false)
+const options = computed(() => messageStore.alert?.options || {})
+
+// 关闭模态框方法
+const close_modal = () => {
+  messageStore.hide('alert')
+}
+</script>

package/src/components/message/confirm.vue

@@ -0,0 +1,44 @@
+<template>
+  <VDialog v-model="isActive" persistent :width="options.width">
+    <VCard :color="options.color">
+      <VCardTitle>{{ options.title }}</VCardTitle>
+      <VCardText v-if="options.text">
+        {{ options.text }}
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn text @click="cancel">{{ options.cancelText || '取消' }}</VBtn>
+        <VBtn text @click="confirm">{{ options.confirmText || '确定' }}</VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useMessageStore } from '../../stores/message.js'
+
+const messageStore = useMessageStore()
+
+// 使用 computed 获取响应式数据
+const isActive = computed(() => messageStore.alert?.isActive || false)
+const options = computed(() => messageStore.alert?.options || {})
+
+// 确认操作
+const confirm = () => {
+  // 如果 options.onConfirm 存在则执行回调
+  if (typeof options.value.onConfirm === 'function') {
+    options.value.onConfirm()
+  }
+  messageStore.hide('alert')
+}
+
+// 取消操作
+const cancel = () => {
+  // 如果 options.onCancel 存在则执行回调
+  if (typeof options.value.onCancel === 'function') {
+    options.value.onCancel()
+  }
+  messageStore.hide('alert')
+}
+</script>

package/src/components/message/index.js

@@ -0,0 +1,55 @@
+// components/message/index.js
+import { useMessageStore } from '../../stores/message.js'
+
+const Message = {
+  // 显示 alert
+  alert(options) {
+    const messageStore = useMessageStore()
+    messageStore.show('alert', options)
+  },
+  
+  // 显示 confirm
+  confirm(options) {
+    const messageStore = useMessageStore()
+    messageStore.show('confirm', options)
+  },
+  
+  // 显示 loading
+  loading(options) {
+    const messageStore = useMessageStore()
+    const defaultOptions = {
+      title: '加载中...',
+      text: '',
+      color: '',
+      width: 300,
+      indeterminate: true,
+      progressColor: 'primary'
+    }
+    messageStore.show('loading', { ...defaultOptions, ...options })
+  },
+  
+  // 显示 prompt
+  prompt(options) {
+    const messageStore = useMessageStore()
+    messageStore.show('prompt', options)
+  },
+  
+  // 显示 toast
+  toast(text, options = {}) {
+    
+    const messageStore = useMessageStore()
+    // 确保传入的是字符串时正确处理
+    const toastOptions = typeof text === 'string' 
+      ? { text, ...options }
+      : text
+    messageStore.show('toast', toastOptions)
+  },
+  
+  // 隐藏指定类型的消息
+  hide(type) {
+    const messageStore = useMessageStore()
+    messageStore.hide(type)
+  }
+}
+
+export default Message

package/src/components/message/loading.vue

@@ -0,0 +1,33 @@
+<template>
+  <VDialog v-model="isActive" persistent :width="options.width" hide-overlay>
+    <VCard :color="options.color">
+      <VCardTitle>{{ options.title }}</VCardTitle>
+      <VCardText>
+        <VProgressLinear
+          v-if="options.indeterminate !== false"
+          indeterminate
+          :color="options.progressColor || 'primary'"
+        />
+        <VProgressLinear
+          v-else
+          :value="options.value || 0"
+          :color="options.progressColor || 'primary'"
+        />
+        <div v-if="options.text" class="mt-2">
+          {{ options.text }}
+        </div>
+      </VCardText>
+    </VCard>
+  </VDialog>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useMessageStore } from '../../stores/message.js'
+
+const messageStore = useMessageStore()
+
+// 使用 computed 获取响应式数据
+const isActive = computed(() => messageStore.loading?.isActive || false)
+const options = computed(() => messageStore.loading?.options || {})
+</script>

package/src/components/message/prompt.vue

@@ -0,0 +1,57 @@
+<template>
+  <VDialog v-model="isActive" persistent :width="options.width">
+    <VCard :color="options.color">
+      <VCardTitle>{{ options.title }}</VCardTitle>
+      <VCardText>
+        <VTextField
+          v-model="inputValue"
+          :label="options.label"
+          :placeholder="options.placeholder"
+          :type="options.inputType || 'text'"
+          outlined
+          dense
+        />
+        <div v-if="options.text" class="mt-2">
+          {{ options.text }}
+        </div>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn text @click="cancel">{{ options.cancelText || '取消' }}</VBtn>
+        <VBtn text @click="confirm">{{ options.confirmText || '确定' }}</VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { useMessageStore } from '../../stores/message.js'
+
+const messageStore = useMessageStore()
+const inputValue = ref('')
+
+// 使用 computed 获取响应式数据
+const isActive = computed(() => messageStore.prompt?.isActive || false)
+const options = computed(() => messageStore.prompt?.options || {})
+
+// 确认操作
+const confirm = () => {
+  // 如果 options.onConfirm 存在则执行回调
+  if (typeof options.value.onConfirm === 'function') {
+    options.value.onConfirm(inputValue.value)
+  }
+  messageStore.hide('prompt')
+  inputValue.value = '' // 清空输入值
+}
+
+// 取消操作
+const cancel = () => {
+  // 如果 options.onCancel 存在则执行回调
+  if (typeof options.value.onCancel === 'function') {
+    options.value.onCancel()
+  }
+  messageStore.hide('prompt')
+  inputValue.value = '' // 清空输入值
+}
+</script>

package/src/components/message/toast.vue

@@ -0,0 +1,45 @@
+<template>
+	<VSnackbar v-model="isActive" :timeout="options.timeout > 0 ? options.timeout : 3000" :color="options.color" centered @update:modelValue="onModelUpdate">
+		{{ options.text }}
+		<template v-slot:actions>
+			<VBtn text icon @click="close_modal()">
+				<VIcon>mdi-close</VIcon>
+			</VBtn>
+		</template>
+	</VSnackbar>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useMessageStore } from "../../stores/message.js";
+
+const messageStore = useMessageStore();
+
+const isActive = computed({
+	get: () => messageStore.toast?.isActive || false,
+	set: (value) => {
+		if (messageStore.toast) {
+			messageStore.toast.isActive = value;
+		}
+	},
+});
+
+const options = computed(() => messageStore.toast?.options || {});
+
+const close_modal = () => {
+	messageStore.hide("toast");
+};
+
+// 监听模型值更新
+const onModelUpdate = (value) => {
+	if (!value) {
+		// Snackbar 关闭时确保 store 状态同步
+		messageStore.hide("toast");
+	}
+};
+</script>
+<style lang="scss" scoped>
+::v-deep .v-snackbar__wrapper {
+	top: 24px;
+}
+</style>

package/src/components/message/vtkMessage.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="text-center">
+    <vtk-alert />
+    <vtk-confirm />
+    <vtk-loading />
+    <vtk-prompt />
+    <vtk-toast />
+  </div>
+</template>
+
+<script>
+import vtkAlert from "./alert";
+import vtkConfirm from "./confirm";
+import vtkLoading from "./loading";
+import vtkPrompt from "./prompt";
+import vtkToast from "./toast";
+export default {
+  name: "vtkMessage",
+  components: {
+    vtkAlert,
+    vtkConfirm,
+    vtkLoading,
+    vtkPrompt,
+    vtkToast,
+  },
+};
+</script>