ui-process-h5 0.1.14 → 0.1.20

package/README.md

@@ -1,25 +1,18 @@
-# ui-process-h5
+# Vue 3 + TypeScript + Vite
 
-## Project setup
-```
-yarn install
-```
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
+## Recommended IDE Setup
 
-### Compiles and minifies for production
-```
-yarn build
-```
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+## Type Support For `.vue` Imports in TS
 
-### packages
-组件列表
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
 
-### examples
-组件示例
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

package/lib/design.js

@@ -0,0 +1,163 @@
+import { defineComponent as L, ref as p, watch as b, onMounted as $, openBlock as f, createElementBlock as r, createElementVNode as k, Fragment as _, renderList as m, normalizeClass as T, toDisplayString as g, createCommentVNode as d, withDirectives as W, renderSlot as y, vShow as C } from "vue";
+const A = L({
+  name: "TopTab",
+  props: {
+    /**
+     * 根据参数插入自定义tab
+     * label:选项卡title
+     * key:选项卡ID 请勿重复defaultTabList内已拥有的默认key
+     * type:插槽类型 "slot" "default"
+     * sort:排序参数,无参数默认插入末尾
+     * slot:插槽name
+     */
+    tapList: {
+      type: Array,
+      default: () => []
+    },
+    // 自定义tab (传入后  默认tab,tapList,失效)
+    selfTapList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(e) {
+    const u = p(""), i = p([
+      {
+        label: "基本信息",
+        key: "a",
+        type: "default",
+        slot: "default"
+      },
+      {
+        label: "流程图",
+        key: "b",
+        type: "default",
+        slot: "tab2"
+      },
+      {
+        label: "审批记录",
+        key: "c",
+        type: "default",
+        slot: "tab3"
+      }
+    ]), o = p([
+      {
+        label: "基本信息",
+        key: "a",
+        type: "default",
+        slot: "default"
+      },
+      {
+        label: "流程图",
+        key: "b",
+        type: "default",
+        slot: "tab2"
+      },
+      {
+        label: "审批记录",
+        key: "c",
+        type: "default",
+        slot: "tab3"
+      }
+    ]), s = p(), h = (t, n) => {
+      t !== u.value && (u.value = t, a(n));
+    }, a = (t) => {
+      if (s.value.length) {
+        let n = document.getElementsByClassName("bottom-line")[0], l;
+        if (n.offsetWidth < s.value[t].offsetWidth - 10) {
+          let c = (s.value[t].offsetWidth - n.offsetWidth - 10) / 2;
+          l = `${s.value[t].offsetLeft + c}px`;
+        } else if (n.offsetWidth > s.value[t].offsetWidth - 10) {
+          let c = (n.offsetWidth - s.value[t].offsetWidth + 10) / 2;
+          l = `${s.value[t].offsetLeft - c}px`;
+        } else
+          l = `${s.value[t].offsetLeft}px`;
+        n.style.transition = ".3s", n.style.transform = `translateX(${l})`;
+      }
+    };
+    return b(
+      () => e.selfTapList,
+      (t, n) => {
+        t.length && (o.value = [].concat(t), u.value = o.value[0].key);
+      },
+      {
+        //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
+        //那么首次执行，val为默认值,preVal为undefined
+        immediate: !0,
+        //这个参数代表监听对象时，可以监听深度嵌套的对象属性
+        deep: !0
+      }
+    ), b(
+      () => e.tapList,
+      (t, n) => {
+        e.selfTapList.length || (o.value = [].concat(i.value), t.length > 0 && t.forEach((l, c) => {
+          l.sort && l.sort > 1 ? o.value.splice(l.sort - 1, 0, l) : l.sort == 1 ? o.value.unshift(l) : o.value.push(l);
+        }), u.value = o.value[0].key);
+      },
+      {
+        //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
+        //那么首次执行，val为默认值,preVal为undefined
+        immediate: !0,
+        //这个参数代表监听对象时，可以监听深度嵌套的对象属性
+        deep: !0
+      }
+    ), $(() => {
+      a(0);
+    }), {
+      isTapList: o,
+      active: u,
+      handleActive: h,
+      label: s
+    };
+  }
+});
+const E = (e, u) => {
+  const i = e.__vccOpts || e;
+  for (const [o, s] of u)
+    i[o] = s;
+  return i;
+}, V = { class: "tops-tab" }, w = { class: "tops-tab-header" }, B = ["onClick"], N = {
+  key: 0,
+  class: "bottom-line"
+}, S = { class: "tops-tab-body" };
+function D(e, u, i, o, s, h) {
+  return f(), r("div", V, [
+    k("div", w, [
+      (f(!0), r(_, null, m(e.isTapList, (a, t) => (f(), r("div", {
+        class: T(["tops-tab-header-items", [a.key === e.active ? "active" : ""]]),
+        onClick: (n) => e.handleActive(a.key, t),
+        ref_for: !0,
+        ref: "label"
+      }, g(a.label), 11, B))), 256)),
+      e.isTapList.length ? (f(), r("div", N)) : d("", !0)
+    ]),
+    k("div", S, [
+      (f(!0), r(_, null, m(e.isTapList, (a) => W((f(), r("div", {
+        key: a.key,
+        style: { height: "100%" }
+      }, [
+        a.key === "a" && a.type === "default" ? y(e.$slots, "default", { key: 0 }, void 0, !0) : d("", !0),
+        a.key === "tab2" && a.type === "default" ? y(e.$slots, "default", { key: 1 }, void 0, !0) : d("", !0),
+        a.key === "tab3" && a.type === "default" ? y(e.$slots, "default", { key: 2 }, void 0, !0) : d("", !0),
+        a.type == "slot" ? y(e.$slots, a.slot, { key: 3 }, void 0, !0) : d("", !0)
+      ])), [
+        [C, e.active === a.key]
+      ])), 128))
+    ])
+  ]);
+}
+const v = /* @__PURE__ */ E(A, [["render", D], ["__scopeId", "data-v-a3457e59"]]);
+v.install = function(e) {
+  return e.component(v.name, v), e;
+};
+const z = [v], F = function(e) {
+  z.forEach((u) => {
+    e.use(u);
+  });
+}, M = {
+  install: F
+};
+export {
+  v as TopTab,
+  M as default
+};

package/lib/design.umd.cjs

@@ -0,0 +1 @@
+(function(d,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis<"u"?globalThis:d||self,e(d.Design={},d.Vue))})(this,function(d,e){"use strict";const y=e.defineComponent({name:"TopTab",props:{tapList:{type:Array,default:()=>[]},selfTapList:{type:Array,default:()=>[]}},setup(t){const i=e.ref(""),c=e.ref([{label:"基本信息",key:"a",type:"default",slot:"default"},{label:"流程图",key:"b",type:"default",slot:"tab2"},{label:"审批记录",key:"c",type:"default",slot:"tab3"}]),n=e.ref([{label:"基本信息",key:"a",type:"default",slot:"default"},{label:"流程图",key:"b",type:"default",slot:"tab2"},{label:"审批记录",key:"c",type:"default",slot:"tab3"}]),a=e.ref(),u=(l,r)=>{l!==i.value&&(i.value=l,o(r))},o=l=>{if(a.value.length){let r=document.getElementsByClassName("bottom-line")[0],s;if(r.offsetWidth<a.value[l].offsetWidth-10){let p=(a.value[l].offsetWidth-r.offsetWidth-10)/2;s=`${a.value[l].offsetLeft+p}px`}else if(r.offsetWidth>a.value[l].offsetWidth-10){let p=(r.offsetWidth-a.value[l].offsetWidth+10)/2;s=`${a.value[l].offsetLeft-p}px`}else s=`${a.value[l].offsetLeft}px`;r.style.transition=".3s",r.style.transform=`translateX(${s})`}};return e.watch(()=>t.selfTapList,(l,r)=>{l.length&&(n.value=[].concat(l),i.value=n.value[0].key)},{immediate:!0,deep:!0}),e.watch(()=>t.tapList,(l,r)=>{t.selfTapList.length||(n.value=[].concat(c.value),l.length>0&&l.forEach((s,p)=>{s.sort&&s.sort>1?n.value.splice(s.sort-1,0,s):s.sort==1?n.value.unshift(s):n.value.push(s)}),i.value=n.value[0].key)},{immediate:!0,deep:!0}),e.onMounted(()=>{o(0)}),{isTapList:n,active:i,handleActive:u,label:a}}}),$="",h=(t,i)=>{const c=t.__vccOpts||t;for(const[n,a]of i)c[n]=a;return c},k={class:"tops-tab"},m={class:"tops-tab-header"},b=["onClick"],_={key:0,class:"bottom-line"},T={class:"tops-tab-body"};function L(t,i,c,n,a,u){return e.openBlock(),e.createElementBlock("div",k,[e.createElementVNode("div",m,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.isTapList,(o,l)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["tops-tab-header-items",[o.key===t.active?"active":""]]),onClick:r=>t.handleActive(o.key,l),ref_for:!0,ref:"label"},e.toDisplayString(o.label),11,b))),256)),t.isTapList.length?(e.openBlock(),e.createElementBlock("div",_)):e.createCommentVNode("",!0)]),e.createElementVNode("div",T,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.isTapList,o=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:o.key,style:{height:"100%"}},[o.key==="a"&&o.type==="default"?e.renderSlot(t.$slots,"default",{key:0},void 0,!0):e.createCommentVNode("",!0),o.key==="tab2"&&o.type==="default"?e.renderSlot(t.$slots,"default",{key:1},void 0,!0):e.createCommentVNode("",!0),o.key==="tab3"&&o.type==="default"?e.renderSlot(t.$slots,"default",{key:2},void 0,!0):e.createCommentVNode("",!0),o.type=="slot"?e.renderSlot(t.$slots,o.slot,{key:3},void 0,!0):e.createCommentVNode("",!0)])),[[e.vShow,t.active===o.key]])),128))])])}const f=h(y,[["render",L],["__scopeId","data-v-a3457e59"]]);f.install=function(t){return t.component(f.name,f),t};const g=[f],B={install:function(t){g.forEach(i=>{t.use(i)})}};d.TopTab=f,d.default=B,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/resolveVue.d.ts

