large-model-component 1.0.0

package/docs/.vuepress/config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  theme: '',
+  title: '公共组件库',
+  description: 'industrial-web-component',
+  base: '/docs-web/',
+  port: '8080',
+  themeConfig: {
+    nav: [
+      {
+        text: '首页',
+        link: '/',
+      },
+      {
+        text: '组件',
+        link: '/comps/',
+      },
+      {
+        text: '更新记录',
+        link: '/logs/',
+      },
+    ],
+    sidebar: {
+      // 配置侧边栏部分
+      '/comps/': ['/comps/', '/comps/header.md'],
+    },
+  },
+  head: [],
+  plugins: ['demo-container'], // 组件示例配置插件
+  markdown: {},
+};

package/docs/.vuepress/enhanceApp.js

@@ -0,0 +1,7 @@
+import iipComponents from '../../packages/index';
+
+export default async ({ Vue }) => {
+  if (typeof process === 'undefined') {
+    Vue.use(iipComponents);
+  }
+};

package/docs/.vuepress/styles/palette.styl

@@ -0,0 +1,3 @@
+.theme-default-content:not(.custom){
+  max-width:none
+}

package/docs/README.md

@@ -0,0 +1,12 @@
+---
+home: true
+heroImage: https://uoc.oss.cn-north-3.inspurcloudoss.com/uoc/1648607149757808.ico
+heroText: industrial-web-component
+features:
+  - title: 一致性 Consistency
+    details: 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念
+  - title: 反馈 Feedback
+    details: 通过界面样式和交互动效让用户可以清晰的感知自己的操作
+  - title: 效率 Efficiency
+    details: 界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
+---

package/docs/comps/README.md

@@ -0,0 +1,18 @@
+# 安装
+
+## npm 安装
+
+安装命令：
+
+```shell
+npm i industrial-web-component -S
+
+```
+
+## 仓库源地址
+
+```shell
+
+https://nexus.qualink.com/repository/npm-hosted/
+
+```

package/docs/comps/header.md

