MyAccount page prototype

src/components/AccountMenu/AcctMenu.vue

@@ -15,7 +15,7 @@
         </li>
         <li id="btn_mang_ur_acct"
           class="w-full h-[40px] flex py-2 px-4 hover:text-[#000000] hover:bg-[#F1F5F9] cursor-pointer
-          items-center">
+          items-center" @click="onBtnMyAccountClick">
             <span class="w-[24px] h-[24px] flex"><img src="@/assets/icon-head-black.svg" alt="head-black"></span>
             <span class="flex ml-[8px]">{{i18next.t("AcctMgmt.mangUrAcct")}}</span>
         </li>
@@ -33,6 +33,7 @@
 import { computed, onMounted, ref, } from 'vue';
 import { mapActions, mapState, storeToRefs } from 'pinia';
 import i18next from '@/i18n/i18n';
+import { useRouter } from 'vue-router';
 import LoginStore from '@/stores/login.ts';
 import AcctMgmtStore from '@/stores/acctMgmt.ts';
 import AllMapDataStore from '@/stores/allMapData.js';
@@ -43,6 +44,7 @@ export default {
   setup() {
     const { logOut } = LoginStore();
     const loginStore = LoginStore();
+    const router = useRouter();
     const allMapDataStore = AllMapDataStore();
     const conformanceStore = ConformanceStore();
     const acctMgmtStore = AcctMgmtStore();
@@ -61,6 +63,11 @@ export default {
           isAdmin.value = true;
         }
       };
+    
+    const onBtnMyAccountClick = async() => {
+      acctMgmtStore.closeAcctMenu();
+      await router.push('/my-account');
+    }
 
     onMounted(async () => { 
         await getIsAdminValue();
@@ -73,6 +80,7 @@ export default {
       allMapDataStore,
       conformanceStore,
       isAdmin,
+      onBtnMyAccountClick,
     };
   },
   data() {

src/components/Navbar.vue

@@ -94,6 +94,7 @@ export default {
         // 舉例：COMPARE: ['PROCESS MAP', 'DASHBOARD']
         COMPARE: ['PERFORMANCE'],
         'ACCOUNT MANAGEMENT': [],
+        'MY ACCOUNT': [],
       },
       navViewName: 'FILES',
       uploadModal: false,

src/module/cytoscapeMap.js

@@ -2,6 +2,7 @@ import cytoscape from 'cytoscape';
 import spread from 'cytoscape-spread';
 import dagre from 'cytoscape-dagre';
 import fcose from 'cytoscape-fcose';
+import cola from 'cytoscape-cola';
 import tippy from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import MapPathStore from '@/stores/mapPathStore';
@@ -24,6 +25,7 @@ const composeFreqTypeText = (baseText, dataLayerOption, optionValue) => { //sona
 cytoscape.use(dagre);
 cytoscape.use(spread);
 cytoscape.use(fcose);
+cytoscape.use(cola); 
 
 /**
  * @param {object}  mapData processMapData | bpmnData，可選以上任一。
@@ -278,6 +280,47 @@ export default function cytoscapeMap(mapData, dataLayerType, dataLayerOption, cu
     fit: true,
   }).run();
 
+  cy.layout({
+    name: 'cola',
+    refresh: 1,
+    ungrabifyWhileSimulating: false, // so you can't drag nodes during layout
+    fit: true, // on every layout reposition of nodes, fit the viewport
+    padding: 30, // padding around the simulation
+    boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
+  nodeDimensionsIncludeLabels: false, // whether labels should be included in determining the space used by a node
+
+  // layout event callbacks
+  ready: function(){}, // on layoutready
+  stop: function(){}, // on layoutstop
+
+  // positioning options
+  randomize: false, // use random node positions at beginning of layout
+  avoidOverlap: true, // if true, prevents overlap of node bounding boxes
+  handleDisconnected: true, // if true, avoids disconnected components from overlapping
+  convergenceThreshold: 0.01, // when the alpha value (system energy) falls below this value, the layout stops
+  nodeSpacing: function( node ){ return 10; }, // extra spacing around nodes
+  flow: undefined, // use DAG/tree flow layout if specified, e.g. { axis: 'y', minSeparation: 30 }
+  alignment: function(node) {
+    return {
+      x: 1, // 將所有節點對齊在相同的 X 座標上
+      y: 0 // Y 座標保持不變
+    };
+  }, // relative alignment constraints on nodes, e.g. {vertical: [[{node: node1, offset: 0}, {node: node2, offset: 5}]], horizontal: [[{node: node3}, {node: node4}], [{node: node5}, {node: node6}]]}
+  gapInequalities: undefined, // list of inequality constraints for the gap between the nodes, e.g. [{"axis":"y", "left":node1, "right":node2, "gap":25}]
+  centerGraph: 10000, // adjusts the node positions initially to center the graph (pass false if you want to start the layout from the current position)
+
+  // different methods of specifying edge length
+  // each can be a constant numerical value or a function like `function( edge ){ return 2; }`
+  edgeLength: 10, // sets edge length directly in simulation
+  edgeSymDiffLength: undefined, // symmetric diff edge length in simulation
+  edgeJaccardLength: undefined, // jaccard edge length in simulation
+
+  // iterations of cola algorithm; uses default values on undefined
+  unconstrIter: undefined, // unconstrained initial layout iterations
+  userConstIter: undefined, // initial layout iterations with user-specified constraints
+  allConstIter: undefined, // initial layout iterations with all constraints including non-overlap
+  }).run();
+
   // 按下線條，線條及線條上數字有光暈效果
   cy.on('tap', 'edge', function(event) {
     cy.edges().removeClass('highlight-edge');

src/router/index.ts

@@ -9,6 +9,7 @@ import Conformance from '@/views/Discover/Conformance/index.vue';
 import Performance from '@/views/Discover/Performance/index.vue';
 import CompareDashboard from '@/views/Compare/Dashboard/Compare.vue';
 import AccountAdmin from '@/views/AccountManagement/AccountAdmin/AccountAdmin.vue';
+import MyAccount from '@/views/AccountManagement/MyAccount.vue';
 import MemberArea from '@/views/MemberArea/index.vue';
 import NotFound404 from '@/views/NotFound404.vue';
 
@@ -58,6 +59,10 @@ const routes = [
             component: AccountAdmin,
           },
         ]
+      },{
+         path: "/my-account",
+        name: "My Account",
+        component: MyAccount,
       },
       {
         path: "/upload", // router.push({ replace: true }) 路徑不添進歷史紀錄

src/views/AccountManagement/MyAccount.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="div flex justify-center w-[600px]">
+        
+    </div>
+</template>
+
+<script>
+import { onMounted, } from 'vue';
+import LoadingStore from '@/stores/loading.js';
+export default {
+    props: {
+
+    },
+    setup(props) {
+        const loadingStore = LoadingStore();
+
+        onMounted(() => {
+            loadingStore.setIsLoading(false);
+        });
+
+        return {
+
+        };
+  }
+}
+</script>