From b1e88e852df84586600a5a0ef00a89bed55bc8b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cchenhuachun=E2=80=9D?= <“samchen08@163.com”>
Date: Thu, 13 Mar 2025 15:28:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20=E7=89=A9=E6=96=99=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E5=B7=A5=E7=A8=8B=E6=A8=A1=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 create-vtj/src/options.ts                     |  5 ++
 create-vtj/templates/material/.editorconfig   |  9 +++
 create-vtj/templates/material/.npmrc          |  4 ++
 create-vtj/templates/material/.prettierrc     | 20 ++++++
 create-vtj/templates/material/dev/App.vue     | 39 +++++++++++
 .../material/dev/components/layout.vue        | 55 +++++++++++++++
 .../templates/material/dev/designer/404.vue   |  3 +
 .../templates/material/dev/designer/auth.vue  |  6 ++
 .../templates/material/dev/designer/index.vue | 70 +++++++++++++++++++
 .../material/dev/designer/preview.vue         | 50 +++++++++++++
 create-vtj/templates/material/dev/env.d.ts    |  7 ++
 create-vtj/templates/material/dev/main.ts     | 12 ++++
 .../templates/material/dev/router/index.ts    | 36 ++++++++++
 .../templates/material/dev/router/modules.ts  | 18 +++++
 .../templates/material/dev/views/example.vue  |  4 ++
 .../templates/material/dev/views/index.vue    |  4 ++
 create-vtj/templates/material/index.html      | 18 +++++
 create-vtj/templates/material/package.json    | 44 ++++++++++++
 .../material/src/library/api/index.ts         |  1 +
 .../material/src/library/hooks/index.ts       |  1 +
 .../templates/material/src/library/index.ts   | 12 ++++
 .../material/src/library/ui/Example.vue       | 22 ++++++
 .../material/src/library/ui/index.ts          |  7 ++
 .../material/src/library/utils/index.ts       |  1 +
 .../src/material/description/Example.ts       | 15 ++++
 .../src/material/description/index.ts         |  6 ++
 .../templates/material/src/material/index.ts  | 21 ++++++
 .../templates/material/src/shared/index.ts    | 13 ++++
 create-vtj/templates/material/tsconfig.json   | 17 +++++
 .../templates/material/tsconfig.node.json     | 16 +++++
 create-vtj/templates/material/vite.config.ts  | 32 +++++++++
 .../templates/material/vite.dev.config.ts     | 15 ++++
 .../material/vite.material.config.ts          | 14 ++++
 create-vtj/templates/material/vtj.config.ts   | 27 +++++++
 pnpm-lock.yaml                                | 56 +++++++--------
 35 files changed, 652 insertions(+), 28 deletions(-)
 create mode 100644 create-vtj/templates/material/.editorconfig
 create mode 100644 create-vtj/templates/material/.npmrc
 create mode 100644 create-vtj/templates/material/.prettierrc
 create mode 100644 create-vtj/templates/material/dev/App.vue
 create mode 100644 create-vtj/templates/material/dev/components/layout.vue
 create mode 100644 create-vtj/templates/material/dev/designer/404.vue
 create mode 100644 create-vtj/templates/material/dev/designer/auth.vue
 create mode 100644 create-vtj/templates/material/dev/designer/index.vue
 create mode 100644 create-vtj/templates/material/dev/designer/preview.vue
 create mode 100644 create-vtj/templates/material/dev/env.d.ts
 create mode 100644 create-vtj/templates/material/dev/main.ts
 create mode 100644 create-vtj/templates/material/dev/router/index.ts
 create mode 100644 create-vtj/templates/material/dev/router/modules.ts
 create mode 100644 create-vtj/templates/material/dev/views/example.vue
 create mode 100644 create-vtj/templates/material/dev/views/index.vue
 create mode 100644 create-vtj/templates/material/index.html
 create mode 100644 create-vtj/templates/material/package.json
 create mode 100644 create-vtj/templates/material/src/library/api/index.ts
 create mode 100644 create-vtj/templates/material/src/library/hooks/index.ts
 create mode 100644 create-vtj/templates/material/src/library/index.ts
 create mode 100644 create-vtj/templates/material/src/library/ui/Example.vue
 create mode 100644 create-vtj/templates/material/src/library/ui/index.ts
 create mode 100644 create-vtj/templates/material/src/library/utils/index.ts
 create mode 100644 create-vtj/templates/material/src/material/description/Example.ts
 create mode 100644 create-vtj/templates/material/src/material/description/index.ts
 create mode 100644 create-vtj/templates/material/src/material/index.ts
 create mode 100644 create-vtj/templates/material/src/shared/index.ts
 create mode 100644 create-vtj/templates/material/tsconfig.json
 create mode 100644 create-vtj/templates/material/tsconfig.node.json
 create mode 100644 create-vtj/templates/material/vite.config.ts
 create mode 100644 create-vtj/templates/material/vite.dev.config.ts
 create mode 100644 create-vtj/templates/material/vite.material.config.ts
 create mode 100644 create-vtj/templates/material/vtj.config.ts

