Przeglądaj źródła

添加底部tabber栏,对接订单接口

yangg 1 rok temu
rodzic
commit
555b290d48

+ 40 - 35
src/App.vue

@@ -1,54 +1,59 @@
 <template>
-    <div
-        class="main-section antialiased relative font-nunito text-sm font-normal "
-        :class="[store.sidebar ? 'toggle-sidebar' : '', store.menu, store.layout, store.rtlClass]"
-    >
+    <div class="main-section antialiased relative font-nunito text-sm font-normal "
+        :class="[store.sidebar ? 'toggle-sidebar' : '', store.menu, store.layout, store.rtlClass]">
         <component v-bind:is="mainLayout"></component>
-        <div class="relative inline-flex align-middle fixed-bottom button-group">
-  <button type="button" @click="godashbord" class="btn btn-dark ltr:rounded-r-none rtl:rounded-l-none">Left</button>
-  <button type="button" @click="golist" class="btn btn-dark rounded-none">Middle</button>
-  <button type="button" class="btn btn-dark ltr:rounded-l-none rtl:rounded-r-none">Right</button>
-</div>
+        <div class="absolute inline-flex align-middle fixed-bottom button-group">
+            <main-tab-bar></main-tab-bar>
+           <!--  <button type="button" @click="godashbord"
+                class="btn btn-dark ltr:rounded-r-none rtl:rounded-l-none">Left</button>
+            <button type="button" @click="golist" class="btn btn-dark rounded-none">Middle</button>
+            <button type="button" class="btn btn-dark ltr:rounded-l-none rtl:rounded-r-none">Right</button> -->
+        </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-    import { computed } from 'vue';
+import { computed } from 'vue';
+import MainTabBar from './components/taber/mainTaberItem.vue';
+import appLayout from '@/layouts/app-layout.vue';
+import authLayout from '@/layouts/auth-layout.vue';
 
-    import appLayout from '@/layouts/app-layout.vue';
-    import authLayout from '@/layouts/auth-layout.vue';
+import { useAppStore } from '@/stores/index';
+import { useMeta } from '@/composables/use-meta';
+import router from '@/router';
 
-    import { useAppStore } from '@/stores/index';
-    import { useMeta } from '@/composables/use-meta';
-    import router from '@/router';
+const store = useAppStore();
 
-    const store = useAppStore();
-
-   const godashbord=()=>{
-        router.push(({path:'/apps/applist'}))
-    }
+const godashbord = () => {
+    router.push(({ path: '/apps/applist' }))
+}
 
-    const golist=()=>{
-        router.push(({path:'/'}))
-    }
-    // meta
-    useMeta({ title: 'Sales Admin' });
+const golist = () => {
+    router.push(({ path: '/' }))
+}
+// meta
+useMeta({ title: 'Sales Admin' });
 
-    const mainLayout = computed(() => {
-        return store.mainLayout === 'auth' ? authLayout : appLayout;
-    });
+const mainLayout = computed(() => {
+    return store.mainLayout === 'auth' ? authLayout : appLayout;
+});
 </script>
 <style>
 .button-group {
     position: sticky;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  z-index: 1000; /* 确保按钮组在其他内容之上 */
-  background-color: #000; /* 可选:为按钮组添加背景色 */
-  width: 100%; /* 确保按钮组横跨整个视口的宽度 */
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    z-index: 1000;
+    /* 确保按钮组在其他内容之上 */
+    background-color: #000;
+    /* 可选:为按钮组添加背景色 */
+    width: 100%;
+    /* 确保按钮组横跨整个视口的宽度 */
 }
+
 .btn {
-  margin: 0.5rem; /* 为按钮添加一些外边距 */
+    margin: 0.5rem;
+    /* 为按钮添加一些外边距 */
 }
 </style>

+ 6 - 6
src/api/api.ts

@@ -9,24 +9,24 @@ export class UserService {       // 模块一
      * @param {string} username - 用户名
      * @return {HttpResponse} result
      */
-    static async login1(uuid) {   // 接口一
+    static async login1(uuid) {   // 获取验证码
         return  `http://192.168.8.103:9999/captchas/${uuid}/LOGIN?rmd=${new Date().getTime()}`
     }
-    static async login(params) {   // 接口二
+    static async login(params) {   // 登录
         params.password = Md5.hashStr(params.password)
         return request('/admin/systems/admin-users/login', params, 'get')
     }
-    static async login3(params) {   // 接口三
+    static async login3(params) {  
         return request('/login', params, 'post')
     }
 }
 
-export class landRelevant {     // 模块二
+export class orderApi {     // 订单接口
     /**
      * @description 获取地列表
      * @return {HttpResponse} result
      */
-    static async landList(params) {
-        return request('/land_list_info', params, 'get')
+    static async orderList(params) {
+        return request('/admin/erp/order', params, 'get')
     }
 }

BIN
src/assets/images/u34.png


BIN
src/assets/images/u36.png


BIN
src/assets/images/u38.png


BIN
src/assets/images/u40.png


BIN
src/assets/images/u42.png


+ 75 - 0
src/components/taber/mainTaberItem.vue

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <tab-bar>
+            <tab-bar-item path="/" activeColor="purple">
+                <template v-slot:item-icon>
+                    <img src="../../assets/images/u34.png" class="w-auto h-auto" alt="">
+                </template>
+                <template v-slot:item-icon-active>
+                    <img src="../../assets/images/u34.png" class="w-auto h-auto" alt="">
+                </template>
+                <template v-slot:item-text>
+                    <div>首页</div>
+                </template>
+            </tab-bar-item>
+            <tab-bar-item path="/apps/order" activeColor="purple">
+                <template v-slot:item-icon>
+                    <img src="../../assets/images/u36.png" alt="">
+                </template>
+                <template v-slot:item-icon-active>
+                    <img src="../../assets/images/u36.png" alt="">
+                </template>
+                <template v-slot:item-text>
+                    <div>订单</div>
+                </template>
+            </tab-bar-item>
+            <tab-bar-item path="/profile" activeColor="purple">
+                <template v-slot:item-icon>
+                    <img src="../../assets/images/u40.png" alt="">
+                </template>
+                <template v-slot:item-icon-active>
+                    <img src="../../assets/images/u40.png" alt="">
+                </template>
+                <template v-slot:item-text>
+                    <div>调拨</div>
+                </template>
+            </tab-bar-item>
+            <tab-bar-item path="/cart" activeColor="purple">
+                <template v-slot:item-icon>
+                    <img src="../../assets/images/u42.png" alt="">
+                </template>
+                <template v-slot:item-icon-active>
+                    <img src="../../assets/images/u42.png" alt="">
+                </template>
+                <template v-slot:item-text>
+                    <div>出入库</div>
+                </template>
+            </tab-bar-item>
+            <tab-bar-item path="/index" activeColor="purple">
+                <template v-slot:item-icon>
+                    <img src="../../assets/images/u38.png" alt="">
+                </template>
+                <template v-slot:item-icon-active>
+                    <img src="../../assets/images/u38.png" alt="">
+                </template>
+                <template v-slot:item-text>
+                    <div>盘点</div>
+                </template>
+            </tab-bar-item>
+        </tab-bar>
+    </div>
+</template>
+
+<script lang="ts">
+import TabBar from './taber.vue'
+import TabBarItem from './taberItem.vue'
+export default {
+    name: "MainTabBar",
+    components: {
+        TabBar,
+        TabBarItem
+    }
+}
+</script>
+
+<style></style>

+ 14 - 0
src/components/taber/taber.vue

@@ -0,0 +1,14 @@
+<template>  
+    <div id="tab-bar">
+      <slot></slot>
+    </div>
+</template>
+<script>
+export default {
+    name:'TabBar'
+}
+</script>
+
+<style>
+
+</style>

+ 93 - 0
src/components/taber/taberItem.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="tab-bar-item" @click="itemClick">
+        <div v-if="!isActive">
+            <slot name="item-icon"></slot>
+        </div>
+        <div v-else>
+            <slot name="item-icon-active"></slot>
+        </div>
+        <div :style="activeStyle">
+            <slot name="item-text"></slot>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: "TabBarItem",
+    props: {
+        path: String,
+        activeColor: {
+            type: String,
+            default: 'red'
+        }
+    },
+    data() {
+        return {
+            // isActive:true
+        }
+    },
+    computed: {
+        isActive() {
+            // 使用严格匹配来确定活动状态
+            return this.$route.path === this.path;
+        },
+        activeStyle() {
+            return this.isActive ? { color: this.activeColor } : {};
+        }
+    },
+    watch: {
+        // 监听路由变化,确保组件能够更新
+        '$route.path'() {
+            this.$forceUpdate(); // 强制组件重新渲染
+        }
+    },
+    methods: {
+        itemClick() {
+            this.$router.replace(this.path)
+            
+        }
+    }
+
+}
+</script>
+
+<style>
+#tab-bar {
+    display: flex;
+
+}
+
+#tab-bar {
+    background-color: #fff;
+    border-top: 2px #ccc;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    box-shadow: 0px -1px 1px rgba(100, 100, 100, .2);
+}
+
+.tab-bar-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    text-align: center;
+    height: 55px;
+    font-size: 14px;
+}
+
+.tab-bar-item img {
+    width:30px;
+    height:30px;
+    margin-top: 3px;
+    vertical-align: middle;
+    margin-bottom: 3px;
+}
+
+.active {
+    color: red;
+}
+</style>

+ 5 - 0
src/router/index.ts

@@ -265,6 +265,11 @@ const routes: RouteRecordRaw[] = [
         },
         component: () => import(/* webpackChunkName: "forms-clipboard" */ '../views/auth/cover-password-reset.vue'),
     },
+    {
+        path: '/:pathMatch(.*)*', // Vue Router v4 的通配符路径
+        name: 'not-found',
+        redirect: '/' // 重定向到首页,你也可以重定向到一个专门的404页面
+    }
 
 ];
 

+ 514 - 523
src/views/apps/order.vue

@@ -1,34 +1,24 @@
 <template>
     <div>
-
-        
-        <ul class="flex space-x-2 rtl:space-x-reverse">
+        <!--   <ul class="flex space-x-2 rtl:space-x-reverse">
             <li>
                 <a href="javascript:;" class="text-primary hover:underline">首页</a>
             </li>
             <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
                 <span>订单列表</span>
             </li>
