diff --git a/.browserslistrc b/.browserslistrc
deleted file mode 100644
index dc3bc09a247732bf162a0078796c68ebdc074c30..0000000000000000000000000000000000000000
--- a/.browserslistrc
+++ /dev/null
@@ -1,4 +0,0 @@
-> 1%
-last 2 versions
-not dead
-not ie 11
diff --git a/.npmignore b/.npmrc
similarity index 100%
rename from .npmignore
rename to .npmrc
diff --git a/babel.config.js b/babel.config.js
deleted file mode 100644
index e9558405fdcc02f12d757acb308e02937a7444f1..0000000000000000000000000000000000000000
--- a/babel.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
diff --git a/build/rollup.config.js b/build/rollup.config.js
deleted file mode 100644
index ffa2219a514fb23951ff2bee8695c7d12a58c2dd..0000000000000000000000000000000000000000
--- a/build/rollup.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-// import vue from 'rollup-plugin-vue'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
-// import commonjs from '@rollup/plugin-commonjs'
-import { terser } from 'rollup-plugin-terser'
-import typescript from 'rollup-plugin-typescript2'
-import pkg from '../package.json'
-const deps = Object.keys(pkg.dependencies)
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const vue = require('rollup-plugin-vue')
-
-export default [
-  {
-    input: 'packages/index.ts',
-    output: [
-      {
-        format: 'es',
-        file: pkg.module
-      }
-    ],
-    plugins: [
-      terser(),
-      nodeResolve(),
-      // commonjs(),
-      vue({
-        target: 'browser',
-        css: false,
-        exposeFilename: false
-      }),
-      typescript({
-        tsconfigOverride: {
-          compilerOptions: {
-            declaration: true
-          },
-          'include': [
-            'packages/**/*',
-            'typings/*'
-          ],
-          'exclude': [
-            'node_modules',
-            'packages/**/__tests__/*'
-          ]
-        },
-        abortOnError: false
-      })
-    ],
-    external(id) {
-      return /^vue/.test(id)
-        || deps.some(k => new RegExp('^' + k).test(id))
-    }
-  }
-]
\ No newline at end of file
diff --git a/docs/.vuepress b/docs/.vuepress
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/docs/guide b/docs/guide
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/env.d.ts b/env.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1d5e70def47ae8d2c9a44a61fe6b32b12128ca5d
--- /dev/null
+++ b/env.d.ts
@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_SCHOOL_TYPE: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
diff --git a/examples/common/index.ts b/examples/common/index.ts
deleted file mode 100644
index 73ed647298b35db4447f83673da2e47582ed0f53..0000000000000000000000000000000000000000
--- a/examples/common/index.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-export default function DeepCopy(source: any) {
-    if(null == source || {} == source || [] == source)
-    {
-        return source;
-    }
-    
-    let newObject : any;
-    let isArray = false;
-    if((source as any).length)
-    {
-        newObject = [];
-        isArray = true;
-    }
-    else
-    {
-        newObject = {};
-        isArray = false;
-    }
-    
-    for (let key of Object.keys(source))
-    {
-        if(null == source[key])
-        {
-            if (isArray)
-            {
-                newObject.push(null);
-            }
-            else
-            {
-                newObject[key] = null;
-            }
-        }
-        else
-        {
-            let sub = (typeof source[key] == 'object') ? DeepCopy(source[key]) : source[key];
-            if(isArray)
-            {
-                newObject.push(sub);
-            }
-            else
-            {
-                newObject[key] = sub;
-            }
-        }
-    }
-    return newObject;
-}
\ No newline at end of file
diff --git a/examples/main.ts b/examples/main.ts
index bb839401f49072f5dfefba45314e05c62a4b1691..24a1727d48c7ff2e0a110d3e18e5c6bf3a771293 100644
--- a/examples/main.ts
+++ b/examples/main.ts
@@ -1,12 +1,20 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './src/App.vue'
+import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+
+
 // @ts-ignore
-import PhotUI from '~/index'
-import store from '../stores'
+import PhotUI from '../src/index'
+
+
 import '@photlab/phot-icon/iconfont.css'
 import '@photlab/phot-icon/iconfont.js'
 
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
 const app = createApp(App)
+
 app.use(PhotUI)
-app.use(store)
+app.use(pinia)
 app.mount('#app')
\ No newline at end of file
diff --git a/examples/App.vue b/examples/src/App.vue
similarity index 37%
rename from examples/App.vue
rename to examples/src/App.vue
index 7344deab8c171813d998a2e6ffe06e1b2895409a..4e70a4b93a3c2c8ae2e977758efa4025a05e3aff 100644
--- a/examples/App.vue
+++ b/examples/src/App.vue
@@ -13,8 +13,7 @@
                 inactiveColor="#909399"
                 v-model="demoRef.theme"
                 @onChange="themeChange"
-              >
-              </pui-switch>
+              ></pui-switch>
               <pui-svg name="text-color"></pui-svg>
             </div>
           </div>
@@ -23,7 +22,7 @@
             <div class="content">
               <pui-button>描边按钮</pui-button>
               <pui-button type="primary" @click="changeToolbarInputData">描边按钮</pui-button>
-              <pui-button type="danger" size="small">small按钮</pui-button>
+              <pui-button type="danger">描边按钮</pui-button>
               <pui-button icon="check" @click="showTopDrawerClickHandle"></pui-button>
             </div>
           </div>
@@ -31,8 +30,12 @@
             <div class="title text_dark">开关</div>
             <div class="content">
               <div>
-                <pui-switch v-model="demoRef.switchActive1" isLoading :loading="demoRef.switchLoading" @onChange="switchChange">
-                </pui-switch>
+                <pui-switch
+                  v-model="demoRef.switchActive1"
+                  isLoading
+                  :loading="demoRef.switchLoading"
+                  @onChange="switchChange"
+                ></pui-switch>
                 <pui-switch v-model="demoRef.switchActive2"></pui-switch>
               </div>
               <div class="m-t-10">
@@ -40,8 +43,13 @@
                 <pui-switch v-model="demoRef.switchActive4" disabled></pui-switch>
               </div>
               <div class="m-t-10">
-                <pui-switch v-model="demoRef.switchActive5" autofocus isLoading :loading="demoRef.switchLoading" @onChange="switchChange">
-                </pui-switch>
+                <pui-switch
+                  v-model="demoRef.switchActive5"
+                  autofocus
+                  isLoading
+                  :loading="demoRef.switchLoading"
+                  @onChange="switchChange"
+                ></pui-switch>
                 <pui-switch v-model="demoRef.switchActive6" autofocus></pui-switch>
               </div>
             </div>
@@ -50,7 +58,7 @@
             <div class="title text_dark">下拉列表</div>
             <div class="content">
               <pui-selector placeholder="默认路径" :dataList="demoRef.optionsList" v-model="demoRef.selectData2" clearAble></pui-selector>
-              <pui-selector class="m-t-10" block :dataList="demoRef.optionsList" v-model="demoRef.selectData2" clearAble></pui-selector>
+              <pui-selector block :dataList="demoRef.optionsList" v-model="demoRef.selectData2" clearAble></pui-selector>
             </div>
           </div>
           <div class="demo-item m-t-20">
@@ -63,8 +71,7 @@
                 iconPosition="right"
                 clearAble
                 @onIconClick="onIconClick"
-              >
-              </pui-search>
+              ></pui-search>
             </div>
           </div>
           <div class="demo-item m-t-20">
@@ -76,16 +83,27 @@
           <div class="demo-item m-t-20">
             <div class="title text_dark">数字输入框</div>
             <div class="content">
-              <pui-input-number v-model="demoRef.inputText3" :precision="2" :step="0.1" :min="0" :max="100"></pui-input-number>
+              <pui-input-number v-model="demoRef.inputText3" :precision="2" :step="0.1" :min="0"></pui-input-number>
             </div>
           </div>
+          <!-- <div class="demo-item m-t-20">
+            <div class="title">滑块组件</div>
+            <div class="content">
+              <pui-slider
+                ref="sliderRef"
+                @progressClick="handleChangeProgress"
+                @progressMove="handleChangeProgress"
+                :width="demoRef.range"
+              ></pui-slider>
+            </div>
+          </div> -->
         </div>
         <div class="center">
           <div class="demo-item">
             <div class="title text_dark">复选框</div>
             <div class="content">
               <div>
