large-model-component 1.0.0 → 1.0.2

package/packages/upload/src/upload.vue

@@ -0,0 +1,274 @@
+<script>
+import ajax from './ajax';
+import UploadDragger from './upload-dragger.vue';
+import SparkMD5 from 'spark-md5';
+function getFileMD5(file) {
+  return new Promise((resolve, reject) => {
+    const spark = new SparkMD5.ArrayBuffer();
+    const fileReader = new FileReader();
+    fileReader.onload = (e) => {
+      spark.append(e.target.result);
+      resolve(spark.end());
+    };
+    fileReader.onerror = () => {
+      reject('');
+    };
+    fileReader.readAsArrayBuffer(file);
+  });
+}
+
+export default {
+  inject: ['uploader'],
+  components: {
+    UploadDragger,
+  },
+  props: {
+    type: String,
+    action: {
+      type: String,
+      required: true,
+    },
+    name: {
+      type: String,
+      default: 'file',
+    },
+    data: Object,
+    chunkSize: Number,
+    thread: Number,
+    headers: Object,
+    withCredentials: Boolean,
+    multiple: Boolean,
+    accept: String,
+    onStart: Function,
+    onProgress: Function,
+    onSuccess: Function,
+    onError: Function,
+    beforeUpload: Function,
+    drag: Boolean,
+    onPreview: {
+      type: Function,
+      default: function () {},
+    },
+    onRemove: {
+      type: Function,
+      default: function () {},
+    },
+    fileList: Array,
+    autoUpload: Boolean,
+    listType: String,
+    httpRequest: {
+      type: Function,
+      default: ajax,
+    },
+    disabled: Boolean,
+    limit: Number,
+    onExceed: Function,
+  },
+
+  data() {
+    return {
+      mouseover: false,
+      reqs: {},
+    };
+  },
+
+  methods: {
+    isImage(str) {
+      return str.indexOf('image') !== -1;
+    },
+    handleChange(ev) {
+      const files = ev.target.files;
+
+      if (!files) return;
+      this.uploadFiles(files);
+    },
+    uploadFiles(files) {
+      if (this.limit && this.fileList.length + files.length > this.limit) {
+        this.onExceed && this.onExceed(files, this.fileList);
+        return;
+      }
+
+      let postFiles = Array.prototype.slice.call(files);
+      if (!this.multiple) {
+        postFiles = postFiles.slice(0, 1);
+      }
+
+      if (postFiles.length === 0) {
+        return;
+      }
+
+      postFiles.forEach((rawFile) => {
+        this.onStart(rawFile);
+        if (this.autoUpload) this.upload(rawFile);
+      });
+    },
+    upload(rawFile) {
+      this.$refs.input.value = null;
+
+      if (!this.beforeUpload) {
+        return this.post(rawFile);
+      }
+
+      const before = this.beforeUpload(rawFile);
+      if (before && before.then) {
+        before.then(
+          (processedFile) => {
+            const fileType = Object.prototype.toString.call(processedFile);
+
+            if (fileType === '[object File]' || fileType === '[object Blob]') {
+              if (fileType === '[object Blob]') {
+                processedFile = new File([processedFile], rawFile.name, {
+                  type: rawFile.type,
+                });
+              }
+              for (const p in rawFile) {
+                if (rawFile.hasOwnProperty(p)) {
+                  processedFile[p] = rawFile[p];
+                }
+              }
+              this.post(processedFile);
+            } else {
+              this.post(rawFile);
+            }
+          },
+          () => {
+            this.onRemove(null, rawFile);
+          },
+        );
+      } else if (before !== false) {
+        this.post(rawFile);
+      } else {
+        this.onRemove(null, rawFile);
+      }
+    },
+    abort(file) {
+      const { reqs } = this;
+      if (file) {
+        let uid = file;
+        if (file.uid) uid = file.uid;
+        if (reqs[uid]) {
+          // reqs[uid].abort();
+          reqs[uid].forEach((item) => {
+            item.abort();
+          });
+        }
+      } else {
+        Object.keys(reqs).forEach((uid) => {
+          if (reqs[uid]) {
+            // reqs[uid].abort();
+            reqs[uid].forEach((item) => {
+              item.abort();
+            });
+          }
+          delete reqs[uid];
+        });
+      }
+    },
+    async post(rawFile) {
+      //计算整个大文件hash
+      let fileHash = await getFileMD5(rawFile);
+      //大文件切片后的数组
+      let chunkList = [];
+      //开始切片
+      for (let i = 0; i < rawFile.size; i = i + this.chunkSize) {
+        const tmp = rawFile.slice(i, Math.min(i + this.chunkSize, rawFile.size));
+        chunkList.push(tmp);
+      }
+      // 计算每个切换的hash
+      const chunkHashList = await Promise.all(
+        chunkList.map(async (item) => {
+          return await getFileMD5(item);
+        }),
+      );
+
+      const { uid } = rawFile;
+      const options = {
+        headers: this.headers,
+        withCredentials: this.withCredentials,
+        file: rawFile,
+        data: this.data,
+        filename: this.name,
+        action: this.action,
+        fileHash: fileHash,
+        chunkList: chunkList,
+        chunkHashList: chunkHashList,
+        chunkSize: this.chunkSize,
+        thread: this.thread,
+        onProgress: (e) => {
+          this.onProgress(e, rawFile);
+        },
+        onSuccess: (res) => {
+          this.onSuccess(res, rawFile);
+          delete this.reqs[uid];
+        },
+        onError: (err) => {
+          this.onError(err, rawFile);
+          delete this.reqs[uid];
+        },
+      };
+      const req = this.httpRequest(options);
+      this.reqs[uid] = req;
+      if (req && req.then) {
+        req.then(options.onSuccess, options.onError);
+      }
+    },
+    handleClick() {
+      if (!this.disabled) {
+        this.$refs.input.value = null;
+        this.$refs.input.click();
+      }
+    },
+    handleKeydown(e) {
+      if (e.target !== e.currentTarget) return;
+      if (e.keyCode === 13 || e.keyCode === 32) {
+        this.handleClick();
+      }
+    },
+  },
+
+  render(h) {
+    let {
+      handleClick,
+      drag,
+      name,
+      handleChange,
+      multiple,
+      accept,
+      listType,
+      uploadFiles,
+      disabled,
+      handleKeydown,
+    } = this;
+    const data = {
+      class: {
+        'el-upload': true,
+      },
+      on: {
+        click: handleClick,
+        keydown: handleKeydown,
+      },
+    };
+    data.class[`el-upload--${listType}`] = true;
+    return (
+      <div {...data} tabindex="0">
+        {drag ? (
+          <upload-dragger disabled={disabled} on-file={uploadFiles}>
+            {this.$slots.default}
+          </upload-dragger>
+        ) : (
+          this.$slots.default
+        )}
+        <input
+          class="el-upload__input"
+          type="file"
+          ref="input"
+          name={name}
+          on-change={handleChange}
+          multiple={multiple}
+          accept={accept}
+        ></input>
+      </div>
+    );
+  },
+};
+</script>