-       
-
-      
-        </ul>
-                
-              
-                   
-                
+        </ul> -->
 
         <div class="panel pb-0 mt-6">
-            
+
             <div class="flex md:items-center md:flex-row flex-col mb-5 gap-5">
-              
+
                 <div class="flex items-center gap-5 ltr:ml-auto rtl:mr-auto">
                     <div class="dropdown">
-                        <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="0" class="align-middle">
-                            <button
-                                type="button"
-                                class="flex items-center border font-semibold border-[#e0e6ed] dark:border-[#253b5c] rounded-md px-4 py-2 text-sm dark:bg-[#1b2e4b] dark:text-white-dark"
-                            >
+                        <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="0"
+                            class="align-middle">
+                            <button type="button"
+                                class="flex items-center border font-semibold border-[#e0e6ed] dark:border-[#253b5c] rounded-md px-4 py-2 text-sm dark:bg-[#1b2e4b] dark:text-white-dark">
                                 <span class="ltr:mr-1 rtl:ml-1">Columns</span>
                                 <icon-caret-down class="w-5 h-5" />
                             </button>
@@ -38,15 +28,11 @@
                                         <li>
                                             <div class="flex items-center px-4 py-1">
                                                 <label class="cursor-pointer mb-0">
-                                                    <input
-                                                        type="checkbox"
-                                                        class="form-checkbox"
-                                                        :id="`chk-${i}`"
-                                                        :value="col.field"
-                                                        @change="col.hide = !$event.target.checked"
-                                                        :checked="!col.hide"
-                                                    />
-                                                    <span :for="`chk-${i}`" class="ltr:ml-2 rtl:mr-2">{{ col.title }}</span>
+                                                    <input type="checkbox" class="form-checkbox" :id="`chk-${i}`"
+                                                        :value="col.field" @change="col.hide = !$event.target.checked"
+                                                        :checked="!col.hide" />
+                                                    <span :for="`chk-${i}`" class="ltr:ml-2 rtl:mr-2">{{ col.title
+                                                        }}</span>
                                                 </label>
                                             </div>
                                         </li>
@@ -62,23 +48,18 @@
             </div>
 
             <div class="datatable">
-                <vue3-datatable
-                    :rows="rows"
-                    :columns="cols"
-                    :totalRows="rows?.length"
-                    :sortable="true"
-                    :search="search"
+                <vue3-datatable :rows="rows" :columns="cols" :totalRows="rows?.length" :sortable="true" :search="search"
                     skin="whitespace-nowrap bh-table-hover"
                     firstArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
                     lastArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> '
                     previousArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
-                    nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'
-                >
+                    nextArrow='<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"> <path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>'>
                     <template #dob="data">
-                        {{ formatDate(data.value.dob) }}
+                        {{ formatDate(data._rawValue.order_time) }}
                     </template>
                     <template #isActive="data">
-                        <span class="capitalize" :class="data.value.isActive ? 'text-success' : 'text-danger'">{{ data.value.isActive }}</span>
+                        <span class="capitalize" :class="data.value.isActive ? 'text-success' : 'text-danger'">{{
+                            data._rawValue }}</span>
                     </template>
                 </vue3-datatable>
             </div>
@@ -86,543 +67,553 @@
     </div>
 </template>
 <script setup lang="ts">
-    import { ref } from 'vue';
-    import Vue3Datatable from '@bhplugin/vue3-datatable';
-    import { useAppStore } from '@/stores/index';
-    import { useMeta } from '@/composables/use-meta';
+import { ref, onMounted } from 'vue';
+import Vue3Datatable from '@bhplugin/vue3-datatable';
+import { useAppStore } from '@/stores/index';
+import { useMeta } from '@/composables/use-meta';
+import { orderApi } from '@/api/api'
+import IconBell from '@/components/icon/icon-bell.vue';
+import IconCaretDown from '@/components/icon/icon-caret-down.vue';
 
-    import IconBell from '@/components/icon/icon-bell.vue';
-    import IconCaretDown from '@/components/icon/icon-caret-down.vue';
-   
 
