321

.storybook/mxmTheme.js

@@ -26,19 +26,17 @@ import { create } from "@storybook/theming";
 // brandImage?: string;
 // gridCellSize?: number;
 export default create({
-  base: "light",
-  brandTitle: "MxM Web Components",
+  base: "dark",
+  brandTitle: "MxM UI Builder",
   brandUrl: "http://www.baidu.com",
   brandImage:"https://cdn.jsdelivr.net/gh/mxm-web-develop/mxm_materials@main/mxm_logo_black.png",
-
   //   colorPrimary: 'hotpink',
   //   colorSecondary: 'deepskyblue',
-
   //   // UI
-  appBg: "#F2F7F2",
-  appContentBg: "#FFFFFF",
-  appBorderColor: "#090C08",
-  appBorderRadius: 5,
+  // appBg: "#F2F7F2",
+  // appContentBg: "#FFFFFF",
+  // appBorderColor: "#090C08",
+  // appBorderRadius: 5,
 
   //   // Typography
   //   fontBase: '"Open Sans", sans-serif',

builder/components.rollup.config.js

+import postcss from "rollup-plugin-postcss";
+import { terser } from "rollup-plugin-terser";
+import postcssImport from "postcss-import";
+import tailwindcss from "tailwindcss";
+import image from '@rollup/plugin-image';
+import generatePackageJson from "rollup-plugin-generate-package-json";
+import { resolve } from "path";
+function createEntry(options) {
+  const config = {
+    input: ["./src/components/index.ts"],
+    external: ["vue"],
+    output: {
+      file: resolve(__dirname, options.file+'components'),
+      format: options.format,
+      globals: {
+        vue: "Vue",
+      },
+    },
+    plugins: [
+      nodeResolve(),
+      typescript({
+        tsconfigOverride: {
+          compilerOptions: {
+            declaration: options.format === "es",
+          },
+          // include: ["src/components/**/*.vue"],
+          exclude: ["node_modules", "src/stories", "src/pages", "src/main.ts"],
+        },
+      }),
+
+      image(),
+      vue(),
+      postcss({
+          config:{
+            path:'./postcss.config.js'
+          },
+          extensions: [".css"],
+          extract: resolve("mxmui/style.css"),
+          plugins: [postcssImport(), tailwindcss('./tailwind.config.js')],
+      }),
+      generatePackageJson({
+        outputFolder: "mxmui",
+        baseContents: (pkg) => ({
+          name: pkg.name + "-lib",
+          version: pkg.version,
+          license: pkg.license,
+          // module: "index.esm.js",
+          main: "index.js",
+          // umd: "index.js",
+          typings: "src/pages/index.d.ts",
+          author: "mxm",
+        }),
+      }),
+      //terser(),
+    ],
+  };
+  return config;
+}
+
+export default [
+  createEntry({ file: pkg.module, format: "es"}),
+  // createEntry({ file: pkg.umd, format: "umd", name: pkg.name }),
+];

rollup.config.js → builder/pages.rollup.config.js

@@ -28,15 +28,19 @@ function createEntry(options) {
             declaration: options.format === "es",
           },
           // include: ["src/components/**/*.vue"],
-          exclude: ["node_modules", "src/stories", "src/pages", "src/main.ts"],
+          exclude: ["node_modules", "src/stories","src/components","src/main.ts"],
         },
       }),
+
       image(),
       vue(),
       postcss({
-        extensions: [".css"],
-        extract: resolve("mxmui/style.css"),
-        plugins: [postcssImport(), tailwindcss()],
+          config:{
+            path:'./postcss.config.js'
+          },
+          extensions: [".css"],
+          extract: resolve("mxmui/style.css"),
+          plugins: [postcssImport(), tailwindcss('./tailwind.config.js')],
       }),
       generatePackageJson({
         outputFolder: "mxmui",
@@ -51,7 +55,7 @@ function createEntry(options) {
           author: "mxm",
         }),
       }),
-      terser(),
+      //terser(),
     ],
   };
   return config;

index.esm.js