@@ -0,0 +1,5 @@
+declare module "*.vue" {
+    import { DefineComponent } from "vue"
+    const component: DefineComponent<{}, {}, any>
+    export default component
+}

package/lib/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/lib/style.css

@@ -0,0 +1 @@
+.tops-tab[data-v-a3457e59]{height:100%}.tops-tab-header[data-v-a3457e59]{display:flex;width:100%;height:45px;justify-content:space-between;font-size:14px;color:#333;padding:0 10px;font-weight:500;box-sizing:border-box;overflow-x:auto;white-space:nowrap;flex-wrap:nowrap;flex-shrink:0;-ms-overflow-style:none;position:relative}.tops-tab-header[data-v-a3457e59]:after{content:"";position:absolute;width:100%;height:1px;background-color:#f2f2f2;left:0;bottom:0}.tops-tab-header[data-v-a3457e59]::-webkit-scrollbar{display:none}.tops-tab-header-items[data-v-a3457e59]{white-space:nowrap;padding-right:10px;box-sizing:border-box;display:inline-block;height:100%;text-align:center;margin-right:32px;font-weight:400;font-size:15px;text-align:left;color:#333;display:flex;align-items:center}.tops-tab-header-items[data-v-a3457e59] :last-child{padding-right:0;margin-right:0}.tops-tab-header-items[data-v-a3457e59] :last-child:after{left:calc(50% - 17px)}.tops-tab-header .active[data-v-a3457e59]{position:relative;color:#1389ff;font-family:PingFang SC Bold;font-weight:700;font-size:15px;text-align:left}.tops-tab-header .bottom-line[data-v-a3457e59]{width:30px;height:3px;border-radius:1.5px;background-color:#1389ff;position:absolute;bottom:0;left:0}.tops-tab-body[data-v-a3457e59]{height:100%;padding:0 10px}

package/lib/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,37 +1,68 @@
 {
   "name": "ui-process-h5",
-  "version": "0.1.14",
   "private": false,
   "description": "流程组件",
-  "main": "lib/index.min.js",
-  "module": "lib/index.esm.js",
-  "typings": "lib/index.d.ts",
-  "keyword": "vue3",
+  "version": "0.1.20",
+  "type": "module",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "yarn build:clean && yarn build:lib && yarn build:esm-bundle && rimraf lib/demo.html",
-    "build:clean": "rimraf lib",
-    "build:lib": "vue-cli-service build --target lib --name index --dest lib packages/index.ts",
-    "build:esm-bundle": "rollup --config ./build/rollup.config.js"
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "files": [
+    "lib/*",
+    "packages/*",
+    "Readme.md",
+    "package.json"
+  ],
+  "publicConfig": {
+    "registry": "http://registry.npmjs.org/"
+  },
+  "main": "./lib/design.umd.js",
+  "module": "./lib/design.mjs",
+  "exports": {
+    ".": {
+      "import": "./lib/design.mjs",
+      "require": "./lib/design.umd.js"
+    },
+    "./lib/style.css": "./lib/style.css"
   },
   "dependencies": {
-    "axios": "^1.3.5",
-    "bpmn-moddle": "^8.0.1",
-    "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "sass": "^1.62.0",
+    "vue": "^3.2.47",
+    "dayjs": "^1.11.7"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "sass": "^1.32.7",
-    "sass-loader": "^12.0.0",
-    "typescript": "~4.5.5",
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "@vue/compiler-sfc": "^3.0.0",
-    "rollup": "^2.58.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "rollup-plugin-vue": "^6.0.0"
+    "@types/node": "^18.15.12",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0",
+    "vue-tsc": "^1.2.0",
+    "@commitlint/cli": "^17.0.0",
+    "@commitlint/config-conventional": "^17.0.0",
+    "@types/sass": "^1.43.1",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "@vitejs/plugin-vue-jsx": "^2.0.0",
+    "chalk": "^4.1.2",
+    "commitizen": "^4.2.4",
+    "cross-env": "^7.0.3",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^8.17.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-define-config": "^1.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^9.1.0",
+    "husky": "^8.0.1",
+    "prettier": "^2.6.2",
+    "rimraf": "^3.0.2",
+    "sass": "^1.49.7",
+    "standard-version": "^9.5.0",
+    "vite-plugin-dts": "^1.2.0",
+    "vite-plugin-md": "^0.15.0",
+    "vue": "^3.2.47"
+  },
+  "engines": {
+    "node": ">=16.0.0"
   }
-}
+}