diff --git a/create-vtj/src/options.ts b/create-vtj/src/options.ts
index 6de31d316..5e24b8368 100644
--- a/create-vtj/src/options.ts
+++ b/create-vtj/src/options.ts
@@ -31,6 +31,11 @@ export const templates: ITemplate[] = [
     display: '移动端应用( uniapp )',
     color: cyan
   },
+  {
+    name: 'material',
+    display: '物料开发项目( material )',
+    color: lightRed
+  },
   // {
   //   name: 'nest',
   //   display: '服务端应用( nest )',
diff --git a/create-vtj/templates/material/.editorconfig b/create-vtj/templates/material/.editorconfig
new file mode 100644
index 000000000..074200f9f
--- /dev/null
+++ b/create-vtj/templates/material/.editorconfig
@@ -0,0 +1,9 @@
+[*.{js, jsx, ts, tsx, vue, mjs}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true
+ij_javascript_spaces_within_imports = true
+ij_html_do_not_indent_children_of_tags = html, body, thead, tbody, tfoot, script
+ij_javascript_space_before_function_left_parenth = true
+ij_javascript_use_semicolon_after_statement = true
diff --git a/create-vtj/templates/material/.npmrc b/create-vtj/templates/material/.npmrc
new file mode 100644
index 000000000..7f2d6da8c
--- /dev/null
+++ b/create-vtj/templates/material/.npmrc
@@ -0,0 +1,4 @@
+hoist = true
+hamefully-hoist = true
+node-linker = hoisted
+registry=https://registry.npmmirror.com 
\ No newline at end of file
diff --git a/create-vtj/templates/material/.prettierrc b/create-vtj/templates/material/.prettierrc
new file mode 100644
index 000000000..809e23171
--- /dev/null
+++ b/create-vtj/templates/material/.prettierrc
@@ -0,0 +1,20 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": true,
+  "jsxSingleQuote": true,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "none",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}
diff --git a/create-vtj/templates/material/dev/App.vue b/create-vtj/templates/material/dev/App.vue
new file mode 100644
index 000000000..5dce550b5
--- /dev/null
+++ b/create-vtj/templates/material/dev/App.vue
@@ -0,0 +1,39 @@
+<template>
+  <ElConfigProvider :locale="zhCn">
+    <Suspense>
+      <RouterView></RouterView>
+    </Suspense>
+  </ElConfigProvider>
+</template>
+<script setup lang="ts">
+  import { RouterView } from 'vue-router';
+  import { ElConfigProvider } from 'element-plus';
+  import zhCn from 'element-plus/es/locale/lang/zh-cn';
+</script>
+
+<style lang="scss">
+  * {
+    box-sizing: border-box;
+  }
+  html,
+  body,
+  #app {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+  }
+  #app {
+    background: var(--el-bg-color, #fff);
+    box-sizing: border-box;
+  }
+
+  #app.is-page {
+    padding: 10px;
+  }
+
+  #app.is-page.is-pure {
+    background-color: var(--el-fill-color-light, #f5f7fa);
+    padding: 0;
+  }
+</style>
diff --git a/create-vtj/templates/material/dev/components/layout.vue b/create-vtj/templates/material/dev/components/layout.vue
new file mode 100644
index 000000000..40a2b9ecf
--- /dev/null
+++ b/create-vtj/templates/material/dev/components/layout.vue
@@ -0,0 +1,55 @@
+<template>
+  <ElContainer class="layout">
+    <ElAside width="260px">
+      <ElPageHeader
+        class="header"
+        title="设计器"
+        content="组件测试"
+        @back="back"></ElPageHeader>
+
+      <RouterLink
+        class="menu-item"
+        v-for="item of routes"
+        :to="`/view/${item.path}`"
+        >{{ item.path }}</RouterLink
+      >
+    </ElAside>
+    <ElMain>
+      <RouterView></RouterView>
+    </ElMain>
+  </ElContainer>
+</template>
+<script lang="ts" setup>
+  import { RouterView, RouterLink } from 'vue-router';
+  import { ElContainer, ElMain, ElAside, ElPageHeader } from 'element-plus';
+  import { routes } from '../router/modules';
+
+  const back = () => {
+    location.href = '/';
+  };
+</script>
+
+<style lang="scss" scoped>
+  .layout {
+    height: 100%;
+  }
+  .header {
+    padding: 10px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+  }
+  .el-aside {
+    border-right: 1px solid var(--el-border-color);
+    background: var(--el-fill-color-extra-light);
+  }
+
+  .menu-item {
+    padding: 5px 10px 5px 10px;
+    text-align: right;
+    display: block;
+
+    &:hover {
+      background: var(--el-color-primary-light-8);
+    }
+  }
+</style>
diff --git a/create-vtj/templates/material/dev/designer/404.vue b/create-vtj/templates/material/dev/designer/404.vue
new file mode 100644
index 000000000..071571d22
--- /dev/null
+++ b/create-vtj/templates/material/dev/designer/404.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>404</div>
+</template>
diff --git a/create-vtj/templates/material/dev/designer/auth.vue b/create-vtj/templates/material/dev/designer/auth.vue
new file mode 100644
index 000000000..4bb3d251f
--- /dev/null
+++ b/create-vtj/templates/material/dev/designer/auth.vue
@@ -0,0 +1,6 @@
+<template>
+  <Auth></Auth>
+</template>
+<script lang="ts" setup>
+  import { Auth } from '@vtj/pro';
+</script>
diff --git a/create-vtj/templates/material/dev/designer/index.vue b/create-vtj/templates/material/dev/designer/index.vue
new file mode 100644
index 000000000..ebbb5c8e0
--- /dev/null
+++ b/create-vtj/templates/material/dev/designer/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="designer" ref="container"></div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import {
+    Engine,
+    StorageService,
+    createAdapter,
+    widgetManager,
+    depsManager,
+    type BlockFile
+  } from '@vtj/pro';
+  import { ElMessageBox } from 'element-plus';
+  import { project, name, version, library, material } from '../../vtj.config';
+
+  widgetManager.set('Previewer', {
+    props: {
+      path(file: BlockFile) {
+        return `/#/preview/${file.id}`;
+      }
+    }
+  });
+
+  widgetManager.set('Switcher', {
+    props: {
+      onClick() {
+        location.href = '/#/view';
+      }
+    }
+  });
+
+  depsManager.add({
+    package: name,
+    platform: project.platform,
+    version,
+    library,
+    urls: ['dist/style.css', 'dist/index.umd.js'],
+    assetsUrl: 'dist/material.umd.js',
+    assetsLibrary: material,
+    enabled: true
+  });
+
+  const container = ref();
+  const service = new StorageService();
+  const adapter = createAdapter({
+    access: {
+      alert: ElMessageBox.alert
+    }
+  });
+  const engine = new Engine({
+    container,
+    service,
+    adapter,
+    project,
+    materials: {
+      [material]: () => import('../../src/material/index')
+    }
+  });
+
+  engine.ready(() => {
+    console.log('ready');
+  });
+</script>
+
+<style lang="scss" scoped>
+  .designer {
+    height: 100%;
+  }
+</style>
diff --git a/create-vtj/templates/material/dev/designer/preview.vue b/create-vtj/templates/material/dev/designer/preview.vue
new file mode 100644
index 000000000..38c692e98
--- /dev/null
+++ b/create-vtj/templates/material/dev/designer/preview.vue
@@ -0,0 +1,50 @@
+<template>
+  <component v-if="renderer" :is="renderer"></component>
+</template>
+<script lang="ts" setup>
+  import { ref, getCurrentInstance } from 'vue';
+  import { useRoute } from 'vue-router';
+  import {
+    createProvider,
+    ContextMode,
+    StorageService,
+    createAdapter,
+    setupPageSetting
+  } from '@vtj/pro';
+  import { ElMessageBox } from 'element-plus';
+  import { project } from '../../vtj.config';
+
+  const route = useRoute();
+  const renderer = ref();
+  const instance = getCurrentInstance();
+  const service = new StorageService();
+  const adapter = createAdapter({
+    access: {
+      alert: ElMessageBox.alert
+    }
+  });
+
+  const { provider, onReady } = createProvider({
+    mode: ContextMode.Runtime,
+    service,
+    adapter,
+    project,
+    dependencies: {
+      Vue: () => import('vue'),
+      VueRouter: () => import('vue-router')
+    }
+  });
+
+  onReady(async () => {
+    const app = instance?.appContext.app;
+    if (app) {
+      app.use(provider);
+      renderer.value = await provider.getRenderComponent(
+        route.params.id.toString(),
+        (file) => {
+          setupPageSetting(app, route, file);
+        }
+      );
+    }
+  });
+</script>
diff --git a/create-vtj/templates/material/dev/env.d.ts b/create-vtj/templates/material/dev/env.d.ts
new file mode 100644
index 000000000..af36df349
--- /dev/null
+++ b/create-vtj/templates/material/dev/env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/create-vtj/templates/material/dev/main.ts b/create-vtj/templates/material/dev/main.ts
new file mode 100644
index 000000000..e59fa0c31
--- /dev/null
+++ b/create-vtj/templates/material/dev/main.ts
@@ -0,0 +1,12 @@
+import { createApp } from 'vue';
+import router from './router/index';
+import App from './App.vue';
+import 'element-plus/dist/index.css';
+import * as VX from '../src/library/index';
+const app = createApp(App);
+
+app.use(VX);
+app.use(router);
+app.mount('#app');
+
+export { app };
diff --git a/create-vtj/templates/material/dev/router/index.ts b/create-vtj/templates/material/dev/router/index.ts
new file mode 100644
index 000000000..2413ee582
--- /dev/null
+++ b/create-vtj/templates/material/dev/router/index.ts
@@ -0,0 +1,36 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import Layout from '../components/layout.vue';
+
+import { routes } from './modules';
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: () => import('../designer/index.vue')
+    },
+    {
+      path: '/auth',
+      name: 'Auth',
+      component: () => import('../designer/auth.vue')
+    },
+    {
+      path: '/preview/:id',
+      name: 'Preivew',
+      component: () => import('../designer/preview.vue')
+    },
+    {
+      path: '/view',
+      component: Layout,
+      children: [...routes.value]
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
+      component: () => import('../designer/404.vue')
+    }
+  ]
+});
+
+export default router;
diff --git a/create-vtj/templates/material/dev/router/modules.ts b/create-vtj/templates/material/dev/router/modules.ts
new file mode 100644
index 000000000..9c5bb468e
--- /dev/null
+++ b/create-vtj/templates/material/dev/router/modules.ts
@@ -0,0 +1,18 @@
+/// <reference types="vite/client" />
+import { computed } from 'vue';
+const modules = import.meta.glob(['/dev/views/**/*.vue']);
+
+export const routes = computed(() => {
+  const files = Object.keys(modules);
+  const items: any[] = [];
+  for (let key of files) {
+    const path = key.replace('.vue', '').replace('/dev/views/', '');
+    items.push({
+      path: path === 'index' ? '' : path,
+      component: modules[key]
+    });
+  }
+  return items;
+});
+
+export { modules };
diff --git a/create-vtj/templates/material/dev/views/example.vue b/create-vtj/templates/material/dev/views/example.vue
new file mode 100644
index 000000000..7a207d314
--- /dev/null
+++ b/create-vtj/templates/material/dev/views/example.vue
@@ -0,0 +1,4 @@
+<template>
+  <VExample title="Hello"></VExample>
+</template>
+<script lang="ts" setup></script>
diff --git a/create-vtj/templates/material/dev/views/index.vue b/create-vtj/templates/material/dev/views/index.vue
new file mode 100644
index 000000000..eba899934
--- /dev/null
+++ b/create-vtj/templates/material/dev/views/index.vue
@@ -0,0 +1,4 @@
+<template>
+  <div>在 /dev/views 目录下创建 vue 文件可生成菜单和路由</div>
+</template>
+<script lang="ts" setup></script>
diff --git a/create-vtj/templates/material/index.html b/create-vtj/templates/material/index.html
new file mode 100644
index 000000000..4717a8336
--- /dev/null
+++ b/create-vtj/templates/material/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="shortcut icon" href="/logo.svg" type="image/x-icon" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      http-equiv="Cache-Control"
+      content="no-cache, no-store, must-revalidate" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <meta http-equiv="Expires" content="0" />
+    <title>VTJ 物料开发工程</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/dev/main.ts"></script>
+  </body>
+</html>
diff --git a/create-vtj/templates/material/package.json b/create-vtj/templates/material/package.json
new file mode 100644
index 000000000..5f11c6ea6
--- /dev/null
+++ b/create-vtj/templates/material/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "vtj-material",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "setup": "pnpm install --unsafe-perm --registry=https://registry.npmmirror.com",
+    "dev": "vite --config vite.dev.config.ts",
+    "build": "npm run build:library && npm run build:material",
+    "build:library": "vue-tsc && vite build && cross-env UMD=true vite build",
+    "build:material": "vue-tsc && vite build --config vite.material.config.ts"
+  },
+  "dependencies": {
+    "element-plus": "~2.9.1"
+  },
+  "devDependencies": {
+    "@vtj/cli": "latest",
+    "@vtj/pro": "latest",
+    "@vtj/web": "latest",
+    "@vtj/core": "latest",
+    "vue": "~3.5.5",
+    "vue-router": "~4.5.0"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "main": "dist/index.umd.js",
+  "module": "dist/index.mjs",
+  "types": "types/index.d.ts",
+  "exports": {
+    "./dist/style.css": "./dist/style.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/ndex.umd.js"
+    },
+    "./*": "./*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "d03843144f07c2d98c1e0c72c8c6eb1117c01722"
+}
diff --git a/create-vtj/templates/material/src/library/api/index.ts b/create-vtj/templates/material/src/library/api/index.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/create-vtj/templates/material/src/library/api/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/create-vtj/templates/material/src/library/hooks/index.ts b/create-vtj/templates/material/src/library/hooks/index.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/create-vtj/templates/material/src/library/hooks/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/create-vtj/templates/material/src/library/index.ts b/create-vtj/templates/material/src/library/index.ts
new file mode 100644
index 000000000..b89a2378d
--- /dev/null
+++ b/create-vtj/templates/material/src/library/index.ts
@@ -0,0 +1,12 @@
+import type { App } from 'vue';
+import { components } from './ui';
+export * from './ui';
+export * from './api';
+export * from './hooks';
+export * from './utils';
+
+export function install(app: App) {
+  Object.entries(components).forEach(([name, comp]) => {
+    app.component(name, comp);
+  });
+}
diff --git a/create-vtj/templates/material/src/library/ui/Example.vue b/create-vtj/templates/material/src/library/ui/Example.vue
new file mode 100644
index 000000000..297ef31c4
--- /dev/null
+++ b/create-vtj/templates/material/src/library/ui/Example.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="v-example">Example: {{ title }}</div>
+</template>
+
+<script lang="ts" setup>
+  export interface Props {
+    title?: string;
+  }
+  defineProps<Props>();
+
+  defineOptions({
+    name: 'VExample'
+  });
+</script>
+
+<style lang="scss">
+  .v-example {
+    padding: 20px;
+    border: 1px solid var(--el-color-primary-light-3);
+    background: var(--el-color-primary-light-7);
+  }
+</style>
diff --git a/create-vtj/templates/material/src/library/ui/index.ts b/create-vtj/templates/material/src/library/ui/index.ts
new file mode 100644
index 000000000..b4452909e
--- /dev/null
+++ b/create-vtj/templates/material/src/library/ui/index.ts
@@ -0,0 +1,7 @@
+import VExample from './Example.vue';
+
+export { VExample };
+
+export const components = {
+  VExample
+};
diff --git a/create-vtj/templates/material/src/library/utils/index.ts b/create-vtj/templates/material/src/library/utils/index.ts
new file mode 100644
index 000000000..cb0ff5c3b
--- /dev/null
+++ b/create-vtj/templates/material/src/library/utils/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/create-vtj/templates/material/src/material/description/Example.ts b/create-vtj/templates/material/src/material/description/Example.ts
new file mode 100644
index 000000000..60914518a
--- /dev/null
+++ b/create-vtj/templates/material/src/material/description/Example.ts
@@ -0,0 +1,15 @@
+import type { MaterialDescription } from '@vtj/core';
+
+const desc: MaterialDescription = {
+  name: 'VExample',
+  label: '示例组件',
+  categoryId: 'base',
+  props: [
+    {
+      name: 'title',
+      setters: 'StringSetter'
+    }
+  ]
+};
+
+export default desc;
diff --git a/create-vtj/templates/material/src/material/description/index.ts b/create-vtj/templates/material/src/material/description/index.ts
new file mode 100644
index 000000000..5640095f4
--- /dev/null
+++ b/create-vtj/templates/material/src/material/description/index.ts
@@ -0,0 +1,6 @@
+import type { MaterialDescription } from '@vtj/core';
+import Example from './Example';
+
+const descriptions: MaterialDescription[] = [Example];
+
+export { descriptions };
diff --git a/create-vtj/templates/material/src/material/index.ts b/create-vtj/templates/material/src/material/index.ts
new file mode 100644
index 000000000..5f2d2e340
--- /dev/null
+++ b/create-vtj/templates/material/src/material/index.ts
@@ -0,0 +1,21 @@
+import type { Material, MaterialCategory } from '@vtj/core';
+import { setPackageName } from '../shared';
+import { name, version, material, label } from '../../vtj.config';
+import { descriptions } from './description';
+
+const categories: MaterialCategory[] = [
+  {
+    id: 'base',
+    category: '基础'
+  }
+];
+
+export default {
+  name,
+  version,
+  label,
+  library: material,
+  order: 0,
+  categories,
+  components: setPackageName(descriptions, name)
+} as Material;
diff --git a/create-vtj/templates/material/src/shared/index.ts b/create-vtj/templates/material/src/shared/index.ts
new file mode 100644
index 000000000..323deb3bf
--- /dev/null
+++ b/create-vtj/templates/material/src/shared/index.ts
@@ -0,0 +1,13 @@
+import type { MaterialDescription } from '@vtj/core';
+
+export function setPackageName(
+  components: MaterialDescription[],
+  name: string
+) {
+  return components.map((n) => {
+    return {
+      ...n,
+      package: name
+    } as MaterialDescription;
+  });
+}
diff --git a/create-vtj/templates/material/tsconfig.json b/create-vtj/templates/material/tsconfig.json
new file mode 100644
index 000000000..4697e0b00
--- /dev/null
+++ b/create-vtj/templates/material/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "./node_modules/@vtj/cli/config/tsconfig.web.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"],
+      "$vtj/*": [".vtj/*"]
+    }
+  },
+  "include": ["src/library"],
+  "exclude": [".vtj"],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/create-vtj/templates/material/tsconfig.node.json b/create-vtj/templates/material/tsconfig.node.json
new file mode 100644
index 000000000..e2712c856
--- /dev/null
+++ b/create-vtj/templates/material/tsconfig.node.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": [
+    "vtj.config.ts",
+    "vite.config.ts",
+    "proxy.config.ts",
+    "env.config.ts",
+    "node_modules/@vtj/pro/**/*"
+  ]
+}
diff --git a/create-vtj/templates/material/vite.config.ts b/create-vtj/templates/material/vite.config.ts
new file mode 100644
index 000000000..e5d8e2f50
--- /dev/null
+++ b/create-vtj/templates/material/vite.config.ts
@@ -0,0 +1,32 @@
+import { createViteConfig } from '@vtj/cli';
+import { library } from './vtj.config';
+
+const isUmd = !!process.env.UMD;
+
+const globals = {
+  vue: 'Vue',
+  'vue-router': 'VueRouter',
+  'element-plus': 'ElementPlus',
+  '@vueuse/core': 'VueUse',
+  '@vtj/utils': 'VtjUtils',
+  '@vtj/icons': 'VtjIcons',
+  '@vtj/ui': 'VtjUI',
+  echarts: 'echarts'
+};
+
+function createOptions(umd: boolean, externalGlobals: Record<string, string>) {
+  return {
+    lib: true,
+    dts: !umd,
+    emptyOutDir: !umd,
+    library,
+    libFileName: 'index',
+    entry: 'src/library/index.ts',
+    formats: umd ? ['umd'] : ['es'],
+    buildTarget: 'es2015',
+    external: Object.keys(externalGlobals),
+    externalGlobals: umd ? externalGlobals : undefined
+  };
+}
+
+export default createViteConfig(createOptions(isUmd, globals));
diff --git a/create-vtj/templates/material/vite.dev.config.ts b/create-vtj/templates/material/vite.dev.config.ts
new file mode 100644
index 000000000..7a0eecca8
--- /dev/null
+++ b/create-vtj/templates/material/vite.dev.config.ts
@@ -0,0 +1,15 @@
+import { createViteConfig } from '@vtj/cli';
+import { createDevTools } from '@vtj/pro/vite';
+import { name } from './vtj.config';
+
+export default createViteConfig({
+  plugins: [
+    createDevTools({
+      link: false
+    })
+  ],
+  staticDirs: ['dist'],
+  alias: {
+    [name]: '/src/library/index.ts'
+  }
+});
diff --git a/create-vtj/templates/material/vite.material.config.ts b/create-vtj/templates/material/vite.material.config.ts
new file mode 100644
index 000000000..95f339079
--- /dev/null
+++ b/create-vtj/templates/material/vite.material.config.ts
@@ -0,0 +1,14 @@
+import { createViteConfig } from '@vtj/cli';
+import { material } from './vtj.config';
+
+export default createViteConfig({
+  lib: true,
+  dts: false,
+  emptyOutDir: false,
+  library: material,
+  buildTarget: 'es2015',
+  libFileName: 'material',
+  entry: 'src/material/index.ts',
+  formats: ['umd'],
+  external: ['@vtj/core']
+});
diff --git a/create-vtj/templates/material/vtj.config.ts b/create-vtj/templates/material/vtj.config.ts
new file mode 100644
index 000000000..f29a340ff
--- /dev/null
+++ b/create-vtj/templates/material/vtj.config.ts
@@ -0,0 +1,27 @@
+import { name, version } from './package.json';
+
+export { name, version };
+
+/**
+ * 调试项目配置信息
+ */
+export const project: Record<string, any> = {
+  id: name,
+  name: '物料开发项目',
+  platform: 'web'
+};
+
+/**
+ * 库导出名称
+ */
+export const library = 'VX';
+
+/**
+ * 物料描述导出名称
+ */
+export const material = 'VXMaterial';
+
+/**
+ * 物料在设计器组件面板中的标题文本
+ */
+export const label = '扩展库';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e63e168c4..6d76ba6dc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ importers:
         version: 19.7.1
       axios:
         specifier: ~1.8.0