-import {
-  defineComponent,
-  openBlock,
-  createElementBlock,
-  createElementVNode,
-  toDisplayString,
-  computed,
-  normalizeClass,
-  unref,
-  normalizeStyle,
-} from "vue";
-
-const _hoisted_1 = { class: "w-40 h-32 bg-blue-300" };
-const _hoisted_2 = { class: "divide-y-0 py-5" };
-var script$1 = defineComponent({
-  props: {
-    header: { type: String, required: true, default: "card header" },
-    content: { type: String, required: false },
-  },
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return (
-        openBlock(),
-        createElementBlock("div", _hoisted_1, [
-          createElementVNode(
-            "div",
-            _hoisted_2,
-            toDisplayString(__props.header),
-            1
-          ),
-          createElementVNode(
-            "div",
-            null,
-            toDisplayString(__props.content ? __props.content : "没有内容"),
-            1
-          ),
-        ])
-      );
-    };
-  },
-});
-
-script$1.__file = "src/components/src/MxmCard/index.vue";
-
-script$1.install = (app) => {
-  app.component(script$1.name, script$1);
-};
-
-var script = defineComponent({
-  props: {
-    label: { type: String, required: true },
-    primary: { type: Boolean, required: false, default: false },
-    backgroundColor: { type: String, required: false },
-    size: { type: String, required: true },
-  },
-  emits: ["click"],
-  setup(__props, { emit }) {
-    const props = __props;
-    const onClick = () => {
-      emit("click");
-    };
-    const classes = computed(() => ({
-      "storybook-button": true,
-      "storybook-button--primary": props.primary,
-      "storybook-button--secondary": !props.primary,
-      [`storybook-button--${props.size || "medium"}`]: true,
-    }));
-    const style = computed(() => ({
-      backgroundColor: props.backgroundColor,
-    }));
-    return (_ctx, _cache) => {
-      return (
-        openBlock(),
-        createElementBlock(
-          "button",
-          {
-            type: "button",
-            class: normalizeClass(unref(classes)),
-            onClick: onClick,
-            style: normalizeStyle(unref(style)),
-          },
-          toDisplayString(__props.label),
-          7
-        )
-      );
-    };
-  },
-});
-
-script.__scopeId = "data-v-53984b98";
-script.__file = "src/components/src/BasicButton/index.vue";
-
-script.install = (app) => {
-  app.component(script.name, script);
-};
-
-const components = [script$1, script];
-const install = (app) => {
-  components.map((component) => app.component(component.name, component));
-};
-
-export { script as BasicButton, script$1 as MxmCard, install as default };

index.html

-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

index.umd.js