package/packages/component.ts

@@ -0,0 +1,5 @@
+import TopTab from "./components/tab";
+
+export default [TopTab];
+export { TopTab };
+ 

package/packages/components/tab/index.ts

@@ -0,0 +1,9 @@
+import { App } from "vue";
+import TopTab from "./src/index.vue";
+
+TopTab.install = function (app: App) {
+    // 组件注册，按需引入
+    app.component(TopTab.name, TopTab);
+    return app;
+};
+export default TopTab;

package/packages/components/tab/src/index.vue

@@ -0,0 +1,296 @@
+<template>
+    <div class="tops-tab">
+        <div class="tops-tab-header">
+            <template v-for="(item, i) of isTapList">
+                <div
+                    class="tops-tab-header-items"
+                    :class="[item.key === active ? 'active' : '']"
+                    @click="handleActive(item.key, i)"
+                    ref="label"
+                >
+                    {{ item.label }}
+                </div>
+            </template>
+            <div class="bottom-line" v-if="isTapList.length"></div>
+        </div>
+        <div class="tops-tab-body">
+            <div
+                v-for="item in isTapList"
+                :key="item.key"
+                v-show="active === item.key"
+                style="height: 100%;"
+            >
+                <!--  :taskNode="getTaskNode()" -->
+                <slot
+                    v-if="item.key === 'a' && item.type === 'default'"
+                    name="default"
+                ></slot>
+                <slot
+                    v-if="item.key === 'tab2' && item.type === 'default'"
+                    name="default"
+                ></slot>
+                <slot
+                    v-if="item.key === 'tab3' && item.type === 'default'"
+                    name="default"
+                ></slot>
+                <slot v-if="item.type == 'slot'" :name="item.slot"></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch, onMounted } from "vue";
+export default defineComponent({
+    name: "TopTab",
+    props: {
+        /**
+         * 根据参数插入自定义tab
+         * label:选项卡title
+         * key:选项卡ID 请勿重复defaultTabList内已拥有的默认key
+         * type:插槽类型 "slot" "default"
+         * sort:排序参数,无参数默认插入末尾
+         * slot:插槽name
+         */
+        tapList: {
+            type: Array,
+            default: () => [],
+        },
+        // 自定义tab (传入后  默认tab,tapList,失效)
+        selfTapList: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    setup(props: any) {
+        // 选中
+        const active = ref<string>("");
+
+        // tab 渲染
+        const defaultTabList = ref<any>([
+            {
+                label: "基本信息",
+                key: "a",
+                type: "default",
+                slot: "default",
+            },
+            {
+                label: "流程图",
+                key: "b",
+                type: "default",
+                slot: "tab2",
+            },
+            {
+                label: "审批记录",
+                key: "c",
+                type: "default",
+                slot: "tab3",
+            },
+        ]);
+
+        const isTapList = ref<any>([
+            {
+                label: "基本信息",
+                key: "a",
+                type: "default",
+                slot: "default",
+            },
+            {
+                label: "流程图",
+                key: "b",
+                type: "default",
+                slot: "tab2",
+            },
+            {
+                label: "审批记录",
+                key: "c",
+                type: "default",
+                slot: "tab3",
+            },
+        ]);
+
+        const label = ref<any>();
+
+        // taskNode taskObj
+
+        // 选中方法
+        const handleActive = (e: string, i: number) => {
+            if (e === active.value) {
+                return;
+            }
+
+            active.value = e;
+            tabAnimation(i);
+        };
+
+        const tabAnimation = (i: number) => {
+            if (label.value.length) {
+                let doc = <any>(
+                    document.getElementsByClassName("bottom-line")[0]
+                );
+                let left;
+                if (doc.offsetWidth < label.value[i].offsetWidth - 10) {
+                    let num =
+                        (label.value[i].offsetWidth - doc.offsetWidth - 10) / 2;
+                    left = `${label.value[i].offsetLeft + num}px`;
+                } else if (doc.offsetWidth > label.value[i].offsetWidth - 10) {
+                    let num =
+                        (doc.offsetWidth - label.value[i].offsetWidth + 10) / 2;
+                    left = `${label.value[i].offsetLeft - num}px`;
+                } else {
+                    left = `${label.value[i].offsetLeft}px`;
+                }
+                doc.style.transition = ".3s";
+                doc.style.transform = `translateX(${left})`;
+            }
+        };
+
+        /*  const getTaskNode = () => {
+            return taskNode.value.filter((o) => {
+                return o.nodeId == taskObj.value.id;
+            });
+        }; */
+        watch(
+            () => props.selfTapList,
+            (val, preVal) => {
+                if (val.length) {
+                    isTapList.value = [].concat(val);
+                    active.value = isTapList.value[0].key;
+                }
+            },
+            {
+                //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
+                //那么首次执行，val为默认值,preVal为undefined
+                immediate: true,
+                //这个参数代表监听对象时，可以监听深度嵌套的对象属性
+                deep: true,
+            }
+        );
+
+        watch(
+            () => props.tapList,
+            (val, preVal) => {
+                if (!props.selfTapList.length) {
+                    isTapList.value = [].concat(defaultTabList.value);
+                    if (val.length > 0) {
+                        /* return [] */
+                        val.forEach((v: any, i: number) => {
+                            if (v.sort && v.sort > 1) {
+                                isTapList.value.splice(v.sort - 1, 0, v);
+                            } else if (v.sort == 1) {
+                                isTapList.value.unshift(v);
+                            } else {
+                                isTapList.value.push(v);
+                            }
+                        });
+                    }
+                    active.value = isTapList.value[0].key;
+                }
+            },
+            {
+                //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
+                //那么首次执行，val为默认值,preVal为undefined
+                immediate: true,
+                //这个参数代表监听对象时，可以监听深度嵌套的对象属性
+                deep: true,
+            }
+        );
+
+        onMounted(() => {
+            // 渲染后初始化为第一个位置
+            tabAnimation(0);
+        });
+
+        return {
+            isTapList,
+            active,
+            handleActive,
+            label,
+        };
+    },
+});
+</script>
+
+<style scoped>
+.tops-tab {
+    height: 100%;
+}
+.tops-tab-header {
+    display: flex;
+    width: 100%;
+    height: 45px;
+    justify-content: space-between;
+    font-size: 14px;
+    color: #333;
+    padding: 0 10px;
+    font-weight: 500;
+    box-sizing: border-box;
+    overflow-x: auto;
+    white-space: nowrap;
+    flex-wrap: nowrap;
+    flex-shrink: 0;
+    -ms-overflow-style: none;
+    position: relative;
+}
+
+.tops-tab-header::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background-color: #f2f2f2;
+    left: 0;
+    bottom: 0;
+}
+
+.tops-tab-header::-webkit-scrollbar {
+    display: none;
+}
+
+.tops-tab-header-items {
+    white-space: nowrap;
+    padding-right: 10px;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 100%;
+    text-align: center;
+    margin-right: 32px;
+    font-weight: 400;
+    font-size: 15px;
+    text-align: left;
+    color: #333;
+    display: flex;
+    align-items: center;
+}
+
+.tops-tab-header-items :last-child {
+    padding-right: 0;
+    margin-right: 0;
+}
+.tops-tab-header-items :last-child::after {
+    left: calc(50% - 17px);
+}
+
+.tops-tab-header .active {
+    position: relative;
+    color: #1389ff;
+    font-family: "PingFang SC Bold";
+    font-weight: 700;
+    font-size: 15px;
+    text-align: left;
+}
+
+.tops-tab-header .bottom-line {
+    width: 30px;
+    height: 3px;
+    border-radius: 1.5px;
+    background-color: #1389ff;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+.tops-tab-body {
+    height: 100%;
+    padding: 0 10px;
+}
+</style>

package/packages/components/theme/request/api.ts

@@ -0,0 +1,13 @@
+import request from "./request";
+
+const proxyStr = "/aws";
+
+function getProcessStatus(query: any) {
+    return request({
+        url: proxyStr + "/pis/getProcessStatus",
+        method: "get",
+        params: query,
+    });
+}
+
+export default { getProcessStatus };