-        version: 1.8.2
+        version: 1.8.3
       fs-extra:
         specifier: ~11.3.0
         version: 11.3.0
@@ -354,10 +354,10 @@ importers:
     dependencies:
       '@vitepress-demo-preview/component':
         specifier: ~2.3.2
-        version: 2.3.2(vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.2)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
+        version: 2.3.2(vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.3)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       '@vitepress-demo-preview/plugin':
         specifier: ~1.3.0
-        version: 1.3.0(markdown-it-container@3.0.0)(vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.2)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
+        version: 1.3.0(markdown-it-container@3.0.0)(vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.3)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       '@vtj/icons':
         specifier: workspace:*
         version: link:../packages/icons
@@ -388,7 +388,7 @@ importers:
         version: link:../packages/cli
       vitepress:
         specifier: ^1.4.0
-        version: 1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.2)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2)
+        version: 1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.3)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2)
 
   lcdp:
     dependencies:
@@ -756,7 +756,7 @@ importers:
         version: link:../base
       axios:
         specifier: ~1.8.0
-        version: 1.8.2
+        version: 1.8.3
       fs-extra:
         specifier: ~11.3.0
         version: 11.3.0
@@ -915,7 +915,7 @@ importers:
         version: link:../cli
       axios:
         specifier: ~1.8.0