-    useMeta({ title: 'Column Chooser Table' });
-    const store = useAppStore();
-    const search = ref('');
-    const cols =
-        ref([
-            { field: 'id', title: 'ID', isUnique: true, hide: false },
-            { field: 'firstName', title: 'First Name', hide: false },
-            { field: 'lastName', title: 'Last Name', hide: false },
-            { field: 'email', title: 'Email', hide: false },
-            { field: 'phone', title: 'Phone', hide: false },
-            { field: 'company', title: 'Company', hide: false },
-            { field: 'address.street', title: 'Address', hide: false },
-            { field: 'age', title: 'Age', type: 'number', hide: true },
-            { field: 'dob', title: 'Birthdate', type: 'date', hide: true },
-            { field: 'isActive', title: 'Active', type: 'bool', hide: true },
-        ]) || [];
-    const rows = ref(
-        [
-            {
-                id: 1,
-                firstName: 'Caroline',
-                lastName: 'Jensen',
-                email: 'carolinejensen@zidant.com',
-                dob: '2004-05-28',
-                address: {
-                    street: '529 Scholes Street',
-                    city: 'Temperanceville',
-                    zipcode: 5235,
-                    geo: {
-                        lat: 23.806115,
-                        lng: 164.677197,
-                    },
+useMeta({ title: 'Column Chooser Table' });
+const store = useAppStore();
+const search = ref('');
+const rows = ref([]); // 初始化rows为响应式引用
+const cols = ref([
+    { field: 'sn', title: '订单编号', isUnique: true, hide: false },
+    { field: 'member_id', title: '客户', hide: false },
+    { field: 'order_time', title: '下单时间', hide: false },
+    { field: 'warehouse_id', title: '仓库名称', hide: false },
+    { field: 'send_type', title: '配送方式', hide: false },
+    { field: 'pay_type', title: '付款方式', hide: false },
+    { field: 'pay_price', title: '实付金额', hide: false },
+    { field: 'status', title: '订单状态', type: '', hide: true },
+    { field: 'extension', title: '延期次数', type: '', hide: true },
+    { field: 'type', title: '订单类型', type: '', hide: true },
+]);
+/* const rows = ref(
+    [
+        {
+            id: 1,
+            firstName: 'Caroline',
+            lastName: 'Jensen',
+            email: 'carolinejensen@zidant.com',
+            dob: '2004-05-28',
+            address: {
+                street: '529 Scholes Street',
+                city: 'Temperanceville',
+                zipcode: 5235,
+                geo: {
+                    lat: 23.806115,
+                    lng: 164.677197,
                 },
-                phone: '+1 (821) 447-3782',
-                isActive: true,
-                age: 39,
-                company: 'POLARAX',
             },
-            {
-                id: 2,
-                firstName: 'Celeste',
-                lastName: 'Grant',
-                email: 'celestegrant@polarax.com',
-                dob: '1989-11-19',
-                address: {
-                    street: '639 Kimball Street',
-                    city: 'Bascom',
-                    zipcode: 8907,
-                    geo: {
-                        lat: 65.954483,
-                        lng: 98.906478,
-                    },
+            phone: '+1 (821) 447-3782',
+            isActive: true,
+            age: 39,
+            company: 'POLARAX',
+        },
+        {
+            id: 2,
+            firstName: 'Celeste',
+            lastName: 'Grant',
+            email: 'celestegrant@polarax.com',
+            dob: '1989-11-19',
+            address: {
+                street: '639 Kimball Street',
+                city: 'Bascom',
+                zipcode: 8907,
+                geo: {
+                    lat: 65.954483,
+                    lng: 98.906478,
                 },
-                phone: '+1 (838) 515-3408',
-                isActive: false,
-                age: 32,
-                company: 'MANGLO',
             },
-            {
-                id: 3,
-                firstName: 'Tillman',
-                lastName: 'Forbes',
-                email: 'tillmanforbes@manglo.com',
-                dob: '2016-09-05',
-                address: {
-                    street: '240 Vandalia Avenue',
-                    city: 'Thynedale',
-                    zipcode: 8994,
-                    geo: {
-                        lat: -34.949388,
-                        lng: -82.958111,
-                    },
+            phone: '+1 (838) 515-3408',
+            isActive: false,
+            age: 32,
+            company: 'MANGLO',
+        },
+        {
+            id: 3,
+            firstName: 'Tillman',
+            lastName: 'Forbes',
+            email: 'tillmanforbes@manglo.com',
+            dob: '2016-09-05',
+            address: {
+                street: '240 Vandalia Avenue',
+                city: 'Thynedale',
+                zipcode: 8994,
+                geo: {
+                    lat: -34.949388,
+                    lng: -82.958111,
                 },
-                phone: '+1 (969) 496-2892',
-                isActive: false,
-                age: 26,
-                company: 'APPLIDECK',
             },
-            {
-                id: 4,
-                firstName: 'Daisy',
-                lastName: 'Whitley',
-                email: 'daisywhitley@applideck.com',
-                dob: '1987-03-23',
-                address: {
-                    street: '350 Pleasant Place',
-                    city: 'Idledale',
-                    zipcode: 9369,
-                    geo: {
-                        lat: -54.458809,
-                        lng: -127.476556,
-                    },
+            phone: '+1 (969) 496-2892',
+            isActive: false,
+            age: 26,
+            company: 'APPLIDECK',
+        },
+        {
+            id: 4,
+            firstName: 'Daisy',
+            lastName: 'Whitley',
+            email: 'daisywhitley@applideck.com',
+            dob: '1987-03-23',
+            address: {
+                street: '350 Pleasant Place',
+                city: 'Idledale',
+                zipcode: 9369,
+                geo: {
+                    lat: -54.458809,
+                    lng: -127.476556,
                 },
-                phone: '+1 (861) 564-2877',
-                isActive: true,
-                age: 21,
-                company: 'VOLAX',
             },
-            {
-                id: 5,
-                firstName: 'Weber',
-                lastName: 'Bowman',
-                email: 'weberbowman@volax.com',
-                dob: '1983-02-24',
-                address: {
-                    street: '154 Conway Street',
-                    city: 'Broadlands',
-                    zipcode: 8131,
-                    geo: {
-                        lat: 54.501351,
-                        lng: -167.47138,
-                    },
+            phone: '+1 (861) 564-2877',
+            isActive: true,
+            age: 21,
+            company: 'VOLAX',
+        },
+        {
+            id: 5,
+            firstName: 'Weber',
+            lastName: 'Bowman',
+            email: 'weberbowman@volax.com',
+            dob: '1983-02-24',
+            address: {
+                street: '154 Conway Street',
+                city: 'Broadlands',
+                zipcode: 8131,
+                geo: {
+                    lat: 54.501351,
+                    lng: -167.47138,
                 },
-                phone: '+1 (962) 466-3483',
-                isActive: false,
-                age: 26,
-                company: 'ORBAXTER',
             },
-            {
-                id: 6,
-                firstName: 'Buckley',
-                lastName: 'Townsend',
-                email: 'buckleytownsend@orbaxter.com',
-                dob: '2011-05-29',
-                address: {
-                    street: '131 Guernsey Street',
-                    city: 'Vallonia',
-                    zipcode: 6779,
-                    geo: {
-                        lat: -2.681655,
-                        lng: 3.528942,
-                    },
+            phone: '+1 (962) 466-3483',
+            isActive: false,
+            age: 26,
+            company: 'ORBAXTER',
+        },
+        {
+            id: 6,
+            firstName: 'Buckley',
+            lastName: 'Townsend',
+            email: 'buckleytownsend@orbaxter.com',
+            dob: '2011-05-29',
+            address: {
+                street: '131 Guernsey Street',
+                city: 'Vallonia',
+                zipcode: 6779,
+                geo: {
+                    lat: -2.681655,
+                    lng: 3.528942,
                 },
-                phone: '+1 (884) 595-2643',
-                isActive: true,
-                age: 40,
-                company: 'OPPORTECH',
             },
-            {
-                id: 7,
-                firstName: 'Latoya',
-                lastName: 'Bradshaw',
-                email: 'latoyabradshaw@opportech.com',
-                dob: '2010-11-23',
-                address: {
-                    street: '668 Lenox Road',
-                    city: 'Lowgap',
-                    zipcode: 992,
-                    geo: {
-                        lat: 36.026423,
-                        lng: 130.412198,
-                    },
+            phone: '+1 (884) 595-2643',
+            isActive: true,
+            age: 40,
+            company: 'OPPORTECH',
+        },
+        {
+            id: 7,
+            firstName: 'Latoya',
+            lastName: 'Bradshaw',
+            email: 'latoyabradshaw@opportech.com',
+            dob: '2010-11-23',
+            address: {
+                street: '668 Lenox Road',
+                city: 'Lowgap',
+                zipcode: 992,
+                geo: {
+                    lat: 36.026423,
+                    lng: 130.412198,
                 },
-                phone: '+1 (906) 474-3155',
-                isActive: true,
-                age: 24,
-                company: 'GORGANIC',
             },
-            {
-                id: 8,
-                firstName: 'Kate',
-                lastName: 'Lindsay',
-                email: 'katelindsay@gorganic.com',
-                dob: '1987-07-02',
-                address: {
-                    street: '773 Harrison Avenue',
-                    city: 'Carlton',
-                    zipcode: 5909,
-                    geo: {
-                        lat: 42.464724,
-                        lng: -12.948403,
-                    },
+            phone: '+1 (906) 474-3155',
+            isActive: true,
+            age: 24,
+            company: 'GORGANIC',
+        },
+        {
+            id: 8,
+            firstName: 'Kate',
+            lastName: 'Lindsay',
+            email: 'katelindsay@gorganic.com',
+            dob: '1987-07-02',
+            address: {
+                street: '773 Harrison Avenue',
+                city: 'Carlton',
+                zipcode: 5909,
+                geo: {
+                    lat: 42.464724,
+                    lng: -12.948403,
                 },
-                phone: '+1 (930) 546-2952',
-                isActive: true,
-                age: 24,
-                company: 'AVIT',
             },
-            {
-                id: 9,
-                firstName: 'Marva',
-                lastName: 'Sandoval',
-                email: 'marvasandoval@avit.com',
-                dob: '2010-11-02',
-                address: {
-                    street: '200 Malta Street',
-                    city: 'Tuskahoma',
-                    zipcode: 1292,
-                    geo: {
-                        lat: -52.206169,
-                        lng: 74.19452,
-                    },
+            phone: '+1 (930) 546-2952',
+            isActive: true,
+            age: 24,
+            company: 'AVIT',
+        },
+        {
+            id: 9,
+            firstName: 'Marva',
+            lastName: 'Sandoval',
+            email: 'marvasandoval@avit.com',
+            dob: '2010-11-02',
+            address: {
+                street: '200 Malta Street',
+                city: 'Tuskahoma',
+                zipcode: 1292,
+                geo: {
+                    lat: -52.206169,
+                    lng: 74.19452,
                 },
-                phone: '+1 (927) 566-3600',
-                isActive: false,
-                age: 28,
-                company: 'QUILCH',
             },
-            {
-                id: 10,
-                firstName: 'Decker',
-                lastName: 'Russell',
-                email: 'deckerrussell@quilch.com',
-                dob: '1994-04-21',
-                address: {
-                    street: '708 Bath Avenue',
-                    city: 'Coultervillle',
-                    zipcode: 1268,
-                    geo: {
-                        lat: -41.550295,
-                        lng: -146.598075,
-                    },
+            phone: '+1 (927) 566-3600',
+            isActive: false,
+            age: 28,
+            company: 'QUILCH',
+        },
+        {
+            id: 10,
+            firstName: 'Decker',
+            lastName: 'Russell',
+            email: 'deckerrussell@quilch.com',
+            dob: '1994-04-21',
+            address: {
+                street: '708 Bath Avenue',
+                city: 'Coultervillle',
+                zipcode: 1268,
+                geo: {
+                    lat: -41.550295,
+                    lng: -146.598075,
                 },
-                phone: '+1 (846) 535-3283',
-                isActive: false,
-                age: 27,
-                company: 'MEMORA',
             },
-            {
-                id: 11,
-                firstName: 'Odom',
-                lastName: 'Mills',
-                email: 'odommills@memora.com',
-                dob: '2010-01-24',
-                address: {
-                    street: '907 Blake Avenue',
-                    city: 'Churchill',
-                    zipcode: 4400,
-                    geo: {
-                        lat: -56.061694,
-                        lng: -130.238523,
-                    },
+            phone: '+1 (846) 535-3283',
+            isActive: false,
+            age: 27,
+            company: 'MEMORA',
+        },
+        {
+            id: 11,
+            firstName: 'Odom',
+            lastName: 'Mills',
+            email: 'odommills@memora.com',
+            dob: '2010-01-24',
+            address: {
+                street: '907 Blake Avenue',
+                city: 'Churchill',
+                zipcode: 4400,
+                geo: {
+                    lat: -56.061694,
+                    lng: -130.238523,
                 },
-                phone: '+1 (995) 525-3402',
-                isActive: true,
-                age: 34,
-                company: 'ZORROMOP',
             },
-            {
-                id: 12,
-                firstName: 'Sellers',
-                lastName: 'Walters',
-                email: 'sellerswalters@zorromop.com',
-                dob: '1975-11-12',
-                address: {
-                    street: '978 Oakland Place',
-                    city: 'Gloucester',
-                    zipcode: 3802,
-                    geo: {
-                        lat: 11.732587,
-                        lng: 96.118099,
-                    },
+            phone: '+1 (995) 525-3402',
+            isActive: true,
+            age: 34,
+            company: 'ZORROMOP',
+        },
+        {
+            id: 12,
+            firstName: 'Sellers',
+            lastName: 'Walters',
+            email: 'sellerswalters@zorromop.com',
+            dob: '1975-11-12',
+            address: {
+                street: '978 Oakland Place',
+                city: 'Gloucester',
+                zipcode: 3802,
+                geo: {
+                    lat: 11.732587,
+                    lng: 96.118099,
                 },
-                phone: '+1 (830) 430-3157',
-                isActive: true,
-                age: 28,
-                company: 'ORBOID',
             },
-            {
-                id: 13,
-                firstName: 'Wendi',
-                lastName: 'Powers',
-                email: 'wendipowers@orboid.com',
-                dob: '1979-06-02',
-                address: {
-                    street: '376 Greenpoint Avenue',
-                    city: 'Elliott',
-                    zipcode: 9149,
-                    geo: {
-                        lat: -78.159578,
-                        lng: -9.835103,
-                    },
+            phone: '+1 (830) 430-3157',
+            isActive: true,
+            age: 28,
+            company: 'ORBOID',
+        },
+        {
+            id: 13,
+            firstName: 'Wendi',
+            lastName: 'Powers',
+            email: 'wendipowers@orboid.com',
+            dob: '1979-06-02',
+            address: {
+                street: '376 Greenpoint Avenue',
+                city: 'Elliott',
+                zipcode: 9149,
+                geo: {
+                    lat: -78.159578,
+                    lng: -9.835103,
                 },
-                phone: '+1 (863) 457-2088',
-                isActive: true,
-                age: 31,
-                company: 'SNORUS',
             },
-            {
-                id: 14,
-                firstName: 'Sophie',
-                lastName: 'Horn',
-                email: 'sophiehorn@snorus.com',
-                dob: '2018-09-20',
-                address: {
-                    street: '343 Doughty Street',
-                    city: 'Homestead',
-                    zipcode: 330,
-                    geo: {
-                        lat: 65.484087,
-                        lng: 137.413998,
-                    },
+            phone: '+1 (863) 457-2088',
+            isActive: true,
+            age: 31,
+            company: 'SNORUS',
+        },
+        {
+            id: 14,
+            firstName: 'Sophie',
+            lastName: 'Horn',
+            email: 'sophiehorn@snorus.com',
+            dob: '2018-09-20',
+            address: {
+                street: '343 Doughty Street',
+                city: 'Homestead',
+                zipcode: 330,
+                geo: {
+                    lat: 65.484087,
+                    lng: 137.413998,
                 },
-                phone: '+1 (885) 418-3948',
-                isActive: true,
-                age: 22,
-                company: 'XTH',
             },
-            {
-                id: 15,
-                firstName: 'Levine',
-                lastName: 'Rodriquez',
-                email: 'levinerodriquez@xth.com',
-                dob: '1973-02-08',
-                address: {
-                    street: '643 Allen Avenue',
-                    city: 'Weedville',
-                    zipcode: 8931,
-                    geo: {
-                        lat: -63.185586,
-                        lng: 117.327808,
-                    },
+            phone: '+1 (885) 418-3948',
+            isActive: true,
+            age: 22,
+            company: 'XTH',
+        },
+        {
+            id: 15,
+            firstName: 'Levine',
+            lastName: 'Rodriquez',
+            email: 'levinerodriquez@xth.com',
+            dob: '1973-02-08',
+            address: {
+                street: '643 Allen Avenue',
+                city: 'Weedville',
+                zipcode: 8931,
+                geo: {
+                    lat: -63.185586,
+                    lng: 117.327808,
                 },
-                phone: '+1 (999) 565-3239',
-                isActive: true,
-                age: 27,
-                company: 'COMTRACT',
             },
-            {
-                id: 16,
-                firstName: 'Little',
-                lastName: 'Hatfield',
-                email: 'littlehatfield@comtract.com',
-                dob: '2012-01-03',
-                address: {
-                    street: '194 Anthony Street',
-                    city: 'Williston',
-                    zipcode: 7456,
-                    geo: {
-                        lat: 47.480837,
-                        lng: 6.085909,
-                    },
+            phone: '+1 (999) 565-3239',
+            isActive: true,
+            age: 27,
+            company: 'COMTRACT',
+        },
+        {
+            id: 16,
+            firstName: 'Little',
+            lastName: 'Hatfield',
+            email: 'littlehatfield@comtract.com',
+            dob: '2012-01-03',
+            address: {
+                street: '194 Anthony Street',
+                city: 'Williston',
+                zipcode: 7456,
+                geo: {
+                    lat: 47.480837,
+                    lng: 6.085909,
                 },
-                phone: '+1 (812) 488-3011',
-                isActive: false,
-                age: 33,
-                company: 'ZIDANT',
             },
-            {
-                id: 17,
-                firstName: 'Larson',
-                lastName: 'Kelly',
-                email: 'larsonkelly@zidant.com',
-                dob: '2010-06-14',
-                address: {
-                    street: '978 Indiana Place',
-                    city: 'Innsbrook',
-                    zipcode: 639,
-                    geo: {
-                        lat: -71.766732,
-                        lng: 150.854345,
-                    },
+            phone: '+1 (812) 488-3011',
+            isActive: false,
+            age: 33,
+            company: 'ZIDANT',
+        },
+        {
+            id: 17,
+            firstName: 'Larson',
+            lastName: 'Kelly',
+            email: 'larsonkelly@zidant.com',
+            dob: '2010-06-14',
+            address: {
+                street: '978 Indiana Place',
+                city: 'Innsbrook',
+                zipcode: 639,
+                geo: {
+                    lat: -71.766732,
+                    lng: 150.854345,
                 },
-                phone: '+1 (892) 484-2162',
-                isActive: true,
-                age: 20,
-                company: 'SUREPLEX',
             },
-            {
-                id: 18,
-                firstName: 'Kendra',
-                lastName: 'Molina',
-                email: 'kendramolina@sureplex.com',
-                dob: '2002-07-19',
-                address: {
-                    street: '567 Charles Place',
-                    city: 'Kimmell',
-                    zipcode: 1966,
-                    geo: {
-                        lat: 50.765816,
-                        lng: -117.106499,
-                    },
+            phone: '+1 (892) 484-2162',
+            isActive: true,
+            age: 20,
+            company: 'SUREPLEX',
+        },
+        {
+            id: 18,
+            firstName: 'Kendra',
+            lastName: 'Molina',
+            email: 'kendramolina@sureplex.com',
+            dob: '2002-07-19',
+            address: {
+                street: '567 Charles Place',
+                city: 'Kimmell',
+                zipcode: 1966,
+                geo: {
+                    lat: 50.765816,
+                    lng: -117.106499,
                 },
-                phone: '+1 (920) 528-3330',
-                isActive: false,
-                age: 31,
-                company: 'DANJA',
             },
-            {
-                id: 19,
-                firstName: 'Ebony',
-                lastName: 'Livingston',
-                email: 'ebonylivingston@danja.com',
-                dob: '1994-10-18',
-                address: {
-                    street: '284 Cass Place',
-                    city: 'Navarre',
-                    zipcode: 948,
-                    geo: {
-                        lat: 65.271256,
-                        lng: -83.064729,
-                    },
+            phone: '+1 (920) 528-3330',
+            isActive: false,
+            age: 31,
+            company: 'DANJA',
+        },
+        {
+            id: 19,
+            firstName: 'Ebony',
+            lastName: 'Livingston',
+            email: 'ebonylivingston@danja.com',
+            dob: '1994-10-18',
+            address: {
+                street: '284 Cass Place',
+                city: 'Navarre',
+                zipcode: 948,
+                geo: {
+                    lat: 65.271256,
+                    lng: -83.064729,
                 },
-                phone: '+1 (970) 591-3039',
-                isActive: false,
-                age: 33,
-                company: 'EURON',
             },
-            {
-                id: 20,
-                firstName: 'Kaufman',
-                lastName: 'Rush',
-                email: 'kaufmanrush@euron.com',
-                dob: '2011-07-10',
-                address: {
-                    street: '408 Kingsland Avenue',
-                    city: 'Beaulieu',
-                    zipcode: 7911,
-                    geo: {
-                        lat: 41.513153,
-                        lng: 54.821641,
-                    },
+            phone: '+1 (970) 591-3039',
+            isActive: false,
+            age: 33,
+            company: 'EURON',
+        },
+        {
+            id: 20,
+            firstName: 'Kaufman',
+            lastName: 'Rush',
+            email: 'kaufmanrush@euron.com',
+            dob: '2011-07-10',
+            address: {
+                street: '408 Kingsland Avenue',
+                city: 'Beaulieu',
+                zipcode: 7911,
+                geo: {
+                    lat: 41.513153,
+                    lng: 54.821641,
                 },
-                phone: '+1 (924) 463-2934',
-                isActive: false,
-                age: 39,
-                company: 'ILLUMITY',
             },
-            {
-                id: 21,
-                firstName: 'Frank',
-                lastName: 'Hays',
-                email: 'frankhays@illumity.com',
-                dob: '2005-06-15',
-                address: {
-                    street: '973 Caton Place',
-                    city: 'Dargan',
-                    zipcode: 4104,
-                    geo: {
-                        lat: 63.314988,
-                        lng: -138.771323,
-                    },
+            phone: '+1 (924) 463-2934',
+            isActive: false,
+            age: 39,
+            company: 'ILLUMITY',
+        },
+        {
+            id: 21,
+            firstName: 'Frank',
+            lastName: 'Hays',
+            email: 'frankhays@illumity.com',
+            dob: '2005-06-15',
+            address: {
+                street: '973 Caton Place',
+                city: 'Dargan',
+                zipcode: 4104,
+                geo: {
+                    lat: 63.314988,
+                    lng: -138.771323,
                 },
-                phone: '+1 (930) 577-2670',
-                isActive: false,
-                age: 31,
-                company: 'SYBIXTEX',
             },
-            {
-                id: 22,
-                firstName: 'Carmella',
-                lastName: 'Mccarty',
-                email: 'carmellamccarty@sybixtex.com',
-                dob: '1980-03-06',
-                address: {
-                    street: '919 Judge Street',
-                    city: 'Canby',
-                    zipcode: 8283,
-                    geo: {
-                        lat: 9.198597,
-                        lng: -138.809971,
-                    },
+            phone: '+1 (930) 577-2670',
+            isActive: false,
+            age: 31,
+            company: 'SYBIXTEX',
+        },
+        {
+            id: 22,
+            firstName: 'Carmella',
+            lastName: 'Mccarty',
+            email: 'carmellamccarty@sybixtex.com',
+            dob: '1980-03-06',
+            address: {
+                street: '919 Judge Street',
+                city: 'Canby',
+                zipcode: 8283,
+                geo: {
+                    lat: 9.198597,
+                    lng: -138.809971,
                 },
-                phone: '+1 (876) 456-3218',
-                isActive: true,
-                age: 21,
-                company: 'ZEDALIS',
             },
-            {
-                id: 23,
-                firstName: 'Massey',
-                lastName: 'Owen',
-                email: 'masseyowen@zedalis.com',
-                dob: '2012-03-01',
-                address: {
-                    street: '108 Seaview Avenue',
-                    city: 'Slovan',
-                    zipcode: 3599,
-                    geo: {
-                        lat: -74.648318,
-                        lng: 99.620699,
-                    },
+            phone: '+1 (876) 456-3218',
+            isActive: true,
+            age: 21,
+            company: 'ZEDALIS',
+        },
+        {
+            id: 23,
+            firstName: 'Massey',
+            lastName: 'Owen',
+            email: 'masseyowen@zedalis.com',
+            dob: '2012-03-01',
+            address: {
+                street: '108 Seaview Avenue',
+                city: 'Slovan',
+                zipcode: 3599,
+                geo: {
+                    lat: -74.648318,
+                    lng: 99.620699,
                 },
-                phone: '+1 (917) 567-3786',
-                isActive: false,
-                age: 40,
-                company: 'DYNO',
             },
-            {
-                id: 24,
-                firstName: 'Lottie',
-                lastName: 'Lowery',
-                email: 'lottielowery@dyno.com',
-                dob: '1982-10-10',
-                address: {
-                    street: '557 Meserole Avenue',
-                    city: 'Fowlerville',
-                    zipcode: 4991,
-                    geo: {
-                        lat: 54.811546,
-                        lng: -20.996515,
-                    },
+            phone: '+1 (917) 567-3786',
+            isActive: false,
+            age: 40,
+            company: 'DYNO',
+        },
+        {
+            id: 24,
+            firstName: 'Lottie',
+            lastName: 'Lowery',
+            email: 'lottielowery@dyno.com',
+            dob: '1982-10-10',
+            address: {
+                street: '557 Meserole Avenue',
+                city: 'Fowlerville',
+                zipcode: 4991,
+                geo: {
+                    lat: 54.811546,
+                    lng: -20.996515,
                 },
-                phone: '+1 (912) 539-3498',
-                isActive: true,
-                age: 36,
-                company: 'MULTIFLEX',
             },
-            {
-                id: 25,
-                firstName: 'Addie',
-                lastName: 'Luna',
-                email: 'addieluna@multiflex.com',
-                dob: '1988-05-01',
-                address: {
-                    street: '688 Bulwer Place',
-                    city: 'Harmon',
-                    zipcode: 7664,
-                    geo: {
-                        lat: -12.762766,
-                        lng: -39.924497,
-                    },
+            phone: '+1 (912) 539-3498',
+            isActive: true,
+            age: 36,
+            company: 'MULTIFLEX',
+        },
+        {
+            id: 25,
+            firstName: 'Addie',
+            lastName: 'Luna',
+            email: 'addieluna@multiflex.com',
+            dob: '1988-05-01',
+            address: {
+                street: '688 Bulwer Place',
+                city: 'Harmon',
+                zipcode: 7664,
+                geo: {
+                    lat: -12.762766,
+                    lng: -39.924497,
                 },
-                phone: '+1 (962) 537-2981',
-                isActive: true,
-                age: 32,
-                company: 'PHARMACON',
             },
-        ] || []
-    );
+            phone: '+1 (962) 537-2981',
+            isActive: true,
+            age: 32,
+            company: 'PHARMACON',
+        },
+    ] || []
+); */
+
+const formatDate = (date) => {
+    if (date) {
+        const dt = new Date(date * 1000);
+        const month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
+        const day = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
+        return day + '/' + month + '/' + dt.getFullYear();
+    }
+    return '';
+};
+onMounted(() => {
+    getOrderList()
+});
+const getOrderList = async () => {
+    orderApi.orderList({ page_no: 1, page_size: 10 }).then((res:any) => {
+        rows.value = res.data.data; // 更新rows的值
+    });
+
+}
 
-    const formatDate = (date) => {
-        if (date) {
-            const dt = new Date(date);
-            const month = dt.getMonth() + 1 < 10 ? '0' + (dt.getMonth() + 1) : dt.getMonth() + 1;
-            const day = dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate();
-            return day + '/' + month + '/' + dt.getFullYear();
-        }
-        return '';
-    };
 </script>

+ 964 - 1015
src/views/charts.vue

@@ -1,45 +1,40 @@
 <template>
-    <div>
-        <ul class="flex space-x-2 rtl:space-x-reverse mb-6">
-            <li>
-                <a href="javascript:;" class="text-primary hover:underline">Dashboard</a>
-            </li>
-            <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
-                <span>Charts</span>
-            </li>
-        </ul>
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-            <div class="panel lg:col-span-2 p-3 flex items-center text-primary overflow-x-auto whitespace-nowrap">
-                <div class="ring-2 ring-primary/30 rounded-full bg-primary text-white p-1.5 ltr:mr-3 rtl:ml-3">
-                    <icon-bell />
-                </div>
-                <span class="ltr:mr-3 rtl:ml-3">Documentation: </span>
-                <a href="https://www.npmjs.com/package/vue3-apexcharts" target="_blank" class="block hover:underline"
-                    >https://www.npmjs.com/package/vue3-apexcharts</a
-                >
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white-light">Simple Line</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code1')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart
-                        height="300"
-                        :options="lineChart"
-                        :series="lineChartSeries"
-                        class="bg-white dark:bg-black rounded-lg overflow-hidden"
-                    ></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code1')">
-                    <highlight>
-                        <pre>
+  <div>
+    <ul class="flex space-x-2 rtl:space-x-reverse mb-6">
+      <li>
+        <a href="javascript:;" class="text-primary hover:underline">Dashboard</a>
+      </li>
+      <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
+        <span>Charts</span>
+      </li>
+    </ul>
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div class="panel lg:col-span-2 p-3 flex items-center text-primary overflow-x-auto whitespace-nowrap">
+        <div class="ring-2 ring-primary/30 rounded-full bg-primary text-white p-1.5 ltr:mr-3 rtl:ml-3">
+          <icon-bell />
+        </div>
+        <span class="ltr:mr-3 rtl:ml-3">Documentation: </span>
+        <a href="https://www.npmjs.com/package/vue3-apexcharts" target="_blank"
+          class="block hover:underline">https://www.npmjs.com/package/vue3-apexcharts</a>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white-light">Simple Line</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code1')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="lineChart" :series="lineChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code1')">
+          <highlight>
+            <pre>
 &lt;!-- simple line --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;lineChart&quot; :series=&quot;lineChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -98,33 +93,28 @@ const lineChartSeries = ref([
   },
 ]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Simple Area</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code2')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart
-                        height="300"
-                        :options="areaChart"
-                        :series="areaChartSeries"
-                        class="bg-white dark:bg-black rounded-lg overflow-hidden"
-                    ></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code2')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Simple Area</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code2')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="areaChart" :series="areaChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code2')">
+          <highlight>
+            <pre>
 &lt;!-- simple area --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;areaChart&quot; :series=&quot;areaChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -188,33 +178,28 @@ const areaChartSeries = ref([
   },
 ]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Simple Column</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code3')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart
-                        height="300"
-                        :options="columnChart"
-                        :series="columnChartSeries"
-                        class="bg-white dark:bg-black rounded-lg overflow-hidden"
-                    ></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code3')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Simple Column</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code3')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="columnChart" :series="columnChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code3')">
+          <highlight>
+            <pre>
 &lt;!-- simple column --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;columnChart&quot; :series=&quot;columnChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -292,33 +277,28 @@ const columnChartSeries = ref([
   },
 ]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Simple Column Stacked</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code4')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart
-                        height="300"
-                        :options="simpleColumnStacked"
-                        :series="simpleColumnStackedSeries"
-                        class="bg-white dark:bg-black rounded-lg overflow-hidden"
-                    ></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code4')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Simple Column Stacked</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code4')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="simpleColumnStacked" :series="simpleColumnStackedSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code4')">
+          <highlight>
+            <pre>
 &lt;!-- simple column stacked --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;simpleColumnStacked&quot; :series=&quot;simpleColumnStackedSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -402,28 +382,28 @@ const simpleColumnStackedSeries = ref([
   },
 ]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Simple Bar</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code5')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart height="300" :options="barChart" :series="barChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code5')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Simple Bar</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code5')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="barChart" :series="barChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code5')">