-                <pui-checkbox v-model="demoRef.check1" size></pui-checkbox>
+                <pui-checkbox v-model="demoRef.check1" label="checkbox1" size></pui-checkbox>
                 <pui-checkbox v-model="demoRef.check2" size label="checkbox2"></pui-checkbox>
                 <pui-checkbox v-model="demoRef.check3" disabled size label="disabled"></pui-checkbox>
               </div>
@@ -130,8 +148,7 @@
                 add
                 remove
                 @onRightClickHandle="tabRightClickHandle"
-              >
-              </pui-tabs>
+              ></pui-tabs>
               <pui-tabs round class="m-t-20" :tabList="demoRef.tabList2" type="flex" @onClickHandle="tabClickHandle"></pui-tabs>
             </div>
           </div>
@@ -172,7 +189,7 @@
               <pui-tree :dataList="demoRef.optionsList" isPopper @onNodeClick="itemClickHandle">
                 <pui-button>树形控件</pui-button>
               </pui-tree>
-              <pui-tree class="m-t-10" border :show="true" :dataList="demoRef.optionsList" @onNodeClick="itemClickHandle"></pui-tree>
+              <pui-tree border :show="true" :dataList="demoRef.optionsList" @onNodeClick="itemClickHandle"></pui-tree>
             </div>
           </div>
           <div class="demo-item m-t-20">
@@ -218,653 +235,736 @@
       <div class="bottom">
         <div class="title text_dark m-t-20">分析器子窗口</div>
         <pui-container>
-          <pui-main>
-            <pui-window
-              defaultWidth="300"
-              defaultHeight="250"
-              title="test1"
-              :backgroundColor="demoRef.currentColor"
-              @closeWindow="closeTest()"
-              :rightItemList="demoRef.rightItemList"
-            >
-            </pui-window>
-            <pui-window defaultWidth="300" defaultHeight="250" title="test2" @closeWindow="closeTest()"></pui-window>
-            <pui-color-picker v-model="demoRef.currentColor" @changeColor="changeColor"></pui-color-picker>
-          </pui-main>
+          <pui-container>
+            <pui-main>
+              <pui-window
+                defaultWidth="300"
+                defaultHeight="250"
+                title="test1"
+                :backgroundColor="demoRef.currentColor"
+                @closeWindow="closeTest()"
+                :rightItemList="demoRef.rightItemList"
+              ></pui-window>
+              <pui-window defaultWidth="300" defaultHeight="250" title="test2" @closeWindow="closeTest()"></pui-window>
+              <pui-color-picker v-model="demoRef.currentColor" @changeColor="changeColor"></pui-color-picker>
+            </pui-main>
+          </pui-container>
         </pui-container>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { reactive, watch } from 'vue';