-        version: 1.8.2
+        version: 1.8.3
       fetch-jsonp:
         specifier: ~1.3.0
         version: 1.3.0
@@ -4402,8 +4402,8 @@ packages:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
 
-  axios@1.8.2:
-    resolution: {integrity: sha512-ls4GYBm5aig9vWx8AWDSGLpnpDQRtWAfrjU+EuytuODrFBkqesN2RkOQCBzrA1RQNHw1SmRMSDDDSwzNAYQ6Rg==}
+  axios@1.8.3:
+    resolution: {integrity: sha512-iP4DebzoNlP/YN2dpwCgb8zoCmhtkajzS48JvwmkSkXvPI3DHc7m+XYL5tGnSlJtR6nImXZmdCuN5aP8dh1d8A==}
 
   babel-jest@27.5.1:
     resolution: {integrity: sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==}
@@ -4624,8 +4624,8 @@ packages:
   caniuse-api@3.0.0:
     resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==}
 
-  caniuse-lite@1.0.30001703:
-    resolution: {integrity: sha512-kRlAGTRWgPsOj7oARC9m1okJEXdL/8fekFVcxA8Hl7GH4r/sN4OJn/i6Flde373T50KS7Y37oFbMwlE8+F42kQ==}
+  caniuse-lite@1.0.30001704:
+    resolution: {integrity: sha512-+L2IgBbV6gXB4ETf0keSvLr7JUrRVbIaB/lrQ1+z8mRcQiisG5k+lG6O4n6Y5q6f5EuNfaYXKgymucphlEXQew==}
 
   ccount@2.0.1:
     resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -5300,8 +5300,8 @@ packages:
     engines: {node: '>=0.10.0'}
     hasBin: true
 