+          <highlight>
+            <pre>
 &lt;!-- simple bar --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;barChart&quot; :series=&quot;barChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -487,33 +467,28 @@ const barChartSeries = ref([
   },
 ]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Mixed</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code6')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart
-                        height="300"
-                        :options="mixedChart"
-                        :series="mixedChartSeries"
-                        class="bg-white dark:bg-black rounded-lg overflow-hidden"
-                    ></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code6')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Mixed</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code6')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="mixedChart" :series="mixedChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code6')">
+          <highlight>
+            <pre>
 &lt;!-- mixed --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;mixedChart&quot; :series=&quot;mixedChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -615,33 +590,28 @@ const mixedChartSeries = ref([
   },
 ]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Basic Radar</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code7')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart
-                        height="300"
-                        :options="radarChart"
-                        :series="radarChartSeries"
-                        class="bg-white dark:bg-black rounded-lg overflow-hidden"
-                    ></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code7')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Basic Radar</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code7')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="radarChart" :series="radarChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code7')">
+          <highlight>
+            <pre>
 &lt;!-- basic radar --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;radarChart&quot; :series=&quot;radarChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -690,28 +660,28 @@ const radarChartSeries = ref([
   },
 ]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Basic Pie</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code8')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart height="300" :options="pieChart" :series="pieChartSeries" class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code8')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Basic Pie</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code8')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="pieChart" :series="pieChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code8')">
