WIP: TypeScript bugs

src/main.ts

@@ -1,7 +1,6 @@
-import { createApp, } from "vue";
-
-import App from "./App.vue";
-import router from "@router";
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
 import pinia from '@/stores/main';
 import myPiniaPlugin from './plugins/myPiniaPlugin';
 import axios from 'axios';
@@ -15,16 +14,15 @@ import popper from 'cytoscape-popper';
 import draggable from 'vuedraggable';
 import VueSweetalert2 from 'vue-sweetalert2';
 
-// import CSS
-import "./assets/main.css";
+// Import CSS
+import './assets/main.css';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import 'sweetalert2/dist/sweetalert2.min.css';
 
-// import PrimeVue
+// Import PrimeVue
 import PrimeVue from 'primevue/config';
-import 'primevue/resources/themes/saga-blue/theme.css'; //theme
-// import 'primevue/resources/primevue.min.css'; //core css 官網更新 3.40 後移除基礎樣式
-import 'primeicons/primeicons.css'; //icons
+import 'primevue/resources/themes/saga-blue/theme.css';
+import 'primeicons/primeicons.css';
 import Sidebar from 'primevue/sidebar';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
@@ -34,8 +32,8 @@ import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
-import ColumnGroup from 'primevue/columngroup';   // optional
-import Row from 'primevue/row';   // optional
+import ColumnGroup from 'primevue/columngroup';
+import Row from 'primevue/row';
 import RadioButton from 'primevue/radiobutton';
 import PickList from 'primevue/picklist';
 import Timeline from 'primevue/timeline';
@@ -49,34 +47,41 @@ import Tooltip from 'primevue/tooltip';
 import Checkbox from 'primevue/checkbox';
 import Dialog from 'primevue/dialog';
 import ContextMenu from 'primevue/contextmenu';
-
+console.log('TODO: hello wolrld')
 const emitter = mitt();
 const app = createApp(App);
 
-// axios setting
+// Axios setting
 app.config.globalProperties.$axios = axios;
 
 // Pinia Set
 pinia.use(myPiniaPlugin);
+// Pinia Set
+pinia.use(({ store }) => {
+  store.$axios = axios;
+});
 
-// can use `this.$moment` in Vue.js
+// Global properties
+app.config.globalProperties.$axios = axios;
 app.config.globalProperties.$moment = moment;
 app.config.globalProperties.$emitter = emitter;
 app.config.globalProperties.$cytoscape = cytoscape;
 
 // Cytoscape.js's style
-cytoscape.use( dagre );
-cytoscape.use( popper );
+cytoscape.use(dagre);
+cytoscape.use(popper);
 
 app.use(pinia);
 app.use(router);
 app.use(VueAxios, axios);
 app.use(VueSweetalert2);
-app.use(ToastPlugin, { // use `this.$toast` in Vue.js
+app.use(ToastPlugin, {
   position: 'bottom',
   duration: 5000,
 });
 app.use(PrimeVue);
+
+// Register PrimeVue components
 app.component('Sidebar', Sidebar);
 app.component('Button', Button);
 app.component('Dropdown', Dropdown);
@@ -100,7 +105,9 @@ app.component('Calendar', Calendar);
 app.component('Checkbox', Checkbox);
 app.component('Dialog', Dialog);
 app.component('ContextMenu', ContextMenu);
-app.component('Draggable', draggable);  // 拖曳
+app.component('Draggable', draggable);
 app.directive('tooltip', Tooltip);
 
-app.mount("#app");
+console.log('hello from main.ts');
+
+app.mount('#app');

src/types/env.d.ts

@@ -0,0 +1,9 @@
+interface ImportMetaEnv {
+    readonly VITE_APP_TITLE: string;
+    readonly BASE_URL: string;
+    // 更多環境變量...
+  }
+  
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }

src/types/store.d.ts

@@ -0,0 +1,7 @@
+import { AxiosInstance } from 'axios';
+
+declare module 'pinia' {
+  export interface PiniaCustomProperties {
+    $axios: AxiosInstance;
+  }
+}