package/src/App.vue

@@ -1,21 +1,251 @@
 <template>
   <div id="app">
+    <iipHeader :userName="'111'" :columns="columns" :showWorkBench="true" :token="'4ac43982-671d-45e5-8942-4f3d69b6a83c'"> </iipHeader>
+    <div class="content">
+      <!-- <iipUpload
+        class="upload-demo"
+        action="http://10.221.19.220:9922/file/part"
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
+        :before-remove="beforeRemove"
+        multiple
+        :limit="3"
+        :on-exceed="handleExceed"
+        :file-list="fileList"
+      >
+        <button size="small" type="primary">点击上传</button>
+        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+      </iipUpload> -->
+
+      <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
+    </div>
     <largeModel />
+
+    <iipFooter apiHost="https://ips.inspuriip.com" :apiPath="`/gateway/site`"></iipFooter>
   </div>
 </template>
 
 <script>
-import largeModel from "@pack/largeModel";
+import HelloWorld from './components/HelloWorld.vue';
+import iipHeader from '../packages/header/header.vue';
+import iipFooter from '../packages/footer/footer.vue';
+import iipUpload from '../packages/upload/index.js';
+import largeModel from '../packages/model/model.vue'
 export default {
   name: 'App',
   components: {
-    largeModel
+    HelloWorld,
+    iipHeader,
+    iipFooter,
+    iipUpload,
+    largeModel,
   },
   data() {
     return {
+      logoUrl: 'https://uoc.oss.cn-north-3.inspurcloudoss.com/uoc/1692862054225974.svg',
+      fileList: [
+        {
+          name: 'food.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+        },
+        {
+          name: 'food2.jpeg',
+          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
+        },
+      ],
+      userInfo: {},
+      columns: [
+        {
+          id: '17125390210365hp8af54mvj',
+          tenantId: '1739891443916546049',
+          columnName: '金融服务',
+          columnLink: 'https://sdsc.inspuriip.com/financial-service',
+          child: [],
+          sequence: '9',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '17049758382557lzl57j150f',
+          tenantId: '1739891443916546049',
+          columnName: '政策服务',
+          columnLink: 'https://sdsc.inspuriip.com/content-web/domain/industry_policy/',
+          child: [],
+          sequence: '8',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '17049741097141gmr2ov64r3',
+          tenantId: '1739891443916546049',
+          columnName: '产品方案',
+          columnLink: 'https://sdsc.inspuriip.com/service-web/product',
+          child: [
+            {
+              id: '1712538588667wndje2xe77',
+              tenantId: '1739891443916546049',
+              columnName: '解决方案',
+              columnLink: 'https://sdsc.inspuriip.com/service-web/scheme',
+              child: [],
+              sequence: '7',
+              runType: '1',
+              parentId: '17049741097141gmr2ov64r3',
+              isShow: '1',
+              columnType: '1',
+              clientId: '894283562298114048',
+              updateTime: '2024-04-08 09:17:14',
+              createUser: '942046827627151360',
+              updateUser: '942046827627151360',
+              createTime: '2024-04-08 09:17:14',
+            },
+            {
+              id: '1712538578330f2m7x85ajww',
+              tenantId: '1739891443916546049',
+              columnName: '服务产品',
+              columnLink: 'https://sdsc.inspuriip.com/service-web/product',
+              child: [],
+              sequence: '6',
+              runType: '1',
+              parentId: '17049741097141gmr2ov64r3',
+              isShow: '1',
+              columnType: '1',
+              clientId: '894283562298114048',
+              updateTime: '2024-04-08 09:17:14',
+              createUser: '942046827627151360',
+              updateUser: '942046827627151360',
+              createTime: '2024-04-08 09:17:14',
+            },
+          ],
+          sequence: '5',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '1704975259913hgxqsu10yz4',
+          tenantId: '1739891443916546049',
+          columnName: '供需对接',
+          columnLink: 'https://sdsc.inspuriip.com/demand-web/',
+          child: [],
+          sequence: '4',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '17125384397583zghuz9qp7u',
+          tenantId: '1739891443916546049',
+          columnName: '场景体验',
+          columnLink: 'https://sdsc.inspuriip.com/service-web/case',
+          child: [],
+          sequence: '3',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '171253840393102xwb7411gne',
+          tenantId: '1739891443916546049',
+          columnName: '企业诊断',
+          columnLink: 'https://sdsc.inspuriip.com/digital-diagosis-web/',
+          child: [],
+          sequence: '2',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '17125387536464kv0s0k1s29',
+          tenantId: '1739891443916546049',
+          columnName: '人才培训',
+          columnLink: 'https://sdsc.inspuriip.com/lecture-theatre/',
+          child: [],
+          sequence: '10',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+        {
+          id: '17049572082266uwn25bp1tn',
+          tenantId: '1739891443916546049',
+          columnName: '首页',
+          columnLink: 'https://sdsc.inspuriip.com/',
+          child: [],
+          sequence: '1',
+          runType: '1',
+          parentId: '0',
+          isShow: '1',
+          columnType: '1',
+          clientId: '894283562298114048',
+          updateTime: '2024-04-08 09:17:14',
+          createUser: '942046827627151360',
+          updateUser: '942046827627151360',
+          createTime: '2024-04-08 09:17:14',
+        },
+      ],
     };
   },
   methods: {
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(
+        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
+          files.length + fileList.length
+        } 个文件`,
+      );
+    },
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
   },
 };
 </script>
@@ -25,6 +255,14 @@ export default {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  .content {
+    text-align: center;
+    color: #2c3e50;
+    height: 1000px;
+    width: 100%;
+    background: #2c3e50;
+  }
 }
 .column {
   padding-left: 10px;

package/src/components/HelloWorld.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest" target="_blank" rel="noopener">unit-jest</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

package/{packages/largeModel → src/components}/contentFold.vue

@@ -19,8 +19,14 @@ import container from 'markdown-it-container';
 import abbr from 'markdown-it-abbr';
 import ins from 'markdown-it-ins';
 import mark from 'markdown-it-mark';
+import MarkdownItLatex from 'markdown-it-latex';
 import hljs from 'highlight.js';
 
+// 确保样式文件在 main.js 全局引入了，或者在这里正确相对路径引入
+// import 'highlight.js/styles/github.css';
+// import 'markdown-it-latex/dist/index.css';
+// import './css/github-markdown.css';
+
 export default {
   props: {
     content: { type: String, default: '' },
@@ -86,6 +92,13 @@ export default {
         .use(sub).use(sup).use(footnote).use(taskLists)
         .use(container, 'warning').use(abbr).use(ins).use(mark);
 
+      // 动态注册 latex，如果不需要可移除
+      try {
+        md.use(MarkdownItLatex);
+      } catch (e) {
+        console.warn('Latex plugin load failed', e);
+      }
+
       try {
         const parts = text.split('</think>');
         if (parts.length > 1) {

package/src/main.js

@@ -2,14 +2,9 @@ import Vue from 'vue'
 import App from './App.vue'
 import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
-import 'highlight.js/styles/github.css'
-import store from './store'
-import router from './router'
 Vue.config.productionTip = false
 import '@/assets/css/base.css'
 Vue.use(ElementUI);
 new Vue({
-  store,
-  router,
   render: h => h(App),
 }).$mount('#app')