-
-let toolbarInputData = reactive({
-  sizeX: 100,
-  sizeY: 200,
-  sizeZ: 50,
-  gridSpacing: 0.01,
-  pmlWidth: 1,
-  envN: 1,
-});
-
-const demoRef = reactive({
-  theme: false,
-  switchActive1: true,
-  switchActive2: false,
-  switchActive3: true,
-  switchActive4: false,
-  switchActive5: true,
-  switchActive6: false,
-  switchLoading: false,
-  currentColor: '#EB7044',
-  showTopDrawer: false,
-  rightItemList: [
-    {
-      name: '复制',
-      fn: () => {
-        console.log('复制');
-      },
-    },
-  ],
-  optionsList: [
-    {
-      label: 'phot-system-1',
-      value: '1',
-      tip: './photlab/phot-system-1/phot-system-1.phtg',
-      children: [
+<script lang="ts">
+import { defineComponent, reactive, ref, onMounted, watch, getCurrentInstance } from 'vue';
+export default defineComponent({
+  name: 'App',
+  setup() {
+    const { proxy } = getCurrentInstance() as any;
+    const sliderRef = ref();
+    let toolbarInputData = reactive({
+      sizeX: 100,
+      sizeY: 200,
+      sizeZ: 50,
+      gridSpacing: 0.01,
+      pmlWidth: 1,
+      envN: 1,
+    }) as any;
+    const demoRef = reactive({
+      theme: false,
+      switchActive1: true,
+      switchActive2: false,
+      switchActive3: true,
+      switchActive4: false,
+      switchActive5: true,
+      switchActive6: false,
+      switchLoading: false,
+      currentColor: '#EB7044',
+      showTopDrawer: false,
+      rightItemList: [
         {
-          label: '测试1-1',
-          value: '1-1',
-          bg: true,
+          name: '复制',
+          fn: () => {
+            console.log('复制');
+          },
+        },
+      ],
+      optionsList: [
+        {
+          label: 'phot-system-1',
+          value: '1',
+          tip: './photlab/phot-system-1/phot-system-1.phtg',
           children: [
             {
-              label: '测试1-1-1',
-              value: '1-1-1',
-              fn: () => {
-                console.log('测试1-1-1');
-              },
+              label: '测试1-1',
+              value: '1-1',
+              bg: true,
+              children: [
+                {
+                  label: '测试1-1-1',
+                  value: '1-1-1',
+                  fn: () => {
+                    console.log('测试1-1-1');
+                  },
+                },
+                {
+                  label: '测试1-1-2',
+                  value: '1-1-2',
+                },
+                {
+                  label: '测试1-1-3',
+                  value: '1-1-3',
+                },
+              ],
             },
             {
-              label: '测试1-1-2',
-              value: '1-1-2',
+              label: '测试1-2',
+              value: '1-2',
             },
             {
-              label: '测试1-1-3',
-              value: '1-1-3',
+              label: '测试1-3',
+              value: '1-3',
             },
           ],
         },
         {
-          label: '测试1-2',
-          value: '1-2',
+          label: '测试2',
+          value: '2',
         },
         {
-          label: '测试1-3',
-          value: '1-3',
+          label: '测试3',
+          value: '3',
         },
       ],
-    },
-    {
-      label: '测试2',
-      value: '2',
-    },
-    {
-      label: '测试3',
-      value: '3',
-    },
-  ],
-  selectData1: '',
-  selectData2: '',
-  selectData3: {
-    value: '',
-    label: '',
-  },
-  inputText1: '123',
-  inputText2: '123',
-  inputText3: '123',
-  check1: false,
-  check2: true,
-  check3: true,
-  radio1: '2',
-  radioList: [
-    {
-      value: '1',
-      label: 'radio1',
-    },
-    {
-      value: '2',
-      label: 'radio2',
-      disabled: true,
-    },
-    {
-      value: '3',
-      label: 'radio3',
-    },
-  ],
-  tabList1: [
-    {
-      name: 'tab1tab1tab1tab1tab1tab1tab1tab1',
-      // , svgSrc: require('@/assets/file-icon.svg')
-    },
-    { name: 'tab2' },
-    // {name: 'tab3'},
-    // {name: 'tab4'},
-    // {name: 'tab5'},
-    // {name: 'tab6'},
-  ],
-  tabList2: [{ name: '图标' }, { name: '文字' }, { name: '数字' }],
-  selected: [],
-  innerHeight: 0, // 获取窗口高度
-  tableHeight: 300, // 设置第一个div的高度为窗口高度的一半
-  dialogVisible: false,
-  dialogVisible2: false,
-  animate: 'fade',
-  range: 40,
-  toolbarList: [
-    {
-      title: '剪切板',
-      type: 'clipboard',
-      options: [
+      selectData1: '',
+      selectData2: '',
+      selectData3: {
+        value: '',
+        label: '',
+      },
+      inputText1: '123',
+      inputText2: '123',
+      inputText3: '123',
+      check1: false,
+      check2: true,
+      check3: true,
+      radio1: '2',
+      radioList: [
         {
-          display: 'row',
-          showText: true,
-          size: 'large',
-          list: [
-            {
-              display: 'column',
-              label: '粘贴',
-              icon: 'stickup',
-              id: '5',
-            },
-          ],
+          value: '1',
+          label: 'radio1',
         },
         {
-          display: 'column',
-          showText: true,
-          size: 'small',
-          list: [
-            {
-              display: 'row',
-              label: '复制',
-              icon: 'copy',
-              id: '6-1',
-            },
-            {
-              display: 'row',
-              label: '剪切',
-              icon: 'cut',
-              id: '6-2',
-            },
-            {
-              display: 'row',
-              label: '删除',
-              icon: 'clean',
-              id: '6-3',
-            },
-          ],
+          value: '2',
+          label: 'radio2',
+          disabled: true,
+        },
+        {
+          value: '3',
+          label: 'radio3',
         },
       ],
-    },
-    {
-      // text-mode
-      title: '文本编辑',
-      type: 'text-mode',
-      options: [
+      tabList1: [
         {
-          display: 'column',
-          size: 'large',
-          list: [
-            {
-              display: 'column',
-              label: '添加文本',
-              icon: 'add-text',
-              id: '7',
-              fn: () => {
-                console.log('添加文本');
-              },
-            },
-          ],
+          name: 'tab1tab1tab1tab1tab1tab1tab1tab1',
+          // , svgSrc: require('@/assets/file-icon.svg')
         },
+        { name: 'tab2' },
+        // {name: 'tab3'},
+        // {name: 'tab4'},
+        // {name: 'tab5'},
+        // {name: 'tab6'},
+      ],
+      tabList2: [{ name: '图标' }, { name: '文字' }, { name: '数字' }],
+      selected: [],
+      innerHeight: 0, // 获取窗口高度
+      tableHeight: 300, // 设置第一个div的高度为窗口高度的一半
+      dialogVisible: false,
+      dialogVisible2: false,
+      animate: 'fade',
+      range: 40,
+      toolbarList: [
         {
-          display: 'row',
-          size: 'small',
-          list: [
+          title: '剪切板',
+          type: 'clipboard',
+          options: [
             {
               display: 'row',
-              label: '字体',
-              icon: '',
-              id: '8-1',
-              fn: (e: any) => {
-                console.log('字体:', e);
-              },
+              showText: true,
+              size: 'large',
+              list: [
+                {
+                  display: 'column',
+                  label: '粘贴',
+                  icon: 'stickup',
+                  id: '5',
+                },
+              ],
             },
             {
-              display: 'row',
-              label: '大小',
-              icon: '',
-              id: '8-2',
-              fn: (e: any) => {
-                console.log('大小:', e);
-              },
+              display: 'column',
+              showText: true,
+              size: 'small',
+              list: [
+                {
+                  display: 'row',
+                  label: '复制',
+                  icon: 'copy',
+                  id: '6-1',
+                },
+                {
+                  display: 'row',
+                  label: '剪切',
+                  icon: 'cut',
+                  id: '6-2',
+                },
+                {
+                  display: 'row',
+                  label: '删除',
+                  icon: 'clean',
+                  id: '6-3',
+                },
+              ],
             },
           ],
         },
         {
-          display: 'row',
-          size: 'small',
-          list: [
-            {
-              display: 'row',
-              label: '',
-              icon: 'text-left',
-              id: '9-1',
-              fn: () => {
-                console.log('text-left');
-              },
-            },
-            {
-              display: 'row',
-              label: '',
-              icon: 'text-center',
-              id: '9-2',
-              fn: () => {
-                console.log('text-center');
-              },
-            },
+          // text-mode
+          title: '文本编辑',
+          type: 'text-mode',
+          options: [
             {
-              display: 'row',
-              label: '',
-              icon: 'text-right',
-              id: '9-3',
-              fn: () => {
-                console.log('text-right');
-              },
+              display: 'column',
+              size: 'large',
+              list: [
+                {
+                  display: 'column',
+                  label: '添加文本',
+                  icon: 'add-text',
+                  id: '7',
+                  fn: () => {
+                    console.log('添加文本');
+                  },
+                },
+              ],
             },
             {
               display: 'row',
-              label: '',
-              icon: 'text-background-color',
-              id: '9-4',
-              fn: () => {
-                console.log('text-background-color');
-              },
+              size: 'small',
+              list: [
+                {
+                  display: 'row',
+                  label: '字体',
+                  icon: '',
+                  id: '8-1',
+                  fn: (e: any) => {
+                    console.log('字体:', e);
+                  },
+                },
+                {
+                  display: 'row',
+                  label: '大小',
+                  icon: '',
+                  id: '8-2',
+                  fn: (e: any) => {
+                    console.log('大小:', e);
+                  },
+                },
+              ],
             },
             {
               display: 'row',
-              label: '',
-              icon: 'text-color',
-              id: '9-5',
-              fn: () => {
-                console.log('text-color');
-              },
-            },
-          ],
-        },
-      ],
-    },
-    {
-      title: '文件',
-      type: 'file',
-      options: [
-        {
-          display: 'row',
-          showText: true,
-          size: 'large',
-          list: [
-            {
-              display: 'column',
-              label: '新建',
-              icon: 'new-file',
-              id: '1',
-              fn: () => {
-                console.log('新建');
-              },
-              dataList: [
-                {
-                  label: '测试1',
-                  value: '1',
+              size: 'small',
+              list: [
+                {
+                  display: 'row',
+                  label: '',
+                  icon: 'text-left',
+                  id: '9-1',
                   fn: () => {
-                    console.log('测试1');
+                    console.log('text-left');
                   },
-                  icon: 'save',
                 },
                 {
-                  label: '测试2',
-                  value: '2',
-                  icon: 'new-file',
+                  display: 'row',
+                  label: '',
+                  icon: 'text-center',
+                  id: '9-2',
+                  fn: () => {
+                    console.log('text-center');
+                  },
                 },
-              ],
-            },
-          ],
-        },
-        {
-          display: 'row',
-          showText: true,
-          size: 'large',
-          list: [
-            {
-              display: 'column',
-              label: '保存',
-              icon: 'save',
-              id: '2',
-              dataList: [
                 {
-                  label: '测试1',
-                  value: '1',
-                  icon: 'save',
+                  display: 'row',
+                  label: '',
+                  icon: 'text-right',
+                  id: '9-3',
+                  fn: () => {
+                    console.log('text-right');
+                  },
                 },
                 {
-                  label: '测试2',
-                  value: '2',
+                  display: 'row',
+                  label: '',
+                  icon: 'text-background-color',
+                  id: '9-4',
+                  fn: () => {
+                    console.log('text-background-color');
+                  },
+                },
+                {
+                  display: 'row',
+                  label: '',
+                  icon: 'text-color',
+                  id: '9-5',
+                  fn: () => {
+                    console.log('text-color');
+                  },
                 },
               ],
             },
           ],
         },
         {
-          display: 'column',
-          showText: true,
-          size: 'small',
-          list: [
-            {
-              display: 'row',
-              label: '打开',
-              icon: 'folder-open',
-              id: '3-1',
-            },
+          title: '文件',
+          type: 'file',
+          options: [
             {
               display: 'row',
-              label: '关闭',
-              icon: 'folder-close',
-              id: '3-2',
-            },
-            {
-              display: 'row',
-              label: '退出',
-              icon: 'quit',
-              id: '3-3',
+              showText: true,
+              size: 'large',
+              list: [
+                {
+                  display: 'column',
+                  label: '新建',
+                  icon: 'new-file',
+                  id: '1',
+                  fn: () => {
+                    console.log('新建');
+                  },
+                  dataList: [
+                    {
+                      label: '测试1',
+                      value: '1',
+                      fn: () => {
+                        console.log('测试1');
+                      },
+                      icon: 'save',
+                    },
+                    {
+                      label: '测试2',
+                      value: '2',
+                      icon: 'new-file',
+                    },
+                  ],
+                },
+              ],
             },
-          ],
-        },
-        {
-          display: 'column',
-          showText: true,
-          size: 'small',
-          list: [
             {
               display: 'row',
-              label: '打印',
-              icon: 'print',
-              id: '4-1',
+              showText: true,
+              size: 'large',
+              list: [
+                {
+                  display: 'column',
+                  label: '保存',
+                  icon: 'save',
+                  id: '2',
+                  dataList: [
+                    {
+                      label: '测试1',
+                      value: '1',
+                      icon: 'save',
+                    },
+                    {
+                      label: '测试2',
+                      value: '2',
+                    },
+                  ],
+                },
+              ],
             },
             {
-              display: 'row',
-              label: '帮助',
-              icon: 'help',
-              id: '4-2',
+              display: 'column',
+              showText: true,
+              size: 'small',
+              list: [
+                {
+                  display: 'row',
+                  label: '打开',
+                  icon: 'folder-open',
+                  id: '3-1',
+                },
+                {
+                  display: 'row',
+                  label: '关闭',
+                  icon: 'folder-close',
+                  id: '3-2',
+                },
+                {
+                  display: 'row',
+                  label: '退出',
+                  icon: 'quit',
+                  id: '3-3',
+                },
+              ],
             },
             {
-              display: 'row',
-              label: '设置',
-              icon: 'setting',
-              id: '4-3',
+              display: 'column',
+              showText: true,
+              size: 'small',
+              list: [
+                {
+                  display: 'row',
+                  label: '打印',
+                  icon: 'print',
+                  id: '4-1',
+                },
+                {
+                  display: 'row',
+                  label: '帮助',
+                  icon: 'help',
+                  id: '4-2',
+                },
+                {
+                  display: 'row',
+                  label: '设置',
+                  icon: 'setting',
+                  id: '4-3',
+                },
+              ],
             },
           ],
         },
-      ],
-    },
-    {
-      title: '工具栏3',
-      type: 'input',
-      options: [
         {
-          display: 'column',
-          showText: true,
-          size: 'small',
-          list: [
+          title: '工具栏3',
+          type: 'input',
+          options: [
             {
-              display: 'row',
-              label: '空间步长（um）',
-              labelWidth: '100px',
-              icon: '',
-              id: '',
-              prop: 'gridSpacing',
-              value: toolbarInputData.gridSpacing,
-              type: 'number',
-              precision: 2,
-              step: 0.1,
-              min: 0,
+              display: 'column',
+              showText: true,
+              size: 'small',
+              list: [
+                {
+                  display: 'row',
+                  label: '空间步长（um）',
+                  labelWidth: '100px',
+                  icon: '',
+                  id: '',
+                  prop: 'gridSpacing',
+                  value: toolbarInputData.gridSpacing,
+                  type: 'number',
+                  precision: 2,
+                  step: 0.1,
+                  min: 0,
+                },
+                {
+                  display: 'row',
+                  label: '环境折射率',
+                  labelWidth: '100px',
+                  icon: '',
+                  id: '',
+                  prop: 'envN',
+                  value: 1,
+                  type: 'number',
+                  precision: 2,
+                  step: 0.1,
+                  min: 0,
+                },
+                {
+                  display: 'row',
+                  label: 'PML便界宽度',
+                  labelWidth: '100px',
+                  icon: '',
+                  id: '',
+                  prop: 'pmlWidth',
+                  value: 1,
+                  type: 'number',
+                  precision: 2,
+                  step: 0.1,
+                  min: 0,
+                },
+              ],
             },
             {
-              display: 'row',
-              label: '环境折射率',
-              labelWidth: '100px',
-              icon: '',
-              id: '',
-              prop: 'envN',
-              value: 1,
-              type: 'number',
-              precision: 2,
-              step: 0.1,
-              min: 0,
+              display: 'column',
+              showText: true,
+              size: 'small',
+              list: [
+                {
+                  display: 'row',
+                  type: 'btn',
+                  size: 'small',
+                  btnList: [
+                    {
+                      label: '提交',
+                      btnType: 'primary',
+                      onClick: (e: any) => {
+                        console.log(1);
+                      },
+                    },
+                  ],
+                },
+                {
+                  display: 'row',
+                  type: 'switch',
+                  size: 'small',
+                  btnList: [
+                    {
+                      activeLabel: '开1',
+                      inactiveLabel: '关1',
+                      size: '',
+                      prop: 'switch1',
+                      value: false,
+                      onChange: (e: any) => {
+                        console.log(e);
+                      },
+                    },
+                  ],
+                },
+              ],
             },
             {
               display: 'row',
-              label: 'PML便界宽度',
-              labelWidth: '100px',
-              icon: '',
-              id: '',
-              prop: 'pmlWidth',
-              value: 1,
-              type: 'number',
-              precision: 2,
-              step: 0.1,
-              min: 0,
+              showText: true,
+              size: 'large',
+              type: 'tool',
+              list: [
+                {
+                  display: 'column',
+                  label: '新建',
+                  icon: 'new-file',
+                  id: '1',
+                  fn: () => {
+                    console.log('新建');
+                  },
+                },
+              ],
             },
           ],
         },
         {
-          display: 'column',
-          showText: true,
-          size: 'small',
-          list: [
+          title: '工具栏4',
+          options: [
             {
               display: 'row',
-              type: 'btn',
+              showText: true,
               size: 'small',
-              btnList: [
+              list: [
                 {
-                  label: '提交',
-                  btnType: 'primary',
-                  onClick: (e: any) => {
-                    console.log(1);
-                  },
+                  display: 'column',
+                  label: '运行',
+                  icon: 'play',
+                  id: '14-1',
+                  dataList: [
+                    {
+                      label: '矩形波导',
+                      value: 'waveguide',
+                      border: true,
+                      fn: () => {},
+                      // 可加入图标
+                      icon: 'play',
+                    },
+                    {
+                      label: 'S波导',
+                      value: 'sbend',
+                      fn: () => {},
+                      // 可加入图标
+                      icon: 'play',
+                    },
+                    {
+                      label: 'Y型波导',
+                      value: 'ysplitter',
+                      fn: () => {},
+                      icon: 'play',
+                    },
+                  ],
                 },
               ],
             },
             {
               display: 'row',
-              type: 'switch',
+              showText: true,
               size: 'small',
-              btnList: [
-                {
-                  activeLabel: '开1',
-                  inactiveLabel: '关1',
-                  size: '',
-                  prop: 'switch1',
-                  value: false,
-                  onChange: (e: any) => {
-                    console.log(e);
-                  },
+              list: [
+                {
+                  display: 'column',
+                  label: '暂停',
+                  icon: 'pause',
+                  id: '14-2',
+                  dataList: [],
                 },
               ],
             },
-          ],
-        },
-        {
-          display: 'row',
-          showText: true,
-          size: 'large',
-          type: 'tool',
-          list: [
-            {
-              display: 'column',
-              label: '新建',
-              icon: 'new-file',
-              id: '1',
-              fn: () => {
-                console.log('新建');
-              },
-            },
-          ],
-        },
-      ],
-    },
-    {
-      title: '工具栏4',
-      options: [
-        {
-          display: 'row',
-          showText: true,
-          size: 'small',
-          list: [
             {
-              display: 'column',
-              label: '运行',
-              icon: 'play',
-              id: '14-1',
-              dataList: [
-                {
-                  label: '矩形波导',
-                  value: 'waveguide',
-                  border: true,
-                  fn: () => {},
-                  // 可加入图标
-                  icon: 'play',
-                },
+              display: 'row',
+              showText: true,
+              size: 'small',
+              list: [
                 {
-                  label: 'S波导',
-                  value: 'sbend',
-                  fn: () => {},
-                  // 可加入图标
-                  icon: 'play',
-                },
-                {
-                  label: 'Y型波导',
-                  value: 'ysplitter',
-                  fn: () => {},
-                  icon: 'play',
+                  display: 'column',
+                  label: '终止',
+                  icon: 'stop',
+                  id: '14-3',
+                  dataList: [],
                 },
               ],
             },
           ],
         },
-        {
-          display: 'row',
-          showText: true,
-          size: 'small',
-          list: [
-            {
-              display: 'column',
-              label: '暂停',
-              icon: 'pause',
-              id: '14-2',
-              dataList: [],
-            },
-          ],
-        },
-        {
-          display: 'row',
-          showText: true,
-          size: 'small',
-          list: [
-            {
-              display: 'column',
-              label: '终止',
-              icon: 'stop',
-              id: '14-3',
-              dataList: [],
-            },
-          ],
-        },
-      ],
-    },
-  ] as any,
-}) as any;
-
-const onInputHandle = (e: any) => {
-  console.log(e);
-  // toolbarInputData[e.prop] = e.value;
-};
-
-const removeTab = (e: Boolean) => {
-  console.log(demoRef.tabList1);
-};
-
-const addTab = () => {
-  demoRef.tabList1.push({
-    name: 'tab' + (demoRef.tabList1.length + 1),
-  });
-};
-
-const tabClickHandle = (e: any) => {
-  console.log(e);
-};
-const tabRightClickHandle = (e: any) => {
-  console.log(e);
-};
-const themeChange = () => {
-  demoRef.theme = !demoRef.theme;
-};
-const switchChange = (e: any) => {
-  demoRef.switchLoading = true;
-  setTimeout(() => {
-    demoRef.switchLoading = false;
-    demoRef.switchActive1 = !demoRef.switchActive1;
-    demoRef.switchActive5 = !demoRef.switchActive5;
-  }, 2000);
-};
-const showDialog = (animate: string) => {
-  demoRef.animate = animate;
-  demoRef.dialogVisible = true;
-};
-const showDialog2 = (animate: string) => {
-  demoRef.animate = animate;
-  demoRef.dialogVisible2 = true;
-};
-const showTopDrawerClickHandle = () => {
-  console.log(12312);
-  demoRef.showTopDrawer = true;
-};
-const closeTest = () => {
-  console.log('关闭窗口');
-};
-const changeColor = (val: any) => {
-  console.log(val);
-  demoRef.currentColor = val;
-};
-
-const onIconClick = (e: any) => {
-  console.log(e);
-};
-
-const itemClickHandle = (e: any) => {
-  console.log(e);
-};
-const changeToolbarInputData = () => {
-  toolbarInputData.sizeX = 200;
-  toolbarInputData.sizeY = 100;
-  toolbarInputData.sizeZ = 500;
-  toolbarInputData.gridSpacing = 10;
-  toolbarInputData.pmlWidth = 10;
-  toolbarInputData.envN = 10;
-};
+      ] as any,
+    }) as any;
+    const dataList = reactive<BaseOptions[]>([
+      {
+        label: '周一不开心',
+        value: '1',
+        children: [
+          { label: '不开心1', value: '1-1', children: [{ label: '不开心1-1', value: '1-1-1' }] },
+          { label: '不开心2', value: '1-2', children: [{ label: '不开心2-1', value: '1-2-1' }] },
+          {
+            label: '开心3',
+            value: '1-3',
+            children: [{ label: '开心1-3-1', value: '1-3-1', children: [{ label: '开心1-3-2', value: '1-3-2' }] }],
+          },
+        ],
+      },
+    ]);
+    const onInputHandle = (e: any) => {
+      console.log(e);
+      toolbarInputData[e.prop] = e.value;
+    };
+    // onMounted(() => {
+    //   demoRef.innerHeight = document.querySelector('.right')?.clientHeight
+    //   document.getElementById("draggable").onmousedown = heightChange
+    // })
+    const removeTab = (e: Boolean) => {
+      console.log(demoRef.tabList1);
+    };
+    let i = 0;
+    const addTab = () => {
+      // if (i%2 === 0) {
+      demoRef.tabList1.push({
+        name: 'tab' + (demoRef.tabList1.length + 1),
+      });
+      // }
+      // console.log(i)
+      // i++
+    };
+    const tabClickHandle = (e: any) => {
+      console.log(e);
+    };
+    const tabRightClickHandle = (e: any) => {
+      console.log(e);
+    };
+    const themeChange = () => {
+      demoRef.theme = !demoRef.theme;
+    };
+    const switchChange = (e: any) => {
+      demoRef.switchLoading = true;
+      setTimeout(() => {
+        demoRef.switchLoading = false;
+        demoRef.switchActive1 = !demoRef.switchActive1;
+        demoRef.switchActive5 = !demoRef.switchActive5;
+      }, 2000);
+    };
+    const showDialog = (animate: string) => {
+      demoRef.animate = animate;
+      demoRef.dialogVisible = true;
+    };
+    const showDialog2 = (animate: string) => {
+      demoRef.animate = animate;
+      demoRef.dialogVisible2 = true;
+    };
+    const showTopDrawerClickHandle = () => {
+      console.log(12312);
+      demoRef.showTopDrawer = true;
+    };
+    // const heightChange = (e) => {
+    //   let dy = e.clientY
+    //   document.onmousemove = e => {
+    //     if (e.clientY > demoRef.innerHeight) return
+    //     if (e.clientY < dy) {
+    //       if (demoRef.tableHeight <= 100) return
+    //       demoRef.tableHeight -= (dy - e.clientY)
+    //     } else {
+    //       if (demoRef.innerHeight - demoRef.tableHeight - 20 <= 100) return
+    //       demoRef.tableHeight += (e.clientY - dy)
+    //     }
+    //     dy = e.clientY
+    //   }
+    //   document.onmouseup = e => {
+    //     document.onmousemove = null
+    //     document.onmouseup = null
+    //   }
+    //   e.stopPropagation()
+    //   e.preventDefault()
+    //   return false
+    // }
+    const handleChangeProgress = (val: any): void => {
+      demoRef.range = val;
+    };
+    const closeTest = () => {
+      console.log('关闭窗口');
+    };
+    const changeColor = (val: any) => {
+      console.log(val);
+      demoRef.currentColor = val;
+    };
+    watch([() => demoRef.inputText1], (val1) => {
+      console.log(val1);
+    });
+    const onIconClick = (e: any) => {
+      console.log(e);
+    };
+    const menuList = [
+      {
+        label: '重命名',
+        type: 'rename',
+      },
+      {
+        label: '关闭',
+        type: 'close',
+      },
+    ];
+    const itemClickHandle = (e: any) => {
+      console.log(e);
+    };
+    const changeToolbarInputData = () => {
+      toolbarInputData.sizeX = 200;
+      toolbarInputData.sizeY = 100;
+      toolbarInputData.sizeZ = 500;
+      toolbarInputData.gridSpacing = 10;
+      toolbarInputData.pmlWidth = 10;
+      toolbarInputData.envN = 10;
+    };
+    return {
+      sliderRef,
+      demoRef,
+      removeTab,
+      addTab,
+      tabClickHandle,
+      tabRightClickHandle,
+      themeChange,
+      switchChange,
+      dataList,
+      showDialog,
+      showDialog2,
+      handleChangeProgress,
+      changeColor,
+      closeTest,
+      onIconClick,
+      showTopDrawerClickHandle,
+      itemClickHandle,
+      onInputHandle,
+      changeToolbarInputData,
+    };
+  },
+});
 </script>
 
 <style lang="scss">
-@import url(@/common/style.scss);
+// @import url(@/common/style.scss);
+@import '../common/style.scss';
 .demo {
   // width: 1920px;
   .top {
@@ -892,6 +992,32 @@ const changeToolbarInputData = () => {
         right: 0;
       }
     }
+    .right {
+      // height: 500px;
+      // .inner-box {
+      //   height: 1000px;
+      //   width: 50%;
+      //   background: yellow;
+      // }
+      // .top {
+      //   height: 300px;
+      //   background: red;
+      //   max-height: 480px;
+      //   overflow-y: auto;
+      // }
+      // #draggable {
+      //   height: 20px;
+      //   background: green;
+      //   user-drag: auto;
+      //   cursor: s-resize;
+      // }
+      // .bottom {
+      //   height: 180px;
+      //   max-height: 480px;
+      //   background: blue;
+      //   overflow-y: auto;
+      // }
+    }
   }
   .bottom {
     padding: 20px;
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..fccc0a62465582d33a2a449b8d06e7dd5173e25b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./examples/main.ts" type="module"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
index 34b34b7c2224a8976699c37de770a53cf23ce456..5f4460a38a5df534e07ba78c90e1c2b1d62ebfd6 100644
--- a/package.json
+++ b/package.json
@@ -1,48 +1,52 @@
 {
-  "name": "@photlab/phot-ui",
-  "version": "0.1.58",
+  "name": "phot-ui",
+  "version": "0.0.12",
   "private": false,
-  "description": "@photlab/phot-ui",
-  "main": "lib/index.umd.min.js",
-  "keyword": "@photlab/phot-ui",
+  "description": "phot-ui",
+  "keyword": "phot-ui",
   "license": "MIT",
   "author": {
     "name": "luoweijian",
     "email": "luoweijian@timbercld.com"
   },
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "docs:dev": "vuepress dev docs",
-    "docs:build": "vuepress build docs",
-    "build": "npm run build:clean && npm run build:lib && npm run 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 --mode dev",
+    "build:dev": "vite build --mode dev",
+    "build:prod": "vite build --mode prod",
+    "build:test": "vite build --mode test"
+  },
+  "type": "module",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    }
   },
   "dependencies": {
-    "@photlab/phot-icon": "^1.0.10",
-    "@photlab/phot-ui": "^0.1.43",
+    "@photlab/phot-icon": "http://47.113.177.133:4873/@photlab/phot-icon/-/phot-icon-1.0.10.tgz",
     "@popperjs/core": "^2.11.6",
     "@types/element-resize-detector": "^1.1.3",
     "click-outside-vue3": "^4.0.1",
     "core-js": "^3.8.3",
-    "vue": "^3.3.0",
+    "pinia": "^2.0.36",
+    "pinia-plugin-persistedstate": "^3.2.1",
+    "vue": "^3.2.37",
     "vue3-popper": "^1.5.0",
     "vuex": "^4.0.2"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.0.5",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-typescript": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
-    "rollup": "^2.58.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.30.0",
-    "rollup-plugin-vue": "^6.0.0",
+    "@vitejs/plugin-vue": "^3.0.1",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "sass-resources-loader": "^2.2.5",
-    "typescript": "~4.5.5",
-    "unplugin-vue-define-options": "^1.3.3"
+    "typescript": "^4.7.4",
+    "vite": "^3.0.2",
+    "vite-plugin-dts": "^1.4.0",
+    "vue-tsc": "^0.38.9"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index df36fcfb72584e00488330b560ebcf34a41c64c2..0000000000000000000000000000000000000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 3e5a13962197105f2078d2a224cc57dfa09b4893..0000000000000000000000000000000000000000
--- a/public/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
diff --git a/packages/Aside/aside.vue b/src/components/Aside/aside.vue
similarity index 94%
rename from packages/Aside/aside.vue
rename to src/components/Aside/aside.vue
index 4b2a40bdb676582c37e792b801858919ec7f1459..425107f68cd5191256827bc4d46d2cf8e1c8b1e1 100644
--- a/packages/Aside/aside.vue
+++ b/src/components/Aside/aside.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({
-  name: 'pui-aside',
+  name: 'puiAside',
 });
 </script>
 
diff --git a/packages/Aside/interface.ts b/src/components/Aside/interface.ts
similarity index 100%
rename from packages/Aside/interface.ts
rename to src/components/Aside/interface.ts
diff --git a/packages/Button/button.vue b/src/components/Button/button.vue
similarity index 100%
rename from packages/Button/button.vue
rename to src/components/Button/button.vue
diff --git a/packages/Button/interface.ts b/src/components/Button/interface.ts
similarity index 100%
rename from packages/Button/interface.ts
rename to src/components/Button/interface.ts
diff --git a/packages/Cascader/cascader.vue b/src/components/Cascader/cascader.vue
similarity index 97%
rename from packages/Cascader/cascader.vue
rename to src/components/Cascader/cascader.vue
index c6a7ac21d3ea236278b4a1b72b91a799fc9ad9a1..e40a7dcdd2f5e3f45e834b15efa4e64b032e50d4 100644
--- a/packages/Cascader/cascader.vue
+++ b/src/components/Cascader/cascader.vue
@@ -68,12 +68,12 @@ export default defineComponent({
 import { reactive } from 'vue';
 import type { Props, ComponentValue } from './interface';
 withDefaults(defineProps<Props>(), {
-    modelValue: '',
-    size: 'normal',
-    placement: 'bottom',
-    type: 'select',
-    disabled: false,
-    clearAble: false,
+  modelValue: '',
+  size: 'normal',
+  placement: 'bottom',
+  type: 'select',
+  disabled: false,
+  clearAble: false,
 });
 
 const emits = defineEmits<{
diff --git a/packages/Cascader/interface.ts b/src/components/Cascader/interface.ts
similarity index 100%
rename from packages/Cascader/interface.ts
rename to src/components/Cascader/interface.ts
diff --git a/packages/Checkbox/checkbox.vue b/src/components/Checkbox/checkbox.vue
similarity index 100%
rename from packages/Checkbox/checkbox.vue
rename to src/components/Checkbox/checkbox.vue
diff --git a/packages/Checkbox/interface.ts b/src/components/Checkbox/interface.ts
similarity index 100%
rename from packages/Checkbox/interface.ts
rename to src/components/Checkbox/interface.ts
diff --git a/packages/Collapse/collapse.vue b/src/components/Collapse/collapse.vue
similarity index 100%
rename from packages/Collapse/collapse.vue
rename to src/components/Collapse/collapse.vue
diff --git a/packages/ColorPicker/colorPicker.vue b/src/components/ColorPicker/colorPicker.vue
similarity index 100%
rename from packages/ColorPicker/colorPicker.vue
rename to src/components/ColorPicker/colorPicker.vue
diff --git a/packages/ColorPicker/interface.ts b/src/components/ColorPicker/interface.ts
similarity index 100%
rename from packages/ColorPicker/interface.ts
rename to src/components/ColorPicker/interface.ts
diff --git a/packages/Container/container.vue b/src/components/Container/container.vue
similarity index 100%
rename from packages/Container/container.vue
rename to src/components/Container/container.vue
diff --git a/packages/Container/interface.ts b/src/components/Container/interface.ts
similarity index 100%
rename from packages/Container/interface.ts
rename to src/components/Container/interface.ts
diff --git a/packages/Dialog/dialog.vue b/src/components/Dialog/dialog.vue
similarity index 100%
rename from packages/Dialog/dialog.vue
rename to src/components/Dialog/dialog.vue
diff --git a/packages/Dialog/interface.ts b/src/components/Dialog/interface.ts
similarity index 100%
rename from packages/Dialog/interface.ts
rename to src/components/Dialog/interface.ts
diff --git a/packages/Drawer/drawer.vue b/src/components/Drawer/drawer.vue
similarity index 100%
rename from packages/Drawer/drawer.vue
rename to src/components/Drawer/drawer.vue
diff --git a/packages/Drawer/interface.ts b/src/components/Drawer/interface.ts
similarity index 100%
rename from packages/Drawer/interface.ts
rename to src/components/Drawer/interface.ts
diff --git a/packages/Dropdown/dropdown.vue b/src/components/Dropdown/dropdown.vue
similarity index 100%
rename from packages/Dropdown/dropdown.vue
rename to src/components/Dropdown/dropdown.vue
diff --git a/packages/Dropdown/interface.ts b/src/components/Dropdown/interface.ts
similarity index 100%
rename from packages/Dropdown/interface.ts
rename to src/components/Dropdown/interface.ts
diff --git a/packages/Footer/footer.vue b/src/components/Footer/footer.vue
similarity index 100%
rename from packages/Footer/footer.vue
rename to src/components/Footer/footer.vue
diff --git a/packages/Header/header.vue b/src/components/Header/header.vue
similarity index 100%
rename from packages/Header/header.vue
rename to src/components/Header/header.vue
diff --git a/packages/Icon/icon.vue b/src/components/Icon/icon.vue
similarity index 100%
rename from packages/Icon/icon.vue
rename to src/components/Icon/icon.vue
diff --git a/packages/Input-number/inputNumber.vue b/src/components/Input-number/inputNumber.vue
similarity index 100%
rename from packages/Input-number/inputNumber.vue
rename to src/components/Input-number/inputNumber.vue
diff --git a/packages/Input-number/interface.ts b/src/components/Input-number/interface.ts
similarity index 100%
rename from packages/Input-number/interface.ts
rename to src/components/Input-number/interface.ts
diff --git a/packages/Input/input.vue b/src/components/Input/input.vue
similarity index 100%
rename from packages/Input/input.vue
rename to src/components/Input/input.vue
diff --git a/packages/Input/interface.ts b/src/components/Input/interface.ts
similarity index 100%
rename from packages/Input/interface.ts
rename to src/components/Input/interface.ts
diff --git a/packages/Main/main.vue b/src/components/Main/main.vue
similarity index 100%
rename from packages/Main/main.vue
rename to src/components/Main/main.vue
diff --git a/packages/Popper/interface.ts b/src/components/Popper/interface.ts
similarity index 100%
rename from packages/Popper/interface.ts
rename to src/components/Popper/interface.ts
diff --git a/packages/Popper/popper.vue b/src/components/Popper/popper.vue
similarity index 100%
rename from packages/Popper/popper.vue
rename to src/components/Popper/popper.vue
diff --git a/packages/Radio/interface.ts b/src/components/Radio/interface.ts
similarity index 100%
rename from packages/Radio/interface.ts
rename to src/components/Radio/interface.ts
diff --git a/packages/Radio/radio.vue b/src/components/Radio/radio.vue
similarity index 100%
rename from packages/Radio/radio.vue
rename to src/components/Radio/radio.vue
diff --git a/src/components/RadioGroup/interface.ts b/src/components/RadioGroup/interface.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef2e4b9ad8fdb12d2f34141a98ea84c0f2a26d03
--- /dev/null
+++ b/src/components/RadioGroup/interface.ts
@@ -0,0 +1,13 @@
+export interface Data {
+  label: string;
+  value: string;
+  disabled: boolean;
+}
+
+export interface Props {
+  modelValue: string | number;
+  list: Data[];
+  disabled:boolean;
+  column:boolean;
+
+}
diff --git a/packages/RadioGroup/radioGroup.vue b/src/components/RadioGroup/radioGroup.vue
similarity index 41%
rename from packages/RadioGroup/radioGroup.vue
rename to src/components/RadioGroup/radioGroup.vue
index 665c86b8858f9f603a2bef839f3f086faa1a21b7..10cd133a966319e96be794f9a2196fccb8956d46 100644
--- a/packages/RadioGroup/radioGroup.vue
+++ b/src/components/RadioGroup/radioGroup.vue
@@ -14,40 +14,28 @@
 
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
+import type { Props } from './interface';
+
 export default defineComponent({
-  name: 'pui-radio-group',
-  emits: {
-    'update:modelValue': (val: Object) => {},
-  },
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: '',
-    },
-    list: {
-      type: Array,
-      default: [],
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    column: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, ctx) {
-    const componentRef = reactive({
-      activeItem: {},
-    });
-    const changeRadioHandle = (value: [String, Number]) => {
-      ctx.emit('update:modelValue', value);
-    };
-    return {
-      componentRef,
-      changeRadioHandle,
-    };
+  name: 'puiRadioGroup',
+});
+</script>
+
+<script setup lang="ts">
+withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  disabled: false,
+  column: false,
+  list: () => {
+    return [];
   },
 });
+
+const emits = defineEmits<{
+  'update:modelValue': [val: string | number];
+}>();
+
+const changeRadioHandle = (value: string | number) => {
+  emits('update:modelValue', value);
+};
 </script>
diff --git a/packages/Search/interface.ts b/src/components/Search/interface.ts
similarity index 100%
rename from packages/Search/interface.ts
rename to src/components/Search/interface.ts
diff --git a/packages/Search/search.vue b/src/components/Search/search.vue
similarity index 100%
rename from packages/Search/search.vue
rename to src/components/Search/search.vue
diff --git a/packages/Selector/interface.ts b/src/components/Selector/interface.ts
similarity index 100%
rename from packages/Selector/interface.ts
rename to src/components/Selector/interface.ts
diff --git a/packages/Selector/selector.vue b/src/components/Selector/selector.vue
similarity index 94%
rename from packages/Selector/selector.vue
rename to src/components/Selector/selector.vue
index b0d58f497748a34301cf2546121ce80e9f24238b..8b87f80d7b7f4fbb0b046c29e915cf550d6ab8d3 100644
--- a/packages/Selector/selector.vue
+++ b/src/components/Selector/selector.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="['pui-selector', block && 'block']" ref="selectorRef">
     <pui-popper theme="light" @onClose="clickOutsideHandle" @onOpen="toggleOpen" :placement="placement" :disabled="disabled">
-      <div :class="['pui-selector_text', store.state.theme, size]">
+      <div :class="['pui-selector_text', store.theme, size]">
         <div :class="['pui-selected', isEmpty && 'not-selected']">
           {{ typeof modelValue === 'string' ? selectedText : modelValue.label }}
         </div>
@@ -40,7 +40,9 @@ export default defineComponent({
 <script lang="ts" setup>
 import { reactive, computed } from 'vue';
 import type { Data, Props } from './interface';
-import store from '../../stores/index';
+import useStore from '../../../stores/modules/global';
+
+// import store from '@/stores/index';
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: '',
@@ -57,6 +59,8 @@ const emits = defineEmits<{
   'update:modelValue': [val: Data | string];
 }>();
 
+const store = useStore();
+
 const componentRef = reactive({
   isShow: false,
   selectedVal: '',
diff --git a/packages/Slider/interface.ts b/src/components/Slider/interface.ts
similarity index 100%
rename from packages/Slider/interface.ts
rename to src/components/Slider/interface.ts
diff --git a/packages/Slider/slider.vue b/src/components/Slider/slider.vue
similarity index 100%
rename from packages/Slider/slider.vue
rename to src/components/Slider/slider.vue
diff --git a/packages/Svg/svg.vue b/src/components/Svg/svg.vue
similarity index 100%
rename from packages/Svg/svg.vue
rename to src/components/Svg/svg.vue
diff --git a/packages/Switch/interface.ts b/src/components/Switch/interface.ts
similarity index 100%
rename from packages/Switch/interface.ts
rename to src/components/Switch/interface.ts
diff --git a/packages/Switch/switch.vue b/src/components/Switch/switch.vue
similarity index 100%
rename from packages/Switch/switch.vue
rename to src/components/Switch/switch.vue
diff --git a/packages/Tab/tab.vue b/src/components/Tab/tab.vue
similarity index 100%
rename from packages/Tab/tab.vue
rename to src/components/Tab/tab.vue
diff --git a/packages/Table/interface.ts b/src/components/Table/interface.ts
similarity index 100%
rename from packages/Table/interface.ts
rename to src/components/Table/interface.ts
diff --git a/packages/Table/table.vue b/src/components/Table/table.vue
similarity index 100%
rename from packages/Table/table.vue
rename to src/components/Table/table.vue
diff --git a/packages/Tabs/interface.ts b/src/components/Tabs/interface.ts
similarity index 100%
rename from packages/Tabs/interface.ts
rename to src/components/Tabs/interface.ts
diff --git a/packages/Tabs/tabs.vue b/src/components/Tabs/tabs.vue
similarity index 100%
rename from packages/Tabs/tabs.vue
rename to src/components/Tabs/tabs.vue
diff --git a/packages/Tag/interface.ts b/src/components/Tag/interface.ts
similarity index 100%
rename from packages/Tag/interface.ts
rename to src/components/Tag/interface.ts
diff --git a/packages/Tag/tag.vue b/src/components/Tag/tag.vue
similarity index 100%
rename from packages/Tag/tag.vue
rename to src/components/Tag/tag.vue
diff --git a/packages/Toolbar/interface.ts b/src/components/Toolbar/interface.ts
similarity index 100%
rename from packages/Toolbar/interface.ts
rename to src/components/Toolbar/interface.ts
diff --git a/packages/Toolbar/toolbar.vue b/src/components/Toolbar/toolbar.vue
similarity index 100%
rename from packages/Toolbar/toolbar.vue
rename to src/components/Toolbar/toolbar.vue
diff --git a/packages/Tree/interface.ts b/src/components/Tree/interface.ts
similarity index 100%
rename from packages/Tree/interface.ts
rename to src/components/Tree/interface.ts
diff --git a/packages/Tree/tree.vue b/src/components/Tree/tree.vue
similarity index 100%
rename from packages/Tree/tree.vue
rename to src/components/Tree/tree.vue
diff --git a/packages/TreeChildren/interface.ts b/src/components/TreeChildren/interface.ts
similarity index 100%
rename from packages/TreeChildren/interface.ts
rename to src/components/TreeChildren/interface.ts
diff --git a/packages/TreeChildren/treeChildren.vue b/src/components/TreeChildren/treeChildren.vue
similarity index 100%
rename from packages/TreeChildren/treeChildren.vue
rename to src/components/TreeChildren/treeChildren.vue
diff --git a/packages/Window/interface.ts b/src/components/Window/interface.ts
similarity index 100%
rename from packages/Window/interface.ts
rename to src/components/Window/interface.ts
diff --git a/packages/Window/window.vue b/src/components/Window/window.vue
similarity index 100%
rename from packages/Window/window.vue
rename to src/components/Window/window.vue
diff --git a/packages/index.ts b/src/components/index.ts
similarity index 69%
rename from packages/index.ts
rename to src/components/index.ts
index 363b7a1b4ae3571f273d5c212314f589f158a1c7..7b76b01db256bb01e8d529ba2da73c941a43e0d2 100644
--- a/packages/index.ts
+++ b/src/components/index.ts
@@ -1,4 +1,3 @@
-import { App } from 'vue';
 import PuiButton from './Button/button.vue';
 import PuiTag from './Tag/tag.vue';
 import PuiIcon from './Icon/icon.vue';
@@ -31,51 +30,6 @@ import PuiWindow from './Window/window.vue';
 import PuiTable from './Table/table.vue';
 import PuiDropdown from './Dropdown/dropdown.vue';
 import PuiInputNumber from './Input-number/inputNumber.vue';
-// 所有组件列表
-const components: any[] = [
-  PuiButton,
-  PuiIcon,
-  PuiSvg,
-  PuiSwitch,
-  PuiSelector,
-  PuiPopper,
-  PuiInput,
-  PuiSearch,
-  PuiCheckbox,
-  PuiRadio,
-  PuiRadioGroup,
-  PuiTag,
-  PuiTabs,
-  PuiTab,
-  PuiDialog,
-  PuiTree,
-  PuiCascader,
-  PuiTreeChildren,
-  PuiCollapse,
-  PuiDrawer,
-  PuiSlider,
-  PuiToolbar,
-  PuiAside,
-  PuiContainer,
-  PuiHeader,
-  PuiFooter,
-  PuiMain,
-  PuiColorPicker,
-  PuiWindow,
-  PuiTable,
-  PuiDropdown,
-  PuiInputNumber,
-];
-
-// 定义 install 方法， App 作为参数
-const install = (app: App): void => {
-  // 遍历注册所有组件
-  components.map((component) => {
-    app.component(component.name as string, component);
-  });
-
-  // components.map((component) => app.component(component, component))
-};
 
 export {
   PuiButton,
@@ -111,7 +65,3 @@ export {
   PuiDropdown,
   PuiInputNumber,
 };
-
-export default {
-  install,
-};
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d6f1909cc437ffb9704328f31a4a2db7317bdefd
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,16 @@
+import * as coms from './components';
+import '../examples/common/style.scss';
+
+//自动化导入组件
+let components = [];
+for (let name in coms) {
+  components.push(coms[name]);
+}
+
+const install = (app: any) => {
+  components.map((item) => {
+    app.component(item.name, item);
+  });
+};
+
+export default { install };
diff --git a/stores/index.ts b/stores/index.ts
deleted file mode 100644
index 64cf8fec3b1b6a807deec900dfac8af42af9cd4b..0000000000000000000000000000000000000000
--- a/stores/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createStore } from 'vuex';
-export default createStore({
-  state: {
-    theme: 'light',
-  },
-});
diff --git a/stores/modules/global.ts b/stores/modules/global.ts
new file mode 100644
index 0000000000000000000000000000000000000000..217df0cae0331e627c118bc570751141ec97ff68
--- /dev/null
+++ b/stores/modules/global.ts
@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia';
+
+const globalState = defineStore('globalState', {
+  state: () => ({
+    theme: 'light',
+  }),
+  getters: {},
+});
+
+export default globalState;
diff --git a/tsconfig.json b/tsconfig.json
index d5818f757d4a9412010123bf201e6e0558968f2f..a0c90b761726473384e0ce3e0fd2f46aed65170b 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,53 +1,73 @@
 {
+  /* 根选项 */
+  /* 项目选项 */
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "moduleResolution": "node",
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "useDefineForClassFields": true,
-    "sourceMap": true,
-    "baseUrl": ".",
     "types": [
-      "webpack-env"
+      "vitest/globals"
     ],
+    "target": "ES6", // 目标语言的版本
+    "module": "ES2020", // 生成代码的模板标准
+    "lib": [
+      "DOM",
+      "ES5",
+      "ES6",
+      "ES7",
+      "ScriptHost"
+    ], // TS需要引用的库
+    "outDir": "./dist", // 指定输出目录
+    "rootDir": "./", // 指定输出文件目录(用于输出)，用于控制输出目录结构
+    "allowJs": true, // 允许编译器编译JS，JSX文件
+    "checkJs": true, // 允许在JS文件中报错，通常与allowJS一起使用
+    "removeComments": true, // 删除注释
+    "esModuleInterop": true, // 允许export=导出，由import from 导入
+    "useDefineForClassFields": true,
+    "moduleResolution": "Node",
+    "jsx": "preserve",
+    "sourceMap": true,
+    "isolatedModules": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "baseUrl": "./",
     "paths": {
-      "~/*": [
-        "packages/*"
-      ],
       "@/*": [
-        "examples/*"
+        "src/*"
       ]
     },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ],
-    "allowJs": true,
-    "checkJs": true
+    /* 严格检查选项 */
+    "strict": false, // 开启所有严格的类型检查
+    "alwaysStrict": true, // 在代码中注入'use strict'
+    "noImplicitAny": true, // 不允许隐式的any类型
+    "noImplicitThis": true, // 不允许this有隐式的any类型
+    "strictNullChecks": true, // 不允许把null、undefined赋值给其他类型的变量
+    "strictBindCallApply": true, // 严格的bind/call/apply检查
+    "strictFunctionTypes": true, // 不允许函数参数双向协变
+    "strictPropertyInitialization": true, // 类的实例属性必须初始化
+    /* 额外检查 */
+    "noUnusedLocals": true, //是否检查未使用的局部变量
+    "noUnusedParameters": false, //是否检查未使用的参数
+    "noImplicitReturns": true, //检查函数是否不含有隐式返回值
+    "noImplicitOverride": true, //是否检查子类继承自基类时，其重载的函数命名与基类的函数不同步问题
+    "noFallthroughCasesInSwitch": true, //检查switch中是否含有case没有使用break跳出
+    "noUncheckedIndexedAccess": true, //是否通过索引签名来描述对象上有未知键但已知值的对象
+    "noPropertyAccessFromIndexSignature": true, //是否通过" . “(obj.key) 语法访问字段和"索引”( obj[“key”])， 以及在类型中声明属性的方式之间的一致性
+    /* 实验选项 */
+    "experimentalDecorators": true, //是否启用对装饰器的实验性支持，装饰器是一种语言特性，还没有完全被 JavaScript 规范批准
+    "emitDecoratorMetadata": true, //为装饰器启用对发出类型元数据的实验性支持
+    /* 高级选项 */
+    "forceConsistentCasingInFileNames": true, //是否区分文件系统大小写规则
+    "extendedDiagnostics": false, //是否查看 TS 在编译时花费的时间
+    "noEmitOnError": true, //有错误时不进行编译
+    "resolveJsonModule": true //是否解析 JSON 模块
   },
   "include": [
-    "examples/**/*.scss",
-    "examples/iconfont",
-    "examples/**/*.css",
-    "examples/**/*.ts",
-    "examples/**/*.tsx",
-    "examples/**/*.vue",
-    "packages/**/*.ts",
-    "packages/**/*.tsx",
-    "packages/**/*.vue",
-    "typings/**/*.ts",
-    "tests/**/*.ts",
-    "tests/**/*.tsx",
-    "README.md"
-  ],
-  "exclude": [
-    "node_modules"
+    "src/**/*.ts",
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "src/**/*.d.js",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "**/*.ts",
+    "**/*.js",
+    "**/*.tsx"
   ]
-}
+}
\ No newline at end of file
diff --git a/typings/shims-vue.d.ts b/typings/shims-vue.d.ts
deleted file mode 100644
index 7093a1ec2efa6758efdcc958fdb4e3612f79e0f7..0000000000000000000000000000000000000000
--- a/typings/shims-vue.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-disable */
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-
-interface BaseOptions {
-  label: string,
-  value: string | number,
-  children?: BaseOptions[]
-}
\ No newline at end of file
diff --git a/utils/util.ts b/utils/util.ts
deleted file mode 100644
index e35722d382ee89f24b07aa73571c8125f771cb1c..0000000000000000000000000000000000000000
--- a/utils/util.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export const formattedValue = (num: number | string, min?: number, max?: number, precision?: number) => {
-  let value = Number(num);
-  if (isNaN(value)) {
-    return '';
-  }
-  if (min && value < min) {
-    value = min;
-  }
-  if (max && value > max) {
-    value = max;
-  }
-  if (precision !== undefined) {
-    return value.toFixed(precision);
-  }
-  return value.toString();
-};
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1bf6a5ffe8e38f114031d8e55dd499e004ac985c
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,42 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path, { resolve } from 'path';
+
+export default defineConfig({
+  server: {
+    port: 3001,
+    host: '0.0.0.0',
+  },
+  build: {
+    emptyOutDir: true,
+    target: 'modules',
+    outDir: 'lib',
+    minify: false,
+    sourcemap: true,
+    cssCodeSplit: false,
+    lib: {
+      entry: path.resolve(__dirname, './src/index.ts'),
+      name: 'PhotUi',
+      fileName: 'index',
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+  plugins: [vue()],
+  resolve: {
+    alias: [
+      // 配置 @ 指代 src
+      {
+        find: '@',
+        replacement: resolve(__dirname, './src'),
+      },
+    ],
+  },
+});
diff --git a/vue.config.js b/vue.config.js
deleted file mode 100644
index 0ab6658edab3b35663cf35a23d86eb51b907a88f..0000000000000000000000000000000000000000
--- a/vue.config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-const path = require('path');
-module.exports = {
-  // 修改 pages 入口
-  pages: {
-    index: {
-      entry: 'examples/main.ts', //入口
-      template: 'public/index.html', //模板
-      filename: 'index.html', //输出文件
-    },
-  },
-  // 扩展 webpack 配置
-  chainWebpack: (config) => {
-    // 新增一个 ~ 指向 packages 目录, 方便示例代码中使用
-    config.resolve.alias.set('~', path.resolve('packages'));
-    config.resolve.alias.set('@', path.resolve('examples'));
-    globalSass(config);
-  },
-};
-
-const globalSass = (config) => {
-  const oneOfsMap = config.module.rule('scss').oneOfs.store;
-  oneOfsMap.forEach((item) => {
-    item
-      .use('sass-resources-loader')
-      .loader('sass-resources-loader')
-      .options({
-        resources: './examples/common/style.scss', //相对路径
-      })
-      .end();
-  });
-};