-(function (global, factory) {
-  typeof exports === "object" && typeof module !== "undefined"
-    ? factory(exports, require("vue"))
-    : typeof define === "function" && define.amd
-    ? define(["exports", "vue"], factory)
-    : ((global =
-        typeof globalThis !== "undefined" ? globalThis : global || self),
-      factory((global.mxmui = {}), global.Vue));
-})(this, function (exports, vue) {
-  "use strict";
-
-  const _hoisted_1 = { class: "w-40 h-32 bg-blue-300" };
-  const _hoisted_2 = { class: "divide-y-0 py-5" };
-  var script$1 = vue.defineComponent({
-    props: {
-      header: { type: String, required: true, default: "card header" },
-      content: { type: String, required: false },
-    },
-    setup(__props) {
-      return (_ctx, _cache) => {
-        return (
-          vue.openBlock(),
-          vue.createElementBlock("div", _hoisted_1, [
-            vue.createElementVNode(
-              "div",
-              _hoisted_2,
-              vue.toDisplayString(__props.header),
-              1
-            ),
-            vue.createElementVNode(
-              "div",
-              null,
-              vue.toDisplayString(
-                __props.content ? __props.content : "没有内容"
-              ),
-              1
-            ),
-          ])
-        );
-      };
-    },
-  });
-
-  script$1.__file = "src/components/src/MxmCard/index.vue";
-
-  script$1.install = (app) => {
-    app.component(script$1.name, script$1);
-  };
-
-  var script = vue.defineComponent({
-    props: {
-      label: { type: String, required: true },
-      primary: { type: Boolean, required: false, default: false },
-      backgroundColor: { type: String, required: false },
-      size: { type: String, required: true },
-    },
-    emits: ["click"],
-    setup(__props, { emit }) {
-      const props = __props;
-      const onClick = () => {
-        emit("click");
-      };
-      const classes = vue.computed(() => ({
-        "storybook-button": true,
-        "storybook-button--primary": props.primary,
-        "storybook-button--secondary": !props.primary,
-        [`storybook-button--${props.size || "medium"}`]: true,
-      }));
-      const style = vue.computed(() => ({
-        backgroundColor: props.backgroundColor,
-      }));
-      return (_ctx, _cache) => {
-        return (
-          vue.openBlock(),
-          vue.createElementBlock(
-            "button",
-            {
-              type: "button",
-              class: vue.normalizeClass(vue.unref(classes)),
-              onClick: onClick,
-              style: vue.normalizeStyle(vue.unref(style)),
-            },
-            vue.toDisplayString(__props.label),
-            7
-          )
-        );
-      };
-    },
-  });
-
-  script.__scopeId = "data-v-53984b98";
-  script.__file = "src/components/src/BasicButton/index.vue";
-
-  script.install = (app) => {
-    app.component(script.name, script);
-  };
-
-  const components = [script$1, script];
-  const install = (app) => {
-    components.map((component) => app.component(component.name, component));
-  };
-
-  exports.BasicButton = script;
-  exports.MxmCard = script$1;
-  exports["default"] = install;
-
-  Object.defineProperty(exports, "__esModule", { value: true });
-});

mxmui/package.json

-{
-  "name": "mxmui-lib",
-  "version": "1.0.3",
-  "license": "MIT",
-  "main": "index.js",
-  "typings": "src/pages/index.d.ts",
-  "author": "mxm",
-  "dependencies": {
-    "vue": "^3.2.16"
-  }
-}

mxmui/src/components/@types/Size.d.ts

-export declare type Size = "small" | "medium" | "large";

mxmui/src/components/index.d.ts

-import MxmCard from "./src/MxmCard";
-import BasicButton from "./src/BasicButton";
-import { App } from "vue";
-declare const install: (app: App) => void;
-export { MxmCard, BasicButton };
-export default install;

mxmui/src/components/src/BasicButton/index.d.ts

-import BasicButton from "./index.vue";
-export default BasicButton;

mxmui/src/components/src/MxmCard/index.d.ts

-import MxmCard from "./index.vue";
-export default MxmCard;

mxmui/src/components/src/SideBar/index.d.ts

-import SideBar from "./index.vue";
-export default SideBar;

