Change demo import stdf path

demo/src/App.svelte

@@ -2,9 +2,9 @@
     import { setContext, onMount } from 'svelte';
     import Router, { querystring, location, push } from 'svelte-spa-router';
     import { routes, routes_en } from './route';
-    import { NavBar, Icon } from '../../components';
-    import zh_CN from '../../components/lang/zh_CN';
-    import en_US from '../../components/lang/en_US';
+    import { NavBar, Icon } from '../../packages/stdf';
+    import zh_CN from '../../packages/stdf/lang/zh_CN';
+    import en_US from '../../packages/stdf/lang/en_US';
     import menuList from './data/menuList';
 
     // 循环 menuList，将所有元素的 childs 组成一个数组

demo/src/pages/actionSheet/ActionSheetDemo.svelte

@@ -1,6 +1,6 @@
 <!-- ActionSheet Demo -->
 <script>
-    import { Cell, ActionSheet, Toast } from '../../../../components';
+    import { Cell, ActionSheet, Toast } from '../../../../packages/stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/actionSheet/ActionSheetDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- ActionSheet Demo -->
 <script>
-    import { Cell, ActionSheet, Toast } from '../../../../components';
+    import { Cell, ActionSheet, Toast } from '../../../../packages/stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/asyncPicker/AsyncPickerDemo.svelte

@@ -1,6 +1,6 @@
 <!-- AsyncPicker Demo -->
 <script>
-    import { AsyncPicker, Cell } from '../../../../components';
+    import { AsyncPicker, Cell } from '../../../../packages/stdf';
     // 为避免 Demo 页面杂乱，具体参考数据放在 data.js 文件内，可查看此页面底部注释。
     import { linkageData, linkageDiffLabeData } from './data';
 

demo/src/pages/asyncPicker/AsyncPickerDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- AsyncPicker Demo -->
 <script>
-    import { AsyncPicker, Cell } from '../../../../components';
+    import { AsyncPicker, Cell } from '../../../../packages/stdf';
     // In order to avoid the messy Demo page, the specific reference data is placed in the data.js file, and you can view the bottom of the page.
     import { linkageData, linkageDiffLabeData } from './data_en';
 

demo/src/pages/avatar/AvatarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Avatar Demo -->
 <script>