-  electron-to-chromium@1.5.114:
-    resolution: {integrity: sha512-DFptFef3iktoKlFQK/afbo274/XNWD00Am0xa7M8FZUepHlHT8PEuiNBoRfFHbH1okqN58AlhbJ4QTkcnXorjA==}
+  electron-to-chromium@1.5.116:
+    resolution: {integrity: sha512-mufxTCJzLBQVvSdZzX1s5YAuXsN1M4tTyYxOOL1TcSKtIzQ9rjIrm7yFK80rN5dwGTePgdoABDSHpuVtRQh0Zw==}
 
   element-plus@2.9.6:
     resolution: {integrity: sha512-D9zU28Ce0s/9O/Vp3ewemikxzFVA6gdZyMwmWijHijo+t5/9H3sHRTIm1WlfeNpFW2Yq0y8nHXD0fU5YxU6qlQ==}
@@ -13616,17 +13616,17 @@ snapshots:
       vite: 6.2.1(@types/node@22.13.10)(jiti@2.4.2)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)(yaml@2.7.0)
       vue: 3.5.13(typescript@5.8.2)
 
-  '@vitepress-demo-preview/component@2.3.2(vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.2)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))':
+  '@vitepress-demo-preview/component@2.3.2(vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.3)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
-      vitepress: 1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.2)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2)
+      vitepress: 1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.3)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2)
       vue: 3.5.13(typescript@5.8.2)
 