+          <highlight>
+            <pre>
 &lt;!-- basic pie --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;pieChart&quot; :series=&quot;pieChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -757,33 +727,28 @@ const pieChart = computed(() =&gt; {
 
 const pieChartSeries = ref([44, 55, 13, 43, 22]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Basic Donut</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code9')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart
-                        height="300"
-                        :options="donutChart"
-                        :series="donutChartSeries"
-                        class="bg-white dark:bg-black rounded-lg overflow-hidden"
-                    ></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code9')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Basic Donut</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code9')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="donutChart" :series="donutChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code9')">
+          <highlight>
+            <pre>
 &lt;!-- basic donut --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;donutChart&quot; :series=&quot;donutChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -829,33 +794,28 @@ const donutChart = computed(() =&gt; {
 
 const donutChartSeries = ref([44, 55, 13]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Basic Polar Area</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code10')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart
-                        height="300"
-                        :options="polarAreaChart"
-                        :series="polarAreaChartSeries"
-                        class="bg-white dark:bg-black rounded-lg overflow-hidden"
-                    ></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code10')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Basic Polar Area</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code10')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="polarAreaChart" :series="polarAreaChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code10')">
+          <highlight>
+            <pre>
 &lt;!-- basic polar area --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;polarAreaChart&quot; :series=&quot;polarAreaChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -914,33 +874,28 @@ const polarAreaChart = computed(() =&gt; {
 
 const polarAreaChartSeries = ref([14, 23, 21, 17, 15, 10, 12, 17, 21]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Radial Bar</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code11')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart
-                        height="300"
-                        :options="radialBarChart"
-                        :series="radialBarChartSeries"
-                        class="bg-white dark:bg-black rounded-lg overflow-hidden"
-                    ></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code11')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Radial Bar</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code11')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="radialBarChart" :series="radialBarChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code11')">
+          <highlight>
+            <pre>
 &lt;!-- radial bar --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;radialBarChart&quot; :series=&quot;radialBarChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -997,33 +952,28 @@ const radialBarChart = computed(() =&gt; {
 
 const radialBarChartSeries = ref([44, 55, 41]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-
-            <div class="panel">
-                <div class="flex items-center justify-between mb-5">
-                    <h5 class="font-semibold text-lg dark:text-white">Bubble Chart</h5>
-                    <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;" @click="toggleCode('code12')"
-                        ><span class="flex items-center">
-                            <icon-code class="me-2" />
-                            Code
-                        </span>
-                    </a>
-                </div>
-                <div class="mb-5">
-                    <apexchart
-                        height="300"
-                        :options="bubbleChart"
-                        :series="bubbleChartSeries"
-                        class="bg-white dark:bg-black rounded-lg overflow-hidden"
-                    ></apexchart>
-                </div>
-                <template v-if="codeArr.includes('code12')">
-                    <highlight>
-                        <pre>
+</pre>
+          </highlight>
+        </template>
+      </div>
+
+      <div class="panel">
+        <div class="flex items-center justify-between mb-5">
+          <h5 class="font-semibold text-lg dark:text-white">Bubble Chart</h5>
+          <a class="font-semibold hover:text-gray-400 dark:text-gray-400 dark:hover:text-gray-600" href="javascript:;"
+            @click="toggleCode('code12')"><span class="flex items-center">
+              <icon-code class="me-2" />
+              Code
+            </span>
+          </a>
+        </div>
+        <div class="mb-5">
+          <apexchart height="300" :options="bubbleChart" :series="bubbleChartSeries"
+            class="bg-white dark:bg-black rounded-lg overflow-hidden"></apexchart>
+        </div>
+        <template v-if="codeArr.includes('code12')">
+          <highlight>
+            <pre>
 &lt;!-- bubble chart --&gt;
 &lt;apexchart height=&quot;300&quot; :options=&quot;bubbleChart&quot; :series=&quot;bubbleChartSeries&quot; class=&quot;bg-white dark:bg-black rounded-lg overflow-hidden&quot;&gt;&lt;/apexchart&gt;
 
@@ -1113,705 +1063,704 @@ const bubbleChartSeries = ref([
   },
 ]);
 &lt;/script&gt;
-</pre
-                        >
-                    </highlight>
-                </template>
-            </div>
-        </div>
+</pre>
+          </highlight>
+        </template>
+      </div>
     </div>
+  </div>
 </template>
 <script lang="ts" setup>
-    import { ref, computed } from 'vue';
-    import highlight from '@/components/plugins/highlight.vue';
-    import codePreview from '@/composables/codePreview';
-    import apexchart from 'vue3-apexcharts';
-    import { useAppStore } from '@/stores/index';
-    import { useMeta } from '@/composables/use-meta';
-
-    import IconBell from '@/components/icon/icon-bell.vue';
-    import IconCode from '@/components/icon/icon-code.vue';
-
-    useMeta({ title: 'Charts' });
-
-    const store = useAppStore();
-    const { codeArr, toggleCode } = codePreview();
-
-    const generateData = (baseval, count, yrange) => {
-        var i = 0;
-        var series: any = [];
-        while (i < count) {
-            var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;
-            var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
-            var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
-
-            series.push([x, y, z]);
-            baseval += 86400000;
-            i++;
-        }
-        return series;
-    };
-
-    const lineChart = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        const isRtl = store.rtlClass === 'rtl' ? true : false;
-        return {
-            chart: {
-                height: 300,
-                type: 'line',
-                toolbar: false,
-            },
-            colors: ['#4361ee'],
-            tooltip: {
-                marker: false,
-                y: {
-                    formatter(number) {
-                        return '$' + number;
-                    },
-                },
-                theme: isDark ? 'dark' : 'light',
-            },
-            stroke: {
-                width: 2,
-                curve: 'smooth',
-            },
-            xaxis: {
-                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
-                axisBorder: {
-                    color: isDark ? '#191e3a' : '#e0e6ed',
-                },
-            },
-            yaxis: {
-                opposite: isRtl ? true : false,
-                labels: {
-                    offsetX: isRtl ? -20 : 0,
-                },
-            },
-            grid: {
-                borderColor: isDark ? '#191e3a' : '#e0e6ed',
-            },
-        };
-    });
+import { ref, computed } from 'vue';
+import highlight from '@/components/plugins/highlight.vue';
+import codePreview from '@/composables/codePreview';
+import apexchart from 'vue3-apexcharts';
+import { useAppStore } from '@/stores/index';
+import { useMeta } from '@/composables/use-meta';
 
-    const lineChartSeries = ref([
-        {
-            name: 'Sales',
-            data: [45, 55, 75, 25, 45, 110],
-        },
-    ]);
-
-    const areaChart = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        const isRtl = store.rtlClass === 'rtl' ? true : false;
-        return {
-            chart: {
-                type: 'area',
-                height: 300,
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            colors: ['#805dca'],
-            dataLabels: {
-                enabled: false,
-            },
-            stroke: {
-                width: 2,
-                curve: 'smooth',
-            },
-            xaxis: {
-                axisBorder: {
-                    color: isDark ? '#191e3a' : '#e0e6ed',
-                },
-            },
-            yaxis: {
-                opposite: isRtl ? true : false,
-                labels: {
-                    offsetX: isRtl ? -40 : 0,
-                },
-            },
-            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-            legend: {
-                horizontalAlign: 'left',
-            },
-            grid: {
-                borderColor: isDark ? '#191e3a' : '#e0e6ed',
-            },
-            tooltip: {
-                theme: isDark ? 'dark' : 'light',
-            },
-        };
-    });
+import IconBell from '@/components/icon/icon-bell.vue';
+import IconCode from '@/components/icon/icon-code.vue';
 
-    const areaChartSeries = ref([
-        {
-            name: 'Income',
-            data: [16800, 16800, 15500, 17800, 15500, 17000, 19000, 16000, 15000, 17000, 14000, 17000],
-        },
-    ]);
-
-    const columnChart = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        const isRtl = store.rtlClass === 'rtl' ? true : false;
-        return {
-            chart: {
-                height: 300,
-                type: 'bar',
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            colors: ['#805dca', '#e7515a'],
-            dataLabels: {
-                enabled: false,
-            },
-            stroke: {
-                show: true,
-                width: 2,
-                colors: ['transparent'],
-            },
-            plotOptions: {
-                bar: {
-                    horizontal: false,
-                    columnWidth: '55%',
-                    endingShape: 'rounded',
-                },
-            },
-            grid: {
-                borderColor: isDark ? '#191e3a' : '#e0e6ed',
-            },
-            xaxis: {
-                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
-                axisBorder: {
-                    color: isDark ? '#191e3a' : '#e0e6ed',
-                },
-            },
-            yaxis: {
-                opposite: isRtl ? true : false,
-                labels: {
-                    offsetX: isRtl ? -10 : 0,
-                },
-            },
-            tooltip: {
-                theme: isDark ? 'dark' : 'light',
-                y: {
-                    formatter: function (val) {
-                        return val;
-                    },
-                },
-            },
-        };
-    });
+useMeta({ title: 'Charts' });
 
-    const columnChartSeries = ref([
-        {
-            name: 'Net Profit',
-            data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
-        },
-        {
-            name: 'Revenue',
-            data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
-        },
-    ]);
-
-    const simpleColumnStacked = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        const isRtl = store.rtlClass === 'rtl' ? true : false;
-        return {
-            chart: {
-                height: 300,
-                type: 'bar',
-                stacked: true,
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            colors: ['#2196f3', '#3b3f5c'],
-            responsive: [
-                {
-                    breakpoint: 480,
-                    options: {
-                        legend: {
-                            position: 'bottom',
-                            offsetX: -10,
-                            offsetY: 5,
-                        },
-                    },
-                },
-            ],
-            plotOptions: {
-                bar: {
-                    horizontal: false,
-                },
-            },
-            xaxis: {
-                type: 'datetime',
-                categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
-                axisBorder: {
-                    color: isDark ? '#191e3a' : '#e0e6ed',
-                },
-            },
-            yaxis: {
-                opposite: isRtl ? true : false,
-                labels: {
-                    offsetX: isRtl ? -20 : 0,
-                },
-            },
-            grid: {
-                borderColor: isDark ? '#191e3a' : '#e0e6ed',
-            },
-            legend: {
-                position: 'right',
-                offsetY: 40,
-            },
-            tooltip: {
-                theme: isDark ? 'dark' : 'light',
-            },
-            fill: {
-                opacity: 0.8,
-            },
-        };
-    });
+const store = useAppStore();
+const { codeArr, toggleCode } = codePreview();
 
-    const simpleColumnStackedSeries = ref([
-        {
-            name: 'PRODUCT A',
-            data: [44, 55, 41, 67, 22, 43],
-        },
-        {
-            name: 'PRODUCT B',
-            data: [13, 23, 20, 8, 13, 27],
-        },
-    ]);
-
-    const barChart = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        const isRtl = store.rtlClass === 'rtl' ? true : false;
-        return {
-            chart: {
-                height: 300,
-                type: 'bar',
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            dataLabels: {
-                enabled: false,
-            },
-            stroke: {
-                show: true,
-                width: 1,
-            },
-            colors: ['#4361ee'],
-            xaxis: {
-                categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
-                axisBorder: {
-                    color: isDark ? '#191e3a' : '#e0e6ed',
-                },
-            },
-            yaxis: {
-                opposite: isRtl ? true : false,
-                reversed: isRtl ? true : false,
-            },
-            grid: {
-                borderColor: isDark ? '#191e3a' : '#e0e6ed',
-            },
-            plotOptions: {
-                bar: {
-                    horizontal: true,
-                },
-            },
-            fill: {
-                opacity: 0.8,
-            },
-        };
-    });
+const generateData = (baseval, count, yrange) => {
+  var i = 0;
+  var series: any = [];
+  while (i < count) {
+    var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;
+    var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
+    var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
 
-    const barChartSeries = ref([
-        {
-            name: 'Sales',
-            data: [44, 55, 41, 67, 22, 43, 21, 70],
-        },
-    ]);
-
-    const mixedChart = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        const isRtl = store.rtlClass === 'rtl' ? true : false;
-        return {
-            chart: {
-                height: 300,
-                // stacked: false,
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            colors: ['#2196f3', '#00ab55', '#4361ee'],
-            stroke: {
-                width: [0, 2, 2],
-                curve: 'smooth',
-            },
-            plotOptions: {
-                bar: {
-                    columnWidth: '50%',
-                },
-            },
-            fill: {
-                opacity: [1, 0.25, 1],
-            },
+    series.push([x, y, z]);
+    baseval += 86400000;
+    i++;
+  }
+  return series;
+};
 
-            labels: [
-                '01/01/2022',
-                '02/01/2022',
-                '03/01/2022',
-                '04/01/2022',
-                '05/01/2022',
-                '06/01/2022',
-                '07/01/2022',
-                '08/01/2022',
-                '09/01/2022',
-                '10/01/2022',
-                '11/01/2022',
-            ],
-            markers: {
-                size: 0,
-            },
-            xaxis: {
-                type: 'datetime',
-                axisBorder: {
-                    color: isDark ? '#191e3a' : '#e0e6ed',
-                },
-            },
-            yaxis: {
-                title: {
-                    text: 'Points',
-                },
-                min: 0,
-                opposite: isRtl ? true : false,
-                labels: {
-                    offsetX: isRtl ? -10 : 0,
-                },
-            },
-            grid: {
-                borderColor: isDark ? '#191e3a' : '#e0e6ed',
-            },
-            tooltip: {
-                shared: true,
-                intersect: false,
-                theme: isDark ? 'dark' : 'light',
-                y: {
-                    formatter: (y) => {
-                        if (typeof y !== 'undefined') {
-                            return y.toFixed(0) + ' points';
-                        }
-                        return y;
-                    },
-                },
-            },
-            legend: {
-                itemMargin: {
-                    horizontal: 4,
-                    vertical: 8,
-                },
-            },
-        };
-    });
-
-    const mixedChartSeries = ref([
-        {
-            name: 'TEAM A',
-            type: 'column',
-            data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
-        },
-        {
-            name: 'TEAM B',
-            type: 'area',
-            data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
-        },
-        {
-            name: 'TEAM C',
-            type: 'line',
-            data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
+const lineChart = computed(() => {
+  const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+  const isRtl = store.rtlClass === 'rtl' ? true : false;
+  return {
+    chart: {
+      height: 300,
+      type: 'line',
+      toolbar: false,
+    },
+    colors: ['#4361ee'],
+    tooltip: {
+      marker: false,
+      y: {
+        formatter(number) {
+          return '$' + number;
         },
-    ]);
-
-    const radarChart = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        return {
-            chart: {
-                height: 300,
-                type: 'radar',
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            colors: ['#4361ee'],
-            xaxis: {
-                categories: ['January', 'February', 'March', 'April', 'May', 'June'],
-            },
-            plotOptions: {
-                radar: {
-                    polygons: {
-                        strokeColors: isDark ? '#191e3a' : '#e0e6ed',
-                        connectorColors: isDark ? '#191e3a' : '#e0e6ed',
-                    },
-                },
-            },
-            tooltip: {
-                theme: isDark ? 'dark' : 'light',
-            },
-        };
-    });
+      },
+      theme: isDark ? 'dark' : 'light',
+    },
+    stroke: {
+      width: 2,
+      curve: 'smooth',
+    },
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],
+      axisBorder: {
+        color: isDark ? '#191e3a' : '#e0e6ed',
+      },
+    },
+    yaxis: {
+      opposite: isRtl ? true : false,
+      labels: {
+        offsetX: isRtl ? -20 : 0,
+      },
+    },
+    grid: {
+      borderColor: isDark ? '#191e3a' : '#e0e6ed',
+    },
+  };
+});
+
+const lineChartSeries = ref([
+  {
+    name: 'Sales',
+    data: [45, 55, 75, 25, 45, 110],
+  },
+]);
+
+const areaChart = computed(() => {
+  const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+  const isRtl = store.rtlClass === 'rtl' ? true : false;
+  return {
+    chart: {
+      type: 'area',
+      height: 300,
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: ['#805dca'],
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      width: 2,
+      curve: 'smooth',
+    },
+    xaxis: {
+      axisBorder: {
+        color: isDark ? '#191e3a' : '#e0e6ed',
+      },
+    },
+    yaxis: {
+      opposite: isRtl ? true : false,
+      labels: {
+        offsetX: isRtl ? -40 : 0,
+      },
+    },
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    legend: {
+      horizontalAlign: 'left',
+    },
+    grid: {
+      borderColor: isDark ? '#191e3a' : '#e0e6ed',
+    },
+    tooltip: {
+      theme: isDark ? 'dark' : 'light',
+    },
+  };
+});
 