mxmui/src/pages/SourceTraceManageHomePage/components/ApplicableIndustries.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    industryRight: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    industryLeft: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    nextIndustry: {
-        type: FunctionConstructor;
-        required: true;
-    };
-    industryStyle: {
-        type: ObjectConstructor;
-        required: true;
-    };
-    industrys: {
-        type: ArrayConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    industryRight?: unknown;
-    industryLeft?: unknown;
-    nextIndustry?: unknown;
-    industryStyle?: unknown;
-    industrys?: unknown;
-} & {
-    industryRight: Record<string, any>;
-    industryLeft: Record<string, any>;
-    nextIndustry: Function;
-    industryStyle: Record<string, any>;
-    industrys: unknown[];
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/components/EntIndependentDeployment.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    currentDeploy: {
-        type: NumberConstructor;
-        required: true;
-    };
-    setCurrentDeploy: {
-        type: FunctionConstructor;
-        required: true;
-    };
-    deploys: {
-        type: ArrayConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    currentDeploy?: unknown;
-    setCurrentDeploy?: unknown;
-    deploys?: unknown;
-} & {
-    currentDeploy: number;
-    setCurrentDeploy: Function;
-    deploys: unknown[];
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/components/FooterInfo.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    phone: {
-        type: StringConstructor;
-        required: true;
-    };
-    email: {
-        type: StringConstructor;
-        required: true;
-    };
-    address: {
-        type: StringConstructor;
-        required: true;
-    };
-    qrcode: {
-        type: StringConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    phone?: unknown;
-    email?: unknown;
-    address?: unknown;
-    qrcode?: unknown;
-} & {
-    phone: string;
-    email: string;
-    address: string;
-    qrcode: string;
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/components/FreeTrialLinkCheck.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    navigate: {
-        type: FunctionConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    navigate?: unknown;
-} & {
-    navigate: Function;
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/components/HeadSection.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    sectionTitle: {
-        type: StringConstructor;
-        required: true;
-    };
-    sectionDesc: {
-        type: StringConstructor;
-        required: true;
-    };
-    bannerImage: {
-        type: StringConstructor;
-        required: true;
-    };
-    advantagesCardList: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    loginlogo: {
-        type: StringConstructor;
-        required: true;
-    };
-    toLoginPanel: {
-        type: FunctionConstructor;
-        required: true;
-    };
-    hashText: {
-        type: StringConstructor;
-        required: true;
-    };
-    setHashText: {
-        type: FunctionConstructor;
-        required: true;
-    };
-    searchHash: {
-        type: FunctionConstructor;
-        required: true;
-    };
-    bannerPhoneImage: {
-        type: StringConstructor;
-        required: true;
-    };
-    featuresContent: {
-        type: ArrayConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    sectionTitle?: unknown;
-    sectionDesc?: unknown;
-    bannerImage?: unknown;
-    advantagesCardList?: unknown;
-    loginlogo?: unknown;
-    toLoginPanel?: unknown;
-    hashText?: unknown;
-    setHashText?: unknown;
-    searchHash?: unknown;
-    bannerPhoneImage?: unknown;
-    featuresContent?: unknown;
-} & {
-    sectionTitle: string;
-    sectionDesc: string;
-    bannerImage: string;
-    advantagesCardList: unknown[];
-    loginlogo: string;
-    toLoginPanel: Function;
-    hashText: string;
-    setHashText: Function;
-    searchHash: Function;
-    bannerPhoneImage: string;
-    featuresContent: unknown[];
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/components/OurAdvantage.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    ourAdvantages: {
-        type: ArrayConstructor;
-        required: true;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    ourAdvantages?: unknown;
-} & {
-    ourAdvantages: unknown[];
-} & {}>, {}>;
-export default _default;

mxmui/src/pages/SourceTraceManageHomePage/index.d.ts

-import TracePage from "./index.vue";
-export default TracePage;

mxmui/src/pages/SourceTraceManageHomePage/index.vue.d.ts

-declare const _default: import("vue").DefineComponent<{
-    iconfontLink: {
-        type: StringConstructor;
-        required: true;
-    };
-    deploys: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    industrys: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    projPartyLogo: {
-        type: StringConstructor;
-        required: true;
-    };
-    sectionTitle: {
-        type: StringConstructor;
-        required: true;
-    };
-    featuresContent: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    sectionDesc: {
-        type: StringConstructor;
-        required: true;
-    };
-    ourAdvantages: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    bannerPhoneImage: {
-        type: StringConstructor;
-        required: true;
-    };
-    advantagesCardList: {
-        type: ArrayConstructor;
-        required: true;
-    };
-    phone: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    email: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    address: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-    qrcode: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-    };
-}, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("searchHash" | "navigate")[], "searchHash" | "navigate", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    iconfontLink?: unknown;
-    deploys?: unknown;
-    industrys?: unknown;
-    projPartyLogo?: unknown;
-    sectionTitle?: unknown;
-    featuresContent?: unknown;
-    sectionDesc?: unknown;
-    ourAdvantages?: unknown;
-    bannerPhoneImage?: unknown;
-    advantagesCardList?: unknown;
-    phone?: unknown;
-    email?: unknown;
-    address?: unknown;
-    qrcode?: unknown;
-} & {
-    iconfontLink: string;
-    deploys: unknown[];
-    industrys: unknown[];
-    projPartyLogo: string;
-    sectionTitle: string;
-    featuresContent: unknown[];
-    sectionDesc: string;
-    ourAdvantages: unknown[];
-    bannerPhoneImage: string;
-    advantagesCardList: unknown[];
-    phone: string;
-    email: string;
-    address: string;
-    qrcode: string;
-} & {}> & {
-    onSearchHash?: ((...args: any[]) => any) | undefined;
-    onNavigate?: ((...args: any[]) => any) | undefined;
-}, {
-    phone: string;
-    email: string;
-    address: string;
-    qrcode: string;
-}>;
-export default _default;

mxmui/src/pages/index.d.ts

-import TracePage from "./SourceTraceManageHomePage";
-import { App } from "vue";
-declare const install: (app: App) => void;
-export { TracePage };
-export default install;

mxmui/style.css

-@media screen and (max-width: 1200px) {
-  .home-1 .home-bg .bg-phone[data-v-1cebb622] {
-    width: 1000px !important;
-    height: 372px !important;
-    left: 50px !important;
-    top: 94px !important;
-    transform: translate(0, 0) !important;
-  }
-}
-@media screen and (min-width: 1200px) {
-  .home-1 .home-bg .bg-phone[data-v-1cebb622] {
-    width: 80vw !important;
-    height: 29.73vw !important;
-    left: 10vw !important;
-    top: 94px !important;
-    transform: translate(0, 0) !important;
-  }
-}
-.home-4 .home-4-in .content .content-in .content-in-title {
-  display: block;
-  margin: 15px auto 0 auto;
-  width: 100%;
-  height: 22px;
-  font-size: 16px;
-  text-align: center;
-  font-family: PingFangSC-Medium;
-  font-weight: 500;
-  color: #353535;
-  line-height: 22px;
-}
-.home-4 .home-4-in .content .content-in .content-in-text {
-  display: block;
-  margin: 15px auto 0 auto;
-  width: 199px;
-  height: 82px;
-  font-size: 12px;
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  color: #a29dca;
-  line-height: 17px;
-}
-.home-4 .home-4-in .content .content-in .content-in-move {
-  display: block;
-  margin: 0 auto;
-  width: 29px;
-  height: 17px;
-  font-size: 13px;
-  font-family: PingFangSC-Regular;
-  font-weight: 400;
-  color: #15cbba;
-  line-height: 17px;
-}
-.home-4 .home-4-in .content .content-in:nth-child(1) {
-  margin-left: 10px;
-}
-.home-4 .home-4-in .content .content-in:nth-child(n+2) {
-  margin-left: 100px;
-}
-.footer .footer-block {
-  display: inline-block;
-  text-align: left;
-  vertical-align: bottom;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-  width: 265px;
-  height: 92px;
-  line-height: 92px;
-}
-.footer .footer-block .content-text::before {
-  position: absolute;
-  top: 3px;
-  left: -20px;
-  display: inline-block;
-  content: "";
-  width: 10px;
-  height: 10px;
-  border: 1px solid #526069;
-  border-radius: 50%;
-}
-
-html,
-input,
-button {
-  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
-}

mxmui/vite.config.d.ts

-declare const _default: import("vite").UserConfigExport;
-export default _default;

package.json

 {
-  "name": "mxmui",
+  "name": "mxmui-builder",
   "version": "1.0.3",
   "license": "MIT",
   "module": "mxmui/index.js",

postcss.config.js

 module.exports = {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
     autoprefixer: {},
   },

src/components/README.md

+## components
+这个文件夹主要用来建造样式为主的UI
\ No newline at end of file

src/pages/SourceTraceManageHomePage/index.vue

 <script setup lang="ts">
 import { onMounted, ref, computed, onBeforeMount } from "vue";
-import bannerImage from "@/assets/images/Home/banner.png";
-import qrCode from "@/assets/images/Home/qr.png";
+import bannerImage from "../../assets/images/Home/banner.png";
+import qrCode from "../../assets/images/Home/qr.png";
 
 import HeadSection from "./components/HeadSection.vue";
 import OurAdvantage from "./components/OurAdvantage.vue";
@@ -11,20 +11,20 @@ import FreeTrialLinkCheck from "./components/FreeTrialLinkCheck.vue";
 import Footer from "./components/FooterInfo.vue";
 import { iFeaturesContent } from "./@types";
 
-import p1 from "@/assets/images/Home/advantage1_szhfwcz.png";
-import p2 from "@/assets/images/Home/advantage2_qzqsjjk.png";
-import p3 from "@/assets/images/Home/advantage3_djdsycz.png";
-import p4 from "@/assets/images/Home/advantage4_zdyslmb.png";
-import p5 from "@/assets/images/Home/advantage5_dcbgxlz.png";
-import p6 from "@/assets/images/Home/advantage6_ganfhtx.png";
-import loginlogo from "@/assets/images/Home/home_logo.png";
-import bannerPhoneImage from "@/assets/images/Home/banner-phone.png";
-import advantage1 from "@/assets/images/Home/advantage1.png";
-import advantage2 from "@/assets/images/Home/advantage2.png";
-import advantage3 from "@/assets/images/Home/advantage3.png";
-import home3_baner3 from "@/assets/images/Home/home3_baner3.png";
-import home3_baner1 from "@/assets/images/Home/home3_baner1.png";
-import home3_baner2 from "@/assets/images/Home/home3_baner2.png";
+import p1 from "../../assets/images/Home/advantage1_szhfwcz.png";
+import p2 from "../../assets/images/Home/advantage2_qzqsjjk.png";
+import p3 from "../../assets/images/Home/advantage3_djdsycz.png";
+import p4 from "../../assets/images/Home/advantage4_zdyslmb.png";
+import p5 from "../../assets/images/Home/advantage5_dcbgxlz.png";
+import p6 from "../../assets/images/Home/advantage6_ganfhtx.png";
+import loginlogo from "../../assets/images/Home/home_logo.png";
+import bannerPhoneImage from "../../assets/images/Home/banner-phone.png";
+import advantage1 from "../../assets/images/Home/advantage1.png";
+import advantage2 from "../../assets/images/Home/advantage2.png";
+import advantage3 from "../../assets/images/Home/advantage3.png";
+import home3_baner3 from "../../assets/images/Home/home3_baner3.png";
+import home3_baner1 from "../../assets/images/Home/home3_baner1.png";
+import home3_baner2 from "../../assets/images/Home/home3_baner2.png";
 
 onBeforeMount(() => {
   const mustNeedLinks = ["//at.alicdn.com/t/font_1321935_cdom05madx.css"];
@@ -313,7 +313,10 @@ const searchHash = () => {
     ></Footer>
   </div>
 </template>
-<style>
+<style scpoed>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 html,
 input,
 button {
@@ -321,3 +324,5 @@ button {
     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 }
 </style>
+
+

src/pages/TestPage/index.ts

+import TestPage from "./index.vue";
+import { App } from "vue";
+
+TestPage.install = (app: App) => {
+  app.component(TestPage.name, TestPage);
+};
+
+export default TestPage;

src/pages/TestPage/index.vue

+<template>
+    <div class=" w-full bg-green-600 h-50 flex items-center justify-between">
+        <div class="left bg-blue-400">
+            <div>this is a Test Page</div>
+        </div>
+        <div>
+            <img :src="bannerPhoneImage" alt="">
+       
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import bannerPhoneImage from "../../assets/images/Home/banner-phone.png";
+</script>
+<style scpoed>
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+</style>
\ No newline at end of file

src/pages/index.ts

 import TracePage from "./SourceTraceManageHomePage";
-
+import TestPage from "./TestPage"
 import { App } from "vue";
-
-const components = [TracePage];
+import './style.css'
+const components = [TracePage,TestPage];
 
 const install = (app: App) => {
   components.map((component) => app.component(component.name, component));
 };
 
-export { TracePage};
+export { TracePage,TestPage};
 
 export default install;

src/pages/style.css

+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";

src/widgets/README.md

+## Widgets
+这个文件夹主要用来集成样式ui,以及制造较复杂功能的应用组件
\ No newline at end of file