-  '@vitepress-demo-preview/plugin@1.3.0(markdown-it-container@3.0.0)(vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.2)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))':
+  '@vitepress-demo-preview/plugin@1.3.0(markdown-it-container@3.0.0)(vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.3)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@flypeng/tool': 5.7.0
       markdown-it: 14.1.0
       markdown-it-container: 3.0.0
-      vitepress: 1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.2)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2)
+      vitepress: 1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.3)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2)
       vue: 3.5.13(typescript@5.8.2)
 
   '@vitest/coverage-v8@3.0.8(vitest@3.0.8(@types/node@22.13.10)(jiti@2.4.2)(jsdom@26.0.0)(less@4.2.2)(sass@1.85.1)(terser@5.39.0)(yaml@2.7.0))':
@@ -13960,14 +13960,14 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/integrations@12.8.2(async-validator@4.2.5)(axios@1.8.2)(focus-trap@7.6.4)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.8.2)':
+  '@vueuse/integrations@12.8.2(async-validator@4.2.5)(axios@1.8.3)(focus-trap@7.6.4)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.8.2)':
     dependencies:
       '@vueuse/core': 12.8.2(typescript@5.8.2)
       '@vueuse/shared': 12.8.2(typescript@5.8.2)
       vue: 3.5.13(typescript@5.8.2)
     optionalDependencies:
       async-validator: 4.2.5