-    const radarChartSeries = ref([
-        {
-            name: 'Series 1',
-            data: [80, 50, 30, 40, 100, 20],
+const areaChartSeries = ref([
+  {
+    name: 'Income',
+    data: [16800, 16800, 15500, 17800, 15500, 17000, 19000, 16000, 15000, 17000, 14000, 17000],
+  },
+]);
+
+const columnChart = computed(() => {
+  const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+  const isRtl = store.rtlClass === 'rtl' ? true : false;
+  return {
+    chart: {
+      height: 300,
+      type: 'bar',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: ['#805dca', '#e7515a'],
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ['transparent'],
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '55%',
+        endingShape: 'rounded',
+      },
+    },
+    grid: {
+      borderColor: isDark ? '#191e3a' : '#e0e6ed',
+    },
+    xaxis: {
+      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+      axisBorder: {
+        color: isDark ? '#191e3a' : '#e0e6ed',
+      },
+    },
+    yaxis: {
+      opposite: isRtl ? true : false,
+      labels: {
+        offsetX: isRtl ? -10 : 0,
+      },
+    },
+    tooltip: {
+      theme: isDark ? 'dark' : 'light',
+      y: {
+        formatter: function (val) {
+          return val;
         },
-    ]);
-
-    const pieChart = computed(() => {
-        return {
-            chart: {
-                height: 300,
-                type: 'pie',
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
-            colors: ['#4361ee', '#805dca', '#00ab55', '#e7515a', '#e2a03f'],
-            responsive: [
-                {
-                    breakpoint: 480,
-                    options: {
-                        chart: {
-                            width: 200,
-                        },
-                    },
-                },
-            ],
-            stroke: {
-                show: false,
-            },
-            legend: {
-                position: 'bottom',
-            },
-        };
-    });
-
-    const pieChartSeries = ref([44, 55, 13, 43, 22]);
-
-    const donutChart = computed(() => {
-        return {
-            chart: {
-                height: 300,
-                type: 'donut',
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            stroke: {
-                show: false,
-            },
-            labels: ['Team A', 'Team B', 'Team C'],
-            colors: ['#4361ee', '#805dca', '#e2a03f'],
-            responsive: [
-                {
-                    breakpoint: 480,
-                    options: {
-                        chart: {
-                            width: 200,
-                        },
-                    },
-                },
-            ],
-            legend: {
-                position: 'bottom',
-            },
-        };
-    });
-
-    const donutChartSeries = ref([44, 55, 13]);
-
-    const polarAreaChart = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        return {
-            chart: {
-                height: 300,
-                type: 'polarArea',
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            colors: ['#4361ee', '#805dca', '#00ab55', '#e7515a', '#e2a03f', '#2196f3', '#3b3f5c'],
-            stroke: {
-                show: false,
-            },
-            responsive: [
-                {
-                    breakpoint: 480,
-                    options: {
-                        chart: {
-                            width: 200,
-                        },
-                    },
-                },
-            ],
-            plotOptions: {
-                polarArea: {
-                    rings: {
-                        strokeColor: isDark ? '#191e3a' : '#e0e6ed',
-                    },
-                    spokes: {
-                        connectorColors: isDark ? '#191e3a' : '#e0e6ed',
-                    },
-                },
-            },
-            legend: {
-                position: 'bottom',
-            },
-            fill: {
-                opacity: 0.85,
-            },
-        };
-    });
-
-    const polarAreaChartSeries = ref([14, 23, 21, 17, 15, 10, 12, 17, 21]);
-
-    const radialBarChart = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        return {
-            chart: {
-                height: 300,
-                type: 'radialBar',
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            colors: ['#4361ee', '#805dca', '#e2a03f'],
-            grid: {
-                borderColor: isDark ? '#191e3a' : '#e0e6ed',
-            },
-            plotOptions: {
-                radialBar: {
-                    dataLabels: {
-                        name: {
-                            fontSize: '22px',
-                        },
-                        value: {
-                            fontSize: '16px',
-                        },
-                        total: {
-                            show: true,
-                            label: 'Total',
-                            formatter: function (w) {
-                                // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
-                                return 249;
-                            },
-                        },
-                    },
-                },
-            },
-            labels: ['Apples', 'Oranges', 'Bananas'],
-            fill: {
-                opacity: 0.85,
-            },
-        };
-    });
-
-    const radialBarChartSeries = ref([44, 55, 41]);
-
-    const bubbleChart = computed(() => {
-        const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
-        const isRtl = store.rtlClass === 'rtl' ? true : false;
-        return {
-            chart: {
-                height: 300,
-                type: 'bubble',
-                zoom: {
-                    enabled: false,
-                },
-                toolbar: {
-                    show: false,
-                },
-            },
-            colors: ['#4361ee', '#00ab55'],
-            dataLabels: {
-                enabled: false,
-            },
-            xaxis: {
-                tickAmount: 12,
-                type: 'category',
-                axisBorder: {
-                    color: isDark ? '#191e3a' : '#e0e6ed',
-                },
-            },
-            yaxis: {
-                max: 70,
-                opposite: isRtl ? true : false,
-                labels: {
-                    offsetX: isRtl ? -10 : 0,
-                },
-            },
-            grid: {
-                borderColor: isDark ? '#191e3a' : '#e0e6ed',
-            },
-            tooltip: {
-                theme: isDark ? 'dark' : 'light',
-            },
-            stroke: {
-                colors: isDark ? ['#191e3a'] : ['#e0e6ed'],
-            },
-            fill: {
-                opacity: 0.85,
-            },
-        };
-    });
-
-    const bubbleChartSeries = ref([
-        {
-            name: 'Bubble1',
-            data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
-                min: 10,
-                max: 60,
-            }),
+      },
+    },
+  };
+});
+
+const columnChartSeries = ref([
+  {
+    name: 'Net Profit',
+    data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
+  },
+  {
+    name: 'Revenue',
+    data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
+  },
+]);
+
+const simpleColumnStacked = computed(() => {
+  const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+  const isRtl = store.rtlClass === 'rtl' ? true : false;
+  return {
+    chart: {
+      height: 300,
+      type: 'bar',
+      stacked: true,
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: ['#2196f3', '#3b3f5c'],
+    responsive: [
+      {
+        breakpoint: 480,
+        options: {
+          legend: {
+            position: 'bottom',
+            offsetX: -10,
+            offsetY: 5,
+          },
         },
-        {
-            name: 'Bubble2',
-            data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
-                min: 10,
-                max: 60,
-            }),
+      },
+    ],
+    plotOptions: {
+      bar: {
+        horizontal: false,
+      },
+    },
+    xaxis: {
+      type: 'datetime',
+      categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT', '01/05/2011 GMT', '01/06/2011 GMT'],
+      axisBorder: {
+        color: isDark ? '#191e3a' : '#e0e6ed',
+      },
+    },
+    yaxis: {
+      opposite: isRtl ? true : false,
+      labels: {
+        offsetX: isRtl ? -20 : 0,
+      },
+    },
+    grid: {
+      borderColor: isDark ? '#191e3a' : '#e0e6ed',
+    },
+    legend: {
+      position: 'right',
+      offsetY: 40,
+    },
+    tooltip: {
+      theme: isDark ? 'dark' : 'light',
+    },
+    fill: {
+      opacity: 0.8,
+    },
+  };
+});
+
+const simpleColumnStackedSeries = ref([
+  {
+    name: 'PRODUCT A',
+    data: [44, 55, 41, 67, 22, 43],
+  },
+  {
+    name: 'PRODUCT B',
+    data: [13, 23, 20, 8, 13, 27],
+  },
+]);
+
+const barChart = computed(() => {
+  const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+  const isRtl = store.rtlClass === 'rtl' ? true : false;
+  return {
+    chart: {
+      height: 300,
+      type: 'bar',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      show: true,
+      width: 1,
+    },
+    colors: ['#4361ee'],
+    xaxis: {
+      categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
+      axisBorder: {
+        color: isDark ? '#191e3a' : '#e0e6ed',
+      },
+    },
+    yaxis: {
+      opposite: isRtl ? true : false,
+      reversed: isRtl ? true : false,
+    },
+    grid: {
+      borderColor: isDark ? '#191e3a' : '#e0e6ed',
+    },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+      },
+    },
+    fill: {
+      opacity: 0.8,
+    },
+  };
+});
+
+const barChartSeries = ref([
+  {
+    name: 'Sales',
+    data: [44, 55, 41, 67, 22, 43, 21, 70],
+  },
+]);
+
+const mixedChart = computed(() => {
+  const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+  const isRtl = store.rtlClass === 'rtl' ? true : false;
+  return {
+    chart: {
+      height: 300,
+      // stacked: false,
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: ['#2196f3', '#00ab55', '#4361ee'],
+    stroke: {
+      width: [0, 2, 2],
+      curve: 'smooth',
+    },
+    plotOptions: {
+      bar: {
+        columnWidth: '50%',
+      },
+    },
+    fill: {
+      opacity: [1, 0.25, 1],
+    },
+
+    labels: [
+      '01/01/2022',
+      '02/01/2022',
+      '03/01/2022',
+      '04/01/2022',
+      '05/01/2022',
+      '06/01/2022',
+      '07/01/2022',
+      '08/01/2022',
+      '09/01/2022',
+      '10/01/2022',
+      '11/01/2022',
+    ],
+    markers: {
+      size: 0,
+    },
+    xaxis: {
+      type: 'datetime',
+      axisBorder: {
+        color: isDark ? '#191e3a' : '#e0e6ed',
+      },
+    },
+    yaxis: {
+      title: {
+        text: 'Points',
+      },
+      min: 0,
+      opposite: isRtl ? true : false,
+      labels: {
+        offsetX: isRtl ? -10 : 0,
+      },
+    },
+    grid: {
+      borderColor: isDark ? '#191e3a' : '#e0e6ed',
+    },
+    tooltip: {
+      shared: true,
+      intersect: false,
+      theme: isDark ? 'dark' : 'light',
+      y: {
+        formatter: (y) => {
+          if (typeof y !== 'undefined') {
+            return y.toFixed(0) + ' points';
+          }
+          return y;
         },
-    ]);
+      },
+    },
+    legend: {
+      itemMargin: {
+        horizontal: 4,
+        vertical: 8,
+      },
+    },
+  };
+});
+
+const mixedChartSeries = ref([
+  {
+    name: 'TEAM A',
+    type: 'column',
+    data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
+  },
+  {
+    name: 'TEAM B',
+    type: 'area',
+    data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
+  },
+  {
+    name: 'TEAM C',
+    type: 'line',
+    data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
+  },
+]);
+
+const radarChart = computed(() => {
+  const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+  return {
+    chart: {
+      height: 300,
+      type: 'radar',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: ['#4361ee'],
+    xaxis: {
+      categories: ['January', 'February', 'March', 'April', 'May', 'June'],
+    },
+    plotOptions: {
+      radar: {
+        polygons: {
+          strokeColors: isDark ? '#191e3a' : '#e0e6ed',
+          connectorColors: isDark ? '#191e3a' : '#e0e6ed',
+        },
+      },
+    },
+    tooltip: {
+      theme: isDark ? 'dark' : 'light',
+    },
+  };
+});
+
+const radarChartSeries = ref([
+  {
+    name: 'Series 1',
+    data: [80, 50, 30, 40, 100, 20],
+  },
+]);
+
+const pieChart = computed(() => {
+  return {
+    chart: {
+      height: 300,
+      type: 'pie',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
+    colors: ['#4361ee', '#805dca', '#00ab55', '#e7515a', '#e2a03f'],
+    responsive: [
+      {
+        breakpoint: 480,
+        options: {
+          chart: {
+            width: 200,
+          },
+        },
+      },
+    ],
+    stroke: {
+      show: false,
+    },
+    legend: {
+      position: 'bottom',
+    },
+  };
+});
+
+const pieChartSeries = ref([44, 55, 13, 43, 22]);
+
+const donutChart = computed(() => {
+  return {
+    chart: {
+      height: 300,
+      type: 'donut',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    stroke: {
+      show: false,
+    },
+    labels: ['Team A', 'Team B', 'Team C'],
+    colors: ['#4361ee', '#805dca', '#e2a03f'],
+    responsive: [
+      {
+        breakpoint: 480,
+        options: {
+          chart: {
+            width: 200,
+          },
+        },
+      },
+    ],
+    legend: {
+      position: 'bottom',
+    },
+  };
+});
+
+const donutChartSeries = ref([44, 55, 13]);
+
+const polarAreaChart = computed(() => {
+  const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+  return {
+    chart: {
+      height: 300,
+      type: 'polarArea',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: ['#4361ee', '#805dca', '#00ab55', '#e7515a', '#e2a03f', '#2196f3', '#3b3f5c'],
+    stroke: {
+      show: false,
+    },
+    responsive: [
+      {
+        breakpoint: 480,
+        options: {
+          chart: {
+            width: 200,
+          },
+        },
+      },
+    ],
+    plotOptions: {
+      polarArea: {
+        rings: {
+          strokeColor: isDark ? '#191e3a' : '#e0e6ed',
+        },
+        spokes: {
+          connectorColors: isDark ? '#191e3a' : '#e0e6ed',
+        },
+      },
+    },
+    legend: {
+      position: 'bottom',
+    },
+    fill: {
+      opacity: 0.85,
+    },
+  };
+});
+
+const polarAreaChartSeries = ref([14, 23, 21, 17, 15, 10, 12, 17, 21]);
+
+const radialBarChart = computed(() => {
+  const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+  return {
+    chart: {
+      height: 300,
+      type: 'radialBar',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: ['#4361ee', '#805dca', '#e2a03f'],
+    grid: {
+      borderColor: isDark ? '#191e3a' : '#e0e6ed',
+    },
+    plotOptions: {
+      radialBar: {
+        dataLabels: {
+          name: {
+            fontSize: '22px',
+          },
+          value: {
+            fontSize: '16px',
+          },
+          total: {
+            show: true,
+            label: 'Total',
+            formatter: function (w) {
+              // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
+              return 249;
+            },
+          },
+        },
+      },
+    },
+    labels: ['Apples', 'Oranges', 'Bananas'],
+    fill: {
+      opacity: 0.85,
+    },
+  };
+});
+
+const radialBarChartSeries = ref([44, 55, 41]);
+
+const bubbleChart = computed(() => {
+  const isDark = store.theme === 'dark' || store.isDarkMode ? true : false;
+  const isRtl = store.rtlClass === 'rtl' ? true : false;
+  return {
+    chart: {
+      height: 300,
+      type: 'bubble',
+      zoom: {
+        enabled: false,
+      },
+      toolbar: {
+        show: false,
+      },
+    },
+    colors: ['#4361ee', '#00ab55'],
+    dataLabels: {
+      enabled: false,
+    },
+    xaxis: {
+      tickAmount: 12,
+      type: 'category',
+      axisBorder: {
+        color: isDark ? '#191e3a' : '#e0e6ed',
+      },
+    },
+    yaxis: {
+      max: 70,
+      opposite: isRtl ? true : false,
+      labels: {
+        offsetX: isRtl ? -10 : 0,
+      },
+    },
+    grid: {
+      borderColor: isDark ? '#191e3a' : '#e0e6ed',
+    },
+    tooltip: {
+      theme: isDark ? 'dark' : 'light',
+    },
+    stroke: {
+      colors: isDark ? ['#191e3a'] : ['#e0e6ed'],
+    },
+    fill: {
+      opacity: 0.85,
+    },
+  };
+});
+
+const bubbleChartSeries = ref([
+  {
+    name: 'Bubble1',
+    data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
+      min: 10,
+      max: 60,
+    }),
+  },
+  {
+    name: 'Bubble2',
+    data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
+      min: 10,
+      max: 60,
+    }),
+  },
+]);
 </script>

+ 1 - 1
vite.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import dotenv from 'dotenv';
-import VueI18n from '@intlify/unplugin-vue-i18n/vite';
+import VueI18n from '@intlify/vite-plugin-vue-i18n';
 
 // 加载环境变量
 dotenv.config();