@mt2025ui/mt-design 1.0.1

package/src/components/MtAttach/MtAttachmentDisplay.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="attachment-display">
+    <div
+      v-for="(attachment, index) in attachments"
+      :key="attachment.id || index"
+      class="attachment-item"
+    >
+      <div class="attachment-icon">
+        <t-icon :name="getFileIcon(attachment.name)" size="16" />
+      </div>
+      <div class="attachment-info">
+        <div class="attachment-name">{{ attachment.name }}</div>
+        <div class="attachment-meta">
+          <span class="attachment-size">{{
+            formatSize(parseFloat(attachment.fileSize))
+          }}</span>
+          <span class="attachment-time">{{
+            formatDate(attachment.createTime)
+          }}</span>
+        </div>
+      </div>
+      <div class="attachment-actions">
+        <t-button
+          theme="default"
+          v-if="
+            browseableExtensions.some((ext) =>
+              attachment.name.toLowerCase().includes('.' + ext)
+            )
+          "
+          variant="text"
+          size="small"
+          @click="downloadAttachment(attachment)"
+        >
+          <t-icon name="browse" />
+          查看
+        </t-button>
+        <t-button
+          theme="default"
+          variant="text"
+          size="small"
+          @click="downloadAttachment(attachment)"
+        >
+          <t-icon name="download" />
+          下载
+        </t-button>
+        <t-popconfirm
+          content="确认删除吗?"
+          @confirm="$emit('remove', attachment)"
+        >
+          <t-button
+            v-if="!readonly"
+            theme="default"
+            variant="text"
+            size="small"
+          >
+            <t-icon name="delete" />
+            删除
+          </t-button>
+        </t-popconfirm>
+      </div>
+    </div>
+    <div v-if="attachments.length === 0" class="empty-attachments">
+      暂无附件
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+interface Attachment {
+  id: string;
+  name: string;
+  fileSize: string;
+  createTime: Date | string;
+  url?: string;
+  shortUrl?: string;
+}
+
+const props = defineProps({
+  attachments: {
+    type: Array<Attachment>,
+    default: () => [],
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  host: {
+    type: String,
+    default: "",
+  },
+  browseableExtensions: {
+    type: Array<string>,
+    default: () => [
+      "pdf",
+      "doc",
+      "docx",
+      "xls",
+      "xlsx",
+      "ppt",
+      "pptx",
+      "jpg",
+      "jpeg",
+      "png",
+      "gif",
+    ],
+  },
+});
+
+const emit = defineEmits<{
+  (e: "remove", attachment: Attachment): void;
+}>();
+
+const getFileIcon = (fileName: string): string => {
+  const extension = fileName.split(".").pop()?.toLowerCase();
+  switch (extension) {
+    case "pdf":
+      return "document-pdf";
+    case "doc":
+    case "docx":
+      return "document-word";
+    case "xls":
+    case "xlsx":
+      return "document-excel";
+    case "ppt":
+    case "pptx":
+      return "document-ppt";
+    case "jpg":
+    case "jpeg":
+    case "png":
+    case "gif":
+      return "image";
+    case "zip":
+    case "rar":
+    case "7z":
+      return "compress";
+    default:
+      return "document";
+  }
+};
+
+const formatSize = (size: number): string => {
+  if (size === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(size) / Math.log(k));
+  return parseFloat((size / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+
+const formatDate = (date: Date | string): string => {
+  const d = typeof date === "string" ? new Date(date) : date;
+  return d.toLocaleString("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+const downloadAttachment = (attachment: Attachment) => {
+  if (attachment.url) {
+    let url = attachment.url;
+    if (props.host) {
+      url = props.host + attachment.url;
+    }
+    window.open(url, "_blank");
+  } else {
+    // 使用后端下载接口
+    window.location.href = `/api/Attachment/DownloadFile?id=${attachment.id}`;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.attachment-display {
+  width: 100%;
+
+  .attachment-item {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    border-bottom: 1px solid #e8e8e8;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #f5f7fa;
+    }
+
+    .attachment-icon {
+      margin-right: 12px;
+      color: #666;
+
+      .t-icon {
+        font-size: 20px;
+      }
+    }
+
+    .attachment-info {
+      flex: 1;
+
+      .attachment-name {
+        margin-bottom: 4px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .attachment-meta {
+        display: flex;
+        gap: 16px;
+        font-size: 12px;
+        color: #999;
+
+        .attachment-size {
+          margin-right: 8px;
+        }
+      }
+    }
+
+    .attachment-actions {
+      display: flex;
+      gap: 8px;
+
+      .t-button {
+        margin-left: 8px;
+      }
+    }
+  }
+
+  .empty-attachments {
+    padding: 24px;
+    color: #999;
+    text-align: center;
+    background-color: #fafafa;
+    border-radius: 4px;
+  }
+}
+</style>

package/src/components/MtAttach/MtAttachmentUpload.vue

@@ -0,0 +1,138 @@
+<template>
+  <t-upload
+    v-model="files"
+    :placeholder="`${props.placeholder} 最多只能上传 ${props.limit} 份文件`"
+    :requestMethod="requestMethod"
+    theme="file-flow"
+    multiple
+    :disabled="disabled"
+    :abridge-name="ABRIDGE_NAME"
+    :auto-upload="autoUpload"
+    :max="props.limit"
+    :show-thumbnail="showThumbnail"
+    :allow-upload-duplicate-file="allowUploadDuplicateFile"
+    :isBatchUpload="isBatchUpload"
+    :upload-all-files-in-one-request="uploadAllFilesInOneRequest"
+    :format-response="formatResponse"
+    :cancel-upload-button="null"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { PropType } from "vue";
+import { MessagePlugin } from "tdesign-vue-next";
+import type {
+  UploadFile,
+  UploadProps,
+  RequestMethodResponse,
+} from "tdesign-vue-next";
+
+// 简化类型定义
+type UploadProgressContext = any;
+type UploadErrorContext = any;
+type UploadSuccessContext = any;
+
+const props = defineProps({
+  limit: {
+    type: Number,
+    default: 0,
+  },
+  maxSize: {
+    type: Number,
+    default: 0,
+  },
+  accept: {
+    type: String,
+    default: "",
+  },
+  refModel: {
+    type: String,
+    default: "",
+  },
+  refApp: {
+    type: String,
+    default: "",
+  },
+  theme: {
+    type: String as PropType<"easy" | "advanced">,
+    default: "advanced",
+  },
+  placeholder: {
+    type: String,
+    default: "支持批量上传文件，文件格式不限",
+  },
+  requestMethod: {
+    type: Function as PropType<UploadProps["requestMethod"]>,
+    default: (
+      files: UploadFile | UploadFile[]
+    ): Promise<RequestMethodResponse> =>
+      Promise.resolve<RequestMethodResponse>({
+        status: "fail",
+      } as RequestMethodResponse),
+  },
+});
+const files = ref<UploadProps["value"]>([]);
+const ABRIDGE_NAME: UploadProps["abridgeName"] = [10, 7];
+const disabled = ref(false);
+const autoUpload = ref(false);
+const showThumbnail = ref(true);
+const allowUploadDuplicateFile = ref(false);
+const isBatchUpload = ref(false);
+const uploadAllFilesInOneRequest = ref(false);
+const formatResponse: UploadProps["formatResponse"] = (res) => {
+  if (!res) {
+    return {
+      status: "fail",
+      error: "上传失败，原因：文件过大或网络不通",
+    };
+  }
+  return res;
+};
+const emit = defineEmits<{
+  (e: "upload-success", files: UploadProps["value"]): void;
+  (e: "upload-error", error: any): void;
+}>();
+
+const beforeUpload = (_file: File) => {
+  // 可以在这里添加额外的文件验证逻辑
+  return true;
+};
+
+const submitUpload = () => {
+  // 触发上传
+  const uploadInstance = (document.querySelector(".t-upload") as any)
+    .uploadInstance;
+  if (uploadInstance) {
+    uploadInstance.submit();
+  }
+};
+
+const clearFiles = () => {
+  files.value = [];
+};
+
+const handleSuccess = (_options: UploadSuccessContext) => {
+  MessagePlugin.success("文件上传成功");
+  emit("upload-success", files.value);
+};
+
+const handleError = (options: UploadErrorContext) => {
+  MessagePlugin.error("文件上传失败");
+  emit("upload-error", options);
+};
+
+const handleProgress = (options: UploadProgressContext) => {
+  // 可以在这里处理上传进度
+  console.log("上传进度:", options.percent);
+};
+</script>
+
+<style scoped lang="scss">
+.upload-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  margin-top: 12px;
+}
+</style>

package/src/components/MtIcon/MtIcon.vue

@@ -0,0 +1,48 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <!-- xlink:href 兼容旧浏览器，href 是新标准 -->
+    <use :xlink:href="iconName" :href="iconName" />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  name: {
+    type: String,
+    required: true,
+    // 注意：IconFont 生成的 ID 通常带有前缀，如 #icon-home
+    // 这里假设传入的是 'home'，组件自动拼接 '#icon-home'
+  },
+  className: {
+    type: String,
+    default: "",
+  },
+  // color: {
+  //   type: String,
+  //   default: '' // 如果不传，则继承父元素颜色或保持原色
+  // }
+});
+
+const iconName = computed(() => `#icon-${props.name}`);
+const svgClass = computed(() => {
+  if (props.className) {
+    return `mt-icon ${props.className}`;
+  }
+  return "mt-icon";
+});
+</script>
+
+<style scoped>
+.mt-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  overflow: hidden;
+  vertical-align: -0.15em;
+  fill: currentcolor; /* 关键：默认跟随文字颜色 */
+}
+
+/* 如果 props.color 有值，可以通过 style 覆盖，或者在这里写特定逻辑 */
+</style>

package/src/components/MtIcon/index.ts

@@ -0,0 +1,4 @@
+import MtIcon from "./MtIcon.vue";
+
+export { MtIcon };
+export default MtIcon;

package/src/components/MtLayout/MtContainer.vue

@@ -0,0 +1,97 @@
+<template>
+  <Teleport :to="teleportTarget" v-if="teleportTarget">
+    <div class="mt-container" v-show="isActive">
+      <slot></slot>
+    </div>
+  </Teleport>
+  <!-- If not yet teleported (no owner), maybe don't render or render in place? -->
+  <div v-else class="mt-container-placeholder" style="display: none"></div>
+</template>
+
+<script setup lang="ts">
+import { inject, ref, onMounted, onBeforeUnmount, watch, computed } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "Container",
+  },
+});
+
+const isActive = ref(false);
+const id = `container-${Math.random().toString(36).substr(2, 9)}`;
+const ownerContentId = ref<string | null>(null);
+const isMounted = ref(false);
+
+// Inject parent layout item context
+const layoutItem = inject<any>("mt-layout-item", null);
+
+const teleportTarget = computed(() => {
+  return isMounted.value && ownerContentId.value
+    ? `#${ownerContentId.value}`
+    : null;
+});
+
+const setOwner = (contentId: string, _itemId: string) => {
+  ownerContentId.value = contentId;
+};
+
+if (layoutItem) {
+  ownerContentId.value = layoutItem.contentId;
+
+  const containerData = {
+    id,
+    title: props.title,
+    setActive: (active: boolean) => {
+      isActive.value = active;
+    },
+    setOwner,
+  };
+
+  onMounted(() => {
+    layoutItem.registerContainer(containerData);
+    // Defer enabling teleport to ensure parent DOM exists
+    setTimeout(() => {
+      isMounted.value = true;
+    }, 0);
+  });
+
+  onBeforeUnmount(() => {
+    layoutItem.unregisterContainer(id);
+  });
+
+  watch(
+    () => props.title,
+    (newTitle) => {
+      layoutItem.updateContainerTitle(id, newTitle);
+    }
+  );
+}
+</script>
+
+<style scoped>
+.mt-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+/* Custom Scrollbar */
+.mt-container::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.mt-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.mt-container::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 3px;
+}
+
+.mt-container::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+</style>