-      axios: 1.8.2
+      axios: 1.8.3
       focus-trap: 7.6.4
       qrcode: 1.5.4
       sortablejs: 1.15.6
@@ -14230,7 +14230,7 @@ snapshots:
   autoprefixer@10.4.21(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.4
-      caniuse-lite: 1.0.30001703
+      caniuse-lite: 1.0.30001704
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -14241,7 +14241,7 @@ snapshots:
     dependencies:
       possible-typed-array-names: 1.1.0
 
-  axios@1.8.2:
+  axios@1.8.3:
     dependencies:
       follow-redirects: 1.15.9
       form-data: 4.0.2
@@ -14458,8 +14458,8 @@ snapshots:
 
   browserslist@4.24.4:
     dependencies:
-      caniuse-lite: 1.0.30001703
-      electron-to-chromium: 1.5.114
+      caniuse-lite: 1.0.30001704
+      electron-to-chromium: 1.5.116
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.24.4)
 
@@ -14542,11 +14542,11 @@ snapshots:
   caniuse-api@3.0.0:
     dependencies:
       browserslist: 4.24.4
-      caniuse-lite: 1.0.30001703
+      caniuse-lite: 1.0.30001704
       lodash.memoize: 4.1.2
       lodash.uniq: 4.5.0
 