@@ -0,0 +1,100 @@
+# 基本信息组件
+
+通用顶部导航栏
+
+## 顶部导航栏
+
+::: demo 使用 demo 如下
+
+```html
+<template>
+  <div>
+    <iipHeader
+      class="column"
+      :logoUrl="logo"
+      :loginUrl="loginUrl"
+      :showWorkBench="useWorkBench"
+      :columns="columnList"
+      :userName="userName"
+      @log-out="logout"
+      @go-work-bench="goWorkBench"
+    >
+    </iipHeader>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        // 配置信息
+        logo: 'http://10.221.19.220:8083/gateway/file/MjAyMy8xMC8xMi9hMWY5ZmRmMGQ1MTc0M2JkYThhYjNjM2E0ZTIxNzhlMg==',
+        loginUrl:
+          'http://10.221.19.220:8083/sign/authz/oauth/v20/authorize?client_id=894283562298114048&response_type=code&redirect_uri=http://10.221.19.220:8083',
+        useWorkBench: true, //
+        columnList: [], // 栏目列表
+        userName: '珈百璃',
+      };
+    },
+    methods: {
+      logout() {
+        // 登出逻辑
+      },
+      goWorkBench() {
+        //工作台跳转逻辑
+      },
+    },
+  };
+</script>
+<style>
+  .column {
+    position: relative;
+    z-index: 3;
+  }
+</style>
+```
+
+:::
+
+### iipHeader Attributes
+
+| 参数          | 说明                                   | 类型    | 可选值     | 默认值                                                                 |
+| :------------ | :------------------------------------- | :------ | :--------- | :--------------------------------------------------------------------- |
+| showWorkBench | 是否使用工作台                         | Boolean | false/true | false                                                                  |
+| logoUrl       | Logo 链接                              | String  | ——         | ——                                                                     |
+| loginUrl      | 登录链接                               | String  | ——         | ——                                                                     |
+| useSlot       | 是否使用插槽                           | Boolean | false/true | false                                                                  |
+| columns       | 默认栏目，仅当 useSolt 为 false 时生效 | Array   | ——         | ——                                                                     |
+| userName      | 用户栏显示用户名                       | String  | ——         | ——                                                                     |
+| userLinks     | 用户栏下拉额外添加项                   | Array   | ——         | 账号中心相关                                                           |
+| userLogo      | 用户栏图标                             | String  | ——         | https://uoc.oss.cn-north-3.inspurcloudoss.com/uoc/1694143414545484.svg |
+
+### columns Attributes
+
+栏目列表对象格式如下：
+
+| 参数       | 说明                   | 类型   | 可选值                   | 默认值 |
+| :--------- | :--------------------- | :----- | :----------------------- | :----- |
+| columnName | 栏目名称               | String | ——                       | ——     |
+| columnLink | 跳转链接               | String | ——                       | ——     |
+| runType    | 跳转方式               | String | 0，内部跳转；1，外部跳转 | 1      |
+| child      | 子栏目，格式与栏目相同 | Array  | ——                       | ——     |
+
+## 底部信息栏
+
+如果在 nuxt 中使用，需要使用 clientOnly 组件
+
+```html
+<template>
+  <iipFooter :apiHost="`http://10.221.19.220:8083`" :apiPath="`/gateway/site/1/links`"></iipFooter>
+</template>
+```
+
+:::
+
+### iipFooter Attributes
+
+| 参数       | 说明                              | 类型   | 可选值 | 默认值          |
+| :--------- | :-------------------------------- | :----- | :----- | :-------------- |
+| apiHost    | 调用域名                          | String | ———    | window.location |
+| apiPath    | 调用方法，优先级高于 footerData   | String | ——     | ——              |
+| footerData | 数据传值，当不设置 apiPath 时生效 | String | ——     | ——              |

package/docs/logs/README.md

@@ -0,0 +1,42 @@
+## 2.0.0 (2024-02-21)
+
+- 功能增删
+
+## 1.3.4 (2023-12-15)
+
+- 修改一些 bug
+
+## 1.3.0 (2023-11-23)
+
+- 与评估诊断版本分开
+
+## 1.2.7 (2023-11-13)
+
+- 替换 user 图标
+- 修改栏目与 logo 间距
+
+## 1.2.4 (2023-11-13)
+
+- 修改顶部导航栏，栏目的高度
+
+## 1.2.3 (2023-11-6)
+
+- 修改一些 bug
+
+## 1.2.0 (2023-11-4)
+
+- 去掉 userLogo 入参，改为本地使用
+- footer 修改数据使用逻辑，增加自身调用接口请求数据
+
+## 1.1.7 (2023-10-20)
+
+- 将右上角图标改为本地引用
+
+## 1.1.6 (2023-10-20)
+
+- 修改 userlink 样式
+- 增加 CHANGELOG.md 文档
+
+# 1.0.0 (2023-10-12)
+
+- 从 0.21.0 迁移代码

package/f2elint.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  enableStylelint: true,
+  enableMarkdownlint: true,
+  enablePrettier: true,
+};

package/jsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "large-model-component",
+  "version": "1.0.0",
+  "private": false,
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib packages/index.js",
+    "f2elint-scan": "f2elint scan",
+    "f2elint-fix": "f2elint fix",
+    "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
+  },
+  "peerDependencies": {
+    "element-ui": "^2.15.14"
+  },
+  "main": "dist/large-model-component.umd.min.js",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "axios": "0.18.1",
+    "core-js": "^3.8.3",
+    "element-ui": "2.13.2",
+    "event-source-polyfill": "^1.0.31",
+    "highlight.js": "^11.7.0",
+    "python": "^0.0.4",
+    "sass": "^1.32.0",
+    "spark-md5": "^3.0.2",
+    "vue": "^2.6.14",
+    "vuex": "^3.6.2",
+    "vue-router": "3.0.6",
+    "markdown-it": "12.3.2",
+    "markdown-it-abbr": "^2.0.0",
+    "markdown-it-container": "^4.0.0",
+    "markdown-it-emoji": "^3.0.0",
+    "markdown-it-footnote": "^4.0.0",
+    "markdown-it-github-toc": "^3.2.4",
+    "markdown-it-ins": "^4.0.0",
+    "markdown-it-latex": "^0.2.0",
+    "markdown-it-mark": "^4.0.0",
+    "markdown-it-sub": "^2.0.0",
+    "markdown-it-sup": "^2.0.0",
+    "markdown-it-task-lists": "^2.1.1",
+    "webpack": "5.94.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/test-utils": "^1.1.3",
+    "@vue/vue2-jest": "^27.0.0-alpha.2",
+    "babel-jest": "^27.0.6",
+    "jest": "^27.0.5",
+    "sass": "^1.32.0",
+    "sass-loader": "^10.2.0",
+    "vue-template-compiler": "^2.6.14",
+    "vuepress": "^1.9.10",
+    "vuepress-plugin-demo-container": "^0.2.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "jest": {
+    "preset": "@vue/cli-plugin-unit-jest"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "f2elint commit-file-scan",
+      "commit-msg": "f2elint commit-msg-scan"
+    }
+  }
+}

package/packages/index.js

@@ -0,0 +1,27 @@
+// 整个包的入口
+// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
+// 统一导出
+// 导入颜色选择器组件
+import largeModel from './largeModel';
+
+// 存储组件列表
+const components = [largeModel];
+const install = function (Vue, options = {}) {
+  // 全局注册所有的组件
+  components.forEach((item) => {
+    Vue.component(item.name, item);
+  });
+};
+
+// Vue.prototype.$message = Message;
+// Vue.prototype.$notice = Notice;
+
+// 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue);
+}
+
+export default {
+  install,
+  largeModel,
+};

package/packages/largeModel/contentFold.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="show-information">
+    <div class="info-content">
+      <!-- 思考过程 -->
+      <div v-if="thinkProcess" class="info-main markdown-body think-process" v-html="thinkProcess"></div>
+      <!-- 主要内容 -->
+      <div class="info-main markdown-body" ref="observedElement" v-html="renderedContent"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import MarkdownIt from 'markdown-it';
+import sub from 'markdown-it-sub';
+import sup from 'markdown-it-sup';
+import footnote from 'markdown-it-footnote';
+import taskLists from 'markdown-it-task-lists';
+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 hljs from 'highlight.js';
+
+export default {
+  props: {
+    content: { type: String, default: '' },
+    height: { type: Number, default: 150 } // 增加默认高度以防误判
+  },
+  data() {
+    return {
+      fold: true,
+      isShow: false,
+      thinkProcess: '',
+      renderedContent: ''
+    };
+  },
+  watch: {
+    content: {
+      immediate: true,
+      handler(newVal) {
+        this.processMarkdown(newVal);
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.$refs.observedElement) {
+        const resizeObserver = new ResizeObserver(entries => {
+          for (const entry of entries) {
+            const { height } = entry.contentRect;
+            // 只有当内容高度超过设定值才显示折叠
+            if (height > this.height) {
+              this.isShow = true;
+            } else {
+              this.isShow = false;
+              this.fold = false; // 如果内容不多，默认展开且不显示折叠按钮
+            }
+          }
+        });
+        resizeObserver.observe(this.$refs.observedElement);
+      }
+    });
+  },
+  methods: {
+    processMarkdown(text) {
+      if (!text) {
+        this.renderedContent = '';
+        this.thinkProcess = '';
+        return;
+      }
+
+      const md = new MarkdownIt({
+        html: true,
+        linkify: true,
+        typographer: true,
+        breaks: true,
+        highlight: (str, lang) => {
+          if (lang && hljs.getLanguage(lang)) {
+            try {
+              return '<pre class="hljs"><code>' + hljs.highlight(str, { language: lang, ignoreIllegals: true }).value + '</code></pre>';
+            } catch (__) {}
+          }
+          return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
+        }
+      })
+        .use(sub).use(sup).use(footnote).use(taskLists)
+        .use(container, 'warning').use(abbr).use(ins).use(mark);
+
+      try {
+        const parts = text.split('</think>');
+        if (parts.length > 1) {
+          this.thinkProcess = md.render(parts[0]);
+        } else {
+          this.thinkProcess = '';
+        }
+        this.renderedContent = md.render(parts[parts.length - 1]);
+      } catch (err) {
+        console.error('Markdown parsing failed:', err);
+        this.renderedContent = text; // 降级处理
+      }
+    },
+    options(type) {
+      this.fold = type;
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.show-information {
+  width: 100%;
+  background: #ffffff; /* 保持背景色 */
+  box-sizing: border-box;
+  border-radius: 0 6px 6px 6px;
+
+  .info-content {
+    width: 100%;
+    padding: 8px 0;
+
+    /* 关键：深度选择器穿透 scoped，应用 markdown 样式 */
+    ::v-deep .markdown-body {
+      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
+      font-size: 16px;
+      line-height: 1.8;
+      color: #343f64;
+      word-wrap: break-word;
+
+      h1, h2, h3, h4, h5, h6 {
+        margin-top: 24px;
+        margin-bottom: 16px;
+        font-weight: 600;
+        line-height: 1.25;
+        color: #24292e;
+      }
+      h3 { font-size: 1.25em; }
+
+      p { margin-top: 0; margin-bottom: 16px; }
+
+      ul, ol {
+        padding-left: 2em;
+        margin-top: 0;
+        margin-bottom: 16px;
+      }
+
+      li { margin-bottom: 4px; }
+
+      strong { font-weight: 600; color: #24292e; }
+
+      code {
+        padding: 0.2em 0.4em;
+        margin: 0;
+        font-size: 85%;
+        background-color: rgba(27,31,35,0.05);
+        border-radius: 3px;
+        font-family: Consolas, Monaco, "Andale Mono", monospace;
+        color: #24292e;
+      }
+
+      pre {
+        background-color: #f6f8fa;
+        padding: 16px;
+        overflow: auto;
+        border-radius: 6px;
+        margin-bottom: 16px;
+        code {
+          background-color: transparent;
+          padding: 0;
+          font-size: 100%;
+          color: #24292e;
+        }
+      }
+
+      blockquote {
+        padding: 0 1em;
+        color: #6a737d;
+        border-left: 0.25em solid #dfe2e5;
+        margin: 0 0 16px 0;
+      }
+
+      table {
+        border-spacing: 0;
+        border-collapse: collapse;
+        display: block;
+        width: max-content;
+        max-width: 100%;
+        overflow: auto;
+        margin-bottom: 16px;
+        th, td {
+          padding: 6px 13px;
+          border: 1px solid #dfe2e5;
+        }
+        tr {
+          background-color: #fff;
+          border-top: 1px solid #c6cbd1;
+          &:nth-child(2n) { background-color: #f6f8fa; }
+        }
+      }
+
+      /* 针对折叠区域的特殊样式 */
+      &.think-process {
+        background: #fff;
+        border-left: 3px solid #409EFF;
+        padding: 8px 12px;
+        margin-bottom: 16px;
+        color: #606266;
+        font-size: 14px;
+        border-radius: 0 4px 4px 0;
+      }
+    }
+  }
+
+  /* 折叠控制逻辑相关的样式 (如果需要保留折叠功能) */
+  .content-fold-wrapper {
+    position: relative;
+    overflow: hidden;
+    transition: height 0.3s;
+  }
+
+  // 这里可以添加折叠蒙层和按钮的样式，参考您原有的 .flog
+}
+</style>

package/packages/largeModel/index.js

@@ -0,0 +1,2 @@
+import largeModel from "./index.vue";
+export default largeModel;