-    import { Avatar } from '../../../../components';
+    import { Avatar } from '../../../../packages/stdf';
 
     const icons = [
         { icon: { name: 'ri-aliens-fill', theme: true, top: -1, size: 16 }, size: 'xs' },

demo/src/pages/avatar/AvatarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Avatar Demo -->
 <script>
-    import { Avatar } from '../../../../components';
+    import { Avatar } from '../../../../packages/stdf';
 
     const icons = [
         { icon: { name: 'ri-aliens-fill', theme: true, top: -1, size: 16 }, size: 'xs' },

demo/src/pages/badge/BadgeDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Badge Demo -->
 <script>
-    import { Badge, Avatar, Button, Icon, Input, Cell } from '../../../../components';
+    import { Badge, Avatar, Button, Icon, Input, Cell } from '../../../../packages/stdf';
 
     let isShow = true;
     const changeShowFun = () => {

demo/src/pages/badge/BadgeDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Badge Demo -->
 <script>
-    import { Badge, Avatar, Button, Icon, Input, Cell } from '../../../../components';
+    import { Badge, Avatar, Button, Icon, Input, Cell } from '../../../../packages/stdf';
 
     let isShow = true;
     const changeShowFun = () => {

demo/src/pages/bottomSheet/BottomSheetDemo.svelte

@@ -1,7 +1,7 @@
 <!-- BottomSheet Demo -->
 <script>
-    import { BottomSheet, Cell, Toast, Button } from '../../../../components';
-    import Aphorism from '../../components/Aphorism.svelte';
+    import { BottomSheet, Cell, Toast, Button } from '../../../../packages/stdf';
+    import Aphorism from '../../packages/stdf/Aphorism.svelte';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/bottomSheet/BottomSheetDemo_en.svelte

@@ -1,7 +1,7 @@
 <!-- BottomSheet Demo -->
 <script>
-    import { BottomSheet, Cell, Toast, Button } from '../../../../components';
-    import Aphorism from '../../components/Aphorism.svelte';
+    import { BottomSheet, Cell, Toast, Button } from '../../../../packages/stdf';
+    import Aphorism from '../../packages/stdf/Aphorism.svelte';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/button/ButtonDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Button Demo -->
 <script>
-    import { Button, Icon, Toast, Loading } from '../../../../components';
+    import { Button, Icon, Toast, Loading } from '../../../../packages/stdf';
 
     let visible = false;
 </script>

demo/src/pages/button/ButtonDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Button Demo -->
 <script>
-    import { Button, Icon, Toast, Loading } from '../../../../components';
+    import { Button, Icon, Toast, Loading } from '../../../../packages/stdf';
 
     let visible = false;
 </script>

demo/src/pages/calendar/CalendarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Calendar Demo -->
 <script>
-    import { Cell, Calendar } from '../../../../components';
+    import { Cell, Calendar } from '../../../../packages/stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/calendar/CalendarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Calendar Demo -->
 <script>
-    import { Cell, Calendar } from '../../../../components';
+    import { Cell, Calendar } from '../../../../packages/stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/cell/CellDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Cell Demo -->
 <script>
-    import { Cell, CellGroup, Toast } from '../../../../components';
+    import { Cell, CellGroup, Toast } from '../../../../packages/stdf';
 
     let visible = false;
 </script>

demo/src/pages/cell/CellDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Cell Demo -->
 <script>
-    import { Cell, CellGroup, Toast } from '../../../../components';
+    import { Cell, CellGroup, Toast } from '../../../../packages/stdf';
 
     let visible = false;
 </script>

demo/src/pages/checkbox/CheckboxDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Checkbox Demo -->
 <script>
-    import { CheckboxGroup, Checkbox, Divider, Button } from '../../../../components';
+    import { CheckboxGroup, Checkbox, Divider, Button } from '../../../../packages/stdf';
     import { onMount } from 'svelte';
     import { quintOut } from 'svelte/easing';
     import { crossfade } from 'svelte/transition';

demo/src/pages/checkbox/CheckboxDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Checkbox Demo -->
 <script>
-    import { CheckboxGroup, Checkbox, Divider, Button } from '../../../../components';
+    import { CheckboxGroup, Checkbox, Divider, Button } from '../../../../packages/stdf';
     import { onMount } from 'svelte';
     import { quintOut } from 'svelte/easing';
     import { crossfade } from 'svelte/transition';

demo/src/pages/dialog/DialogDemo.svelte

@@ -1,7 +1,7 @@
 <!-- Dialog Demo -->
 <script>
-    import { Dialog, Cell, Toast, Loading } from '../../../../components';
-    import Aphorism from '../../components/Aphorism.svelte';
+    import { Dialog, Cell, Toast, Loading } from '../../../../packages/stdf';
+    import Aphorism from '../../packages/stdf/Aphorism.svelte';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/dialog/DialogDemo_en.svelte

@@ -1,7 +1,7 @@
 <!-- Dialog Demo -->
 <script>
-    import { Dialog, Cell, Toast, Loading } from '../../../../components';
-    import Aphorism from '../../components/Aphorism.svelte';
+    import { Dialog, Cell, Toast, Loading } from '../../../../packages/stdf';
+    import Aphorism from '../../packages/stdf/Aphorism.svelte';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/divider/DividerDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Divider Demo -->
 <script>
-    import { Divider } from '../../../../components';
+    import { Divider } from '../../../../packages/stdf';
 </script>
 
 <div class="flex flex-col space-y-8 py-8">

demo/src/pages/divider/DividerDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Divider Demo -->
 <script>
-    import { Divider } from '../../../../components';
+    import { Divider } from '../../../../packages/stdf';
 </script>
 
 <div class="flex flex-col space-y-8 py-8 text-left">

demo/src/pages/grids/GridsDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Grids Demo -->
 <script>
-    import { Grids, Grid, Placeholder, Switch, Icon, Button } from '../../../../components';
+    import { Grids, Grid, Placeholder, Switch, Icon, Button } from '../../../../packages/stdf';
 
     let devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
     let curentIndex = 0;

demo/src/pages/grids/GridsDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Grids Demo -->
 <script>
-    import { Grids, Grid, Placeholder, Switch, Icon, Button } from '../../../../components';
+    import { Grids, Grid, Placeholder, Switch, Icon, Button } from '../../../../packages/stdf';
 
     let devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
     let curentIndex = 0;

demo/src/pages/home/Home.svelte

@@ -1,6 +1,6 @@
 <script>
     import { push } from 'svelte-spa-router';
-    import { Cell, CellGroup } from '../../../../components';
+    import { Cell, CellGroup } from '../../../../packages/stdf';
     import menuList from '../../data/menuList';
 
     // 循环 menuList，将所有元素的 childs 组成一个数组

demo/src/pages/icon/IconDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Icon Demo，请确保已引入 symbol.svg 文件。 -->
 <script>
-    import { Icon } from '../../../../components';
+    import { Icon } from '../../../../packages/stdf';
 
     const icons = ['ri-spy-fill', 'ri-chrome-fill', 'ri-riding-line', 'ri-switch-fill'];
 </script>

demo/src/pages/icon/IconDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Icon Demo, Please make sure you have been introduced symbol.svg file. -->
 <script>
-    import { Icon } from '../../../../components';
+    import { Icon } from '../../../../packages/stdf';
 
     const icons = ['ri-spy-fill', 'ri-chrome-fill', 'ri-riding-line', 'ri-switch-fill'];
 </script>

demo/src/pages/indexBar/IndexBarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- IndexBar Demo -->
 <script>
-    import { IndexBar, Button, Toast } from '../../../../components';
+    import { IndexBar, Button, Toast } from '../../../../packages/stdf';
 
     const addressList = [
         { index: 'A', title: 'A', child: [{ text: '澳门' }, { text: '安宁' }, { text: '安庆' }, { text: '鞍山' }] },

demo/src/pages/indexBar/IndexBarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- IndexBar Demo -->
 <script>
-    import { IndexBar, Button, Toast } from '../../../../components';
+    import { IndexBar, Button, Toast } from '../../../../packages/stdf';
 
     const addressList = [
         { index: 'A', title: 'A', child: [{ text: 'Macau' }, { text: 'Anning' }, { text: 'Anqing' }, { text: 'Anshan' }] },

demo/src/pages/input/InputDemo.svelte

@@ -1,7 +1,7 @@
 <!-- Input Demo -->
 <script>
     import { getContext } from 'svelte';
-    import { Input, Button, Icon, Toast } from '../../../../components';
+    import { Input, Button, Icon, Toast } from '../../../../packages/stdf';
 
     let value = '初始文本';
     let visible = false;

demo/src/pages/input/InputDemo_en.svelte

@@ -1,7 +1,7 @@
 <!-- Input Demo -->
 <script>
     import { getContext } from 'svelte';
-    import { Input, Button, Icon, Toast } from '../../../../components';
+    import { Input, Button, Icon, Toast } from '../../../../packages/stdf';
 
     let value = 'Init text';
     let visible = false;

demo/src/pages/loading/LoadingDemo.svelte

@@ -1,6 +1,6 @@
 <!--Loading Demo-->
 <script>
-    import { Loading, Tabs, TabContent, Button } from '../../../../components';
+    import { Loading, Tabs, TabContent, Button } from '../../../../packages/stdf';
 
     //传入个数，返回随机生成的颜色数组
     const randomColorArr = num => {

demo/src/pages/loading/LoadingDemo_en.svelte

@@ -1,6 +1,6 @@
 <!--Loading Demo-->
 <script>
-    import { Loading, Tabs, TabContent, Button } from '../../../../components';
+    import { Loading, Tabs, TabContent, Button } from '../../../../packages/stdf';
 
     //Input the number and return an array of randomly generated colors
     const randomColorArr = num => {

demo/src/pages/mask/MaskDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Mask Demo -->
 <script>
-    import { Mask, Toast, Cell, Button, Popup } from '../../../../components';
+    import { Mask, Toast, Cell, Button, Popup } from '../../../../packages/stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/mask/MaskDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Mask Demo -->
 <script>
-    import { Mask, Toast, Cell, Button, Popup } from '../../../../components';
+    import { Mask, Toast, Cell, Button, Popup } from '../../../../packages/stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/modal/ModalDemo.svelte

@@ -1,7 +1,7 @@
 <!-- Modal Demo -->
 <script>
-    import { Modal, Cell, Toast } from '../../../../components';
-    import Aphorism from '../../components/Aphorism.svelte';
+    import { Modal, Cell, Toast } from '../../../../packages/stdf';
+    import Aphorism from '../../packages/stdf/Aphorism.svelte';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/modal/ModalDemo_en.svelte

@@ -1,7 +1,7 @@
 <!-- Modal Demo -->
 <script>
-    import { Modal, Cell, Toast } from '../../../../components';
-    import Aphorism from '../../components/Aphorism.svelte';
+    import { Modal, Cell, Toast } from '../../../../packages/stdf';
+    import Aphorism from '../../packages/stdf/Aphorism.svelte';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/navBar/NavBarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- NavBar Demo -->
 <script>
-    import { NavBar, Icon, Toast } from '../../../../components';
+    import { NavBar, Icon, Toast } from '../../../../packages/stdf';
 
     const icons1 = [{ name: 'ri-paint-brush-line', theme: true }, { name: 'ri-share-line' }];
     const icons2 = [{ name: 'ri-command-line' }, { name: 'ri-drag-move-line' }];

demo/src/pages/navBar/NavBarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- NavBar Demo -->
 <script>
-    import { NavBar, Icon, Toast } from '../../../../components';
+    import { NavBar, Icon, Toast } from '../../../../packages/stdf';
 
     const icons1 = [{ name: 'ri-paint-brush-line', theme: true }, { name: 'ri-share-line' }];
     const icons2 = [{ name: 'ri-command-line' }, { name: 'ri-drag-move-line' }];

demo/src/pages/noticeBar/NoticeBarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- NoticeBar Demo -->
 <script>
-    import {NoticeBar, Toast} from '../../../../components';
+    import {NoticeBar, Toast} from '../../../../packages/stdf';
 
     let textList = ['1. 这是第一条通告内容！', '2. 这是第二条通告内容！'];
     let textLongList = ['1. 这条通告超长长长长长长长长长长长长长长长长长长长长长！', '2. 这是第二条通告内容！'];

demo/src/pages/noticeBar/NoticeBarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- NoticeBar Demo -->
 <script>
-    import {NoticeBar, Toast} from '../../../../components';
+    import {NoticeBar, Toast} from '../../../../packages/stdf';
 
     let textList = ['1. This is the first announcement!', '2. This is the second notice!'];
     let textLongList = ['1. This message long, long, long, long, long, long, long, long, long, long, long, long, long!', '2. This is the second notice!'];

demo/src/pages/pagination/PaginationDemo.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount } from 'svelte';
-    import { Pagination, Loading } from '../../../../components';
+    import { Pagination, Loading } from '../../../../packages/stdf';
     import aphorisms from '../../data/aphorisms';
 
     // 总数，一般是后端接口返回

demo/src/pages/pagination/PaginationDemo_en.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount } from 'svelte';
-    import { Pagination, Loading } from '../../../../components';
+    import { Pagination, Loading } from '../../../../packages/stdf';
     import aphorisms from '../../data/aphorisms';
 
     // total data number, generally, the back-end interface returns

demo/src/pages/picker/PickerDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Picker Demo -->
 <script>
-    import { Picker, Cell } from '../../../../components';
+    import { Picker, Cell } from '../../../../packages/stdf';
     // 为避免 Demo 页面杂乱，具体参考数据放在 data.js 文件内，可查看此页面底部注释。
     import {
         someProvinceList,

demo/src/pages/picker/PickerDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Picker Demo -->
 <script>
-    import { Picker, Cell } from '../../../../components';
+    import { Picker, Cell } from '../../../../packages/stdf';
     // In order to avoid the messy Demo page, the specific reference data is placed in the data.js file, and you can view the bottom of the page.
     import {
         someProvinceList,

demo/src/pages/placeholder/PlaceholderDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Placeholder Demo -->
 <script>
-    import { Placeholder, Grids, Grid } from '../../../../components';
+    import { Placeholder, Grids, Grid } from '../../../../packages/stdf';
 </script>
 
 <div class="m-4 font-bold text-lg">基础用法</div>

demo/src/pages/placeholder/PlaceholderDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Placeholder Demo -->
 <script>
-    import { Placeholder, Grids, Grid } from '../../../../components';
+    import { Placeholder, Grids, Grid } from '../../../../packages/stdf';
 </script>
 
 <div class="m-4 font-bold text-lg">Basic usage</div>

demo/src/pages/popup/PopupDemo.svelte

@@ -1,7 +1,7 @@
 <!-- Popup Demo -->
 <script>
-    import { Cell, Popup, Button, Icon } from '../../../../components';
-    import Aphorism from '../../components/Aphorism.svelte';
+    import { Cell, Popup, Button, Icon } from '../../../../packages/stdf';
+    import Aphorism from '../../packages/stdf/Aphorism.svelte';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/popup/PopupDemo_en.svelte

@@ -1,7 +1,7 @@
 <!-- Popup Demo -->
 <script>
-    import { Cell, Popup, Button, Icon } from '../../../../components';
-    import Aphorism from '../../components/Aphorism.svelte';
+    import { Cell, Popup, Button, Icon } from '../../../../packages/stdf';
+    import Aphorism from '../../packages/stdf/Aphorism.svelte';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/progress/ProgressDemo.svelte

@@ -1,6 +1,6 @@
 <!--Progress Demo-->
 <script>
-    import { Progress, Button } from '../../../../components';
+    import { Progress, Button } from '../../../../packages/stdf';
 
     let percent = 20;
     const changePercentFun = type => {

demo/src/pages/progress/ProgressDemo_en.svelte

@@ -1,6 +1,6 @@
 <!--Progress Demo-->
 <script>
-    import { Progress, Button } from '../../../../components';
+    import { Progress, Button } from '../../../../packages/stdf';
 
     let percent = 20;
     const changePercentFun = type => {

demo/src/pages/progressLoop/ProgressLoopDemo.svelte

@@ -1,6 +1,6 @@
 <!--ProgressLoop Demo-->
 <script>
-    import { ProgressLoop, Button } from '../../../../components';
+    import { ProgressLoop, Button } from '../../../../packages/stdf';
 
     let percent = 20;
     const changePercentFun = type => {

demo/src/pages/progressLoop/ProgressLoopDemo_en.svelte

@@ -1,6 +1,6 @@
 <!--ProgressLoop Demo-->
 <script>
-    import { ProgressLoop, Button } from '../../../../components';
+    import { ProgressLoop, Button } from '../../../../packages/stdf';
 
     let percent = 20;
     const changePercentFun = type => {

demo/src/pages/radio/RadioDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Radio Demo -->
 <script>
-    import { RadioGroup, Radio, Divider, Button } from '../../../../components';
+    import { RadioGroup, Radio, Divider, Button } from '../../../../packages/stdf';
 
     const dota = [
         { label: '主宰', name: '奶棒人', desc: '主宰是一个近战敏捷英雄，他能够迅速切入战斗。' },

demo/src/pages/radio/RadioDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Radio Demo -->
 <script>
-    import { RadioGroup, Radio, Divider, Button } from '../../../../components';
+    import { RadioGroup, Radio, Divider, Button } from '../../../../packages/stdf';
 
     const dota = [
         { label: 'Jugg', name: 'Juggernaut', desc: 'The master is a melee agile hero, and he can quickly cut into the battle.' },

demo/src/pages/rate/RateDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Rate Demo -->
 <script>
-    import {Rate, Icon} from '../../../../components';
+    import {Rate, Icon} from '../../../../packages/stdf';
 
     let value = 2.5;
     const getValueFun = e => {

demo/src/pages/rate/RateDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Rate Demo -->
 <script>
-    import {Rate, Icon} from '../../../../components';
+    import {Rate, Icon} from '../../../../packages/stdf';
 
     let value = 2.5;
     const getValueFun = e => {

demo/src/pages/skeleton/SkeletonDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Skeleton Demo -->
 <script>
-    import { Skeleton } from '../../../../components';
+    import { Skeleton } from '../../../../packages/stdf';
 </script>
 
 <div class="p-2">

demo/src/pages/skeleton/SkeletonDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Skeleton Demo -->
 <script>
-    import { Skeleton } from '../../../../components';
+    import { Skeleton } from '../../../../packages/stdf';
 </script>
 
 <div class="p-2">

demo/src/pages/slider/SliderDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Slider Demo -->
 <script>
-    import { Slider, Icon } from '../../../../components';
+    import { Slider, Icon } from '../../../../packages/stdf';
 
     let value = 20;
     const onChangeFun = e => {

demo/src/pages/slider/SliderDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Slider Demo -->
 <script>
-    import { Slider, Icon } from '../../../../components';
+    import { Slider, Icon } from '../../../../packages/stdf';
 
     let value = 20;
     const onChangeFun = e => {

demo/src/pages/steps/StepsDemo.svelte

@@ -1,6 +1,6 @@
 <!--Steps Demo -->
 <script>
-    import { Steps, Button, Divider } from '../../../../components';
+    import { Steps, Button, Divider } from '../../../../packages/stdf';
     import injCom1 from './injCom1.svelte';
     import injCom2 from './injCom2.svelte';
 
@@ -274,7 +274,7 @@
 
 <!-- injCom2.svelte -->
 <!-- <script>
-    import { Button, Icon, Avatar } from '../../../../components';
+    import { Button, Icon, Avatar } from '../../../../packages/stdf';
 </script>
 
 <div class="text-primary dark:text-dark text-sm">此处以组件形式注入一些内容</div>

demo/src/pages/steps/StepsDemo_en.svelte

@@ -1,6 +1,6 @@
 <!--Steps Demo -->
 <script>
-    import { Steps, Button, Divider } from '../../../../components';
+    import { Steps, Button, Divider } from '../../../../packages/stdf';
     import injCom1 from './injCom1_en.svelte';
     import injCom2 from './injCom2_en.svelte';
 
@@ -277,7 +277,7 @@
 <!-- injCom2.svelte -->
 <!-- 
 <script>
-    import { Button, Icon, Avatar } from '../../../../components';
+    import { Button, Icon, Avatar } from '../../../../packages/stdf';
 </script>
 
 <div class="text-primary dark:text-dark text-sm">Here you inject something in the form of a component</div>

demo/src/pages/steps/injCom2.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Button, Icon, Avatar } from '../../../../components';
+    import { Button, Icon, Avatar } from '../../../../packages/stdf';
 </script>
 
 <div class="text-primary dark:text-dark text-sm">此处以组件形式注入一些内容</div>

demo/src/pages/steps/injCom2_en.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Button, Icon, Avatar } from '../../../../components';
+    import { Button, Icon, Avatar } from '../../../../packages/stdf';
 </script>
 
 <div class="text-primary dark:text-dark text-sm">Here you inject something in the form of a component</div>

demo/src/pages/swiper/Item.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Button, Avatar } from '../../../../components';
+    import { Button, Avatar } from '../../../../packages/stdf';
 </script>
 
 <div class="flex flex-col space-y-4 items-center">

demo/src/pages/swiper/Item_en.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Button, Avatar } from '../../../../components';
+    import { Button, Avatar } from '../../../../packages/stdf';
 </script>
 
 <div class="flex flex-col space-y-4 items-center">

demo/src/pages/swiper/SwiperDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Swiper Demo -->
 <script>
-    import { Swiper } from '../../../../components';
+    import { Swiper } from '../../../../packages/stdf';
     import Item from './Item.svelte';
 
     const data = [
@@ -298,7 +298,7 @@
 
 <!-- Item.svelte -->
 <!-- <script>
-    import { Button, Avatar } from '../../../../components';
+    import { Button, Avatar } from '../../../../packages/stdf';
 </script>
 
 <div class="flex flex-col space-y-4 items-center">

demo/src/pages/swiper/SwiperDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Swiper Demo -->
 <script>
-    import { Swiper } from '../../../../components';
+    import { Swiper } from '../../../../packages/stdf';
     import Item from './Item_en.svelte';
 
     const data = [
@@ -299,7 +299,7 @@
 <!-- Item.svelte -->
 <!-- 
 <script>
-    import { Button, Avatar } from '../../../../components';
+    import { Button, Avatar } from '../../../../packages/stdf';
 </script>
 
 <div class="flex flex-col space-y-4 items-center">

demo/src/pages/switch/SwitchDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Switch Demo -->
 <script>
-    import { Switch, Icon, Cell, Dialog } from '../../../../components';
+    import { Switch, Icon, Cell, Dialog } from '../../../../packages/stdf';
 
     let checkAsync = false;
     const switchClickFun = () => {

demo/src/pages/switch/SwitchDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Switch Demo -->
 <script>
-    import { Switch, Icon, Cell, Dialog } from '../../../../components';
+    import { Switch, Icon, Cell, Dialog } from '../../../../packages/stdf';
 
     let checkAsync = false;
     const switchClickFun = () => {

demo/src/pages/tabBar/TabBarDemo.svelte

@@ -1,6 +1,6 @@
 <!-- TabBar Demo -->
 <script>
-    import {TabBar} from '../../../../components';
+    import {TabBar} from '../../../../packages/stdf';
 
     const labels = [
         {text: '首页', icon: {name: 'ri-home-3-line', size: 20}, activeIcon: {name: 'ri-home-3-fill', size: 20}},

demo/src/pages/tabBar/TabBarDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- TabBar Demo -->
 <script>
-    import {TabBar} from '../../../../components';
+    import {TabBar} from '../../../../packages/stdf';
 
     const labels = [
         {text: 'Home', icon: {name: 'ri-home-3-line', size: 20}, activeIcon: {name: 'ri-home-3-fill', size: 20}},

demo/src/pages/tabs/TabsDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Tabs Demo -->
 <script>
-    import {Tabs, Tab, TabContent, Divider} from '../../../../components';
+    import {Tabs, Tab, TabContent, Divider} from '../../../../packages/stdf';
     import {fly} from 'svelte/transition';
 
     const labels = [{text: '飞机'}, {text: '轮船'}, {text: '火车'}, {text: '汽车'}];

demo/src/pages/tabs/TabsDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Tabs Demo -->
 <script>
-    import { Tabs, Tab, TabContent, Divider } from '../../../../components';
+    import { Tabs, Tab, TabContent, Divider } from '../../../../packages/stdf';
     import { fly } from 'svelte/transition';
 
     const labels = [{ text: 'aircraft' }, { text: 'steamer' }, { text: 'train' }, { text: 'car' }];

demo/src/pages/timePicker/TimePickerDemo.svelte

@@ -1,6 +1,6 @@
 <!-- TimePickerDemo Demo -->
 <script>
-    import { Cell, TimePicker } from '../../../../components';
+    import { Cell, TimePicker } from '../../../../packages/stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/timePicker/TimePickerDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- TimePickerDemo Demo -->
 <script>
-    import { Cell, TimePicker } from '../../../../components';
+    import { Cell, TimePicker } from '../../../../packages/stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/toast/ToastDemo.svelte

@@ -1,6 +1,6 @@
 <!-- Toast Demo -->
 <script>
-    import { Toast, Cell, Button, Loading } from '../../../../components';
+    import { Toast, Cell, Button, Loading } from '../../../../packages/stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/toast/ToastDemo_en.svelte

@@ -1,6 +1,6 @@
 <!-- Toast Demo -->
 <script>
-    import { Toast, Cell, Button, Loading } from '../../../../components';
+    import { Toast, Cell, Button, Loading } from '../../../../packages/stdf';
 
     let visible1 = false;
     let visible2 = false;

demo/src/pages/z/Z copy.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Swiper, Cell, Steps } from '../../../../components';
+    import { Swiper, Cell, Steps } from '../../../../packages/stdf';
 
     const imgs = [
         { type: 'img', url: './assets/images/wall_1.jpg' },

demo/src/pages/z/Z.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Swiper, Cell, Button, Progress, Divider } from '../../../../components';
+    import { Swiper, Cell, Button, Progress, Divider } from '../../../../packages/stdf';
 
     const imgs = [
         { type: 'img', url: './assets/images/wall_1.jpg' },