-  caniuse-lite@1.0.30001703: {}
+  caniuse-lite@1.0.30001704: {}
 
   ccount@2.0.1: {}
 
@@ -15226,7 +15226,7 @@ snapshots:
     dependencies:
       jake: 10.9.2
 
-  electron-to-chromium@1.5.114: {}
+  electron-to-chromium@1.5.116: {}
 
   element-plus@2.9.6(vue@3.5.13(typescript@5.8.2)):
     dependencies:
@@ -17840,7 +17840,7 @@ snapshots:
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.2
       '@zkochan/js-yaml': 0.0.7
-      axios: 1.8.2
+      axios: 1.8.3
       chalk: 4.1.0
       cli-cursor: 3.1.0
       cli-spinners: 2.6.1
@@ -20004,7 +20004,7 @@ snapshots:
       terser: 5.39.0
       yaml: 2.7.0
 
-  vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.2)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2):
+  vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@22.13.10)(async-validator@4.2.5)(axios@1.8.3)(less@4.2.2)(postcss@8.5.3)(qrcode@1.5.4)(sass@1.85.1)(search-insights@2.17.3)(sortablejs@1.15.6)(terser@5.39.0)(typescript@5.8.2):
     dependencies:
       '@docsearch/css': 3.8.2
       '@docsearch/js': 3.8.2(@algolia/client-search@5.21.0)(search-insights@2.17.3)
@@ -20017,7 +20017,7 @@ snapshots:
       '@vue/devtools-api': 7.7.2
       '@vue/shared': 3.5.13
       '@vueuse/core': 12.7.0(typescript@5.8.2)
-      '@vueuse/integrations': 12.8.2(async-validator@4.2.5)(axios@1.8.2)(focus-trap@7.6.4)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.8.2)
+      '@vueuse/integrations': 12.8.2(async-validator@4.2.5)(axios@1.8.3)(focus-trap@7.6.4)(qrcode@1.5.4)(sortablejs@1.15.6)(typescript@5.8.2)
       focus-trap: 7.6.4
       mark.js: 8.11.1
       minisearch: 7.1.2