dashboard-shell-shell 3.0.5-logtest.3 → 3.0.5-order.2

package/components/nav/menuDropdown.vue

@@ -0,0 +1,132 @@
+<script>
+export default {
+  props: {
+    position: {
+      type: String,
+      default: 'bottom-content',   // top / bottom / left / right
+      validator: v => [
+        'bottom-left', 'bottom-right', 'bottom-content',
+        'top-left', 'top-right', 'top-content'
+      ].includes(v)
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="menuDropdown" :class="`pos-${position}`">
+    <div>
+      <slot name="title"></slot>
+    </div>
+
+    <div class="dropdownCollection">
+      <slot name="dropdownCollection"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.menuDropdown {
+  position: relative;
+
+  .dropdownCollection {
+    display: flex;
+    flex-direction: column;
+
+    opacity: 0;
+    pointer-events: none;
+
+    /* === 核心动画：scale + fade + 阴影渐变 === */
+    transform: scale(0.95);
+    transition:
+      opacity 0.22s ease,
+      transform 0.22s ease,
+      box-shadow 0.22s ease;
+
+    position: absolute;
+    padding: 10px 0;
+    border: 1px solid #eee;
+    background: #fff;
+    z-index: 10;
+
+    /* 初始阴影弱 */
+    box-shadow: 0 0 0 rgba(0, 0, 0, 0.0);
+  }
+
+  &:hover .dropdownCollection {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+
+    /* 弹出时增加柔和灰色阴影 */
+    box-shadow: 0 6px 30px #0000001a;
+  }
+}
+
+/* ============================
+   方向定位（保持不变）
+   ============================ */
+/* ============================
+   新的方向定位（移除 bottom / top）
+   ============================ */
+
+/* ----- Bottom 系列 ----- */
+
+/* bottom-left：在下方，左对齐 */
+.pos-bottom-left .dropdownCollection {
+  top: 100%;
+  left: 0;
+}
+
+/* bottom-right：在下方，右对齐 */
+.pos-bottom-right .dropdownCollection {
+  top: 100%;
+  right: 0;
+}
+
+/* bottom-content：下方，水平居中 */
+.pos-bottom-content .dropdownCollection {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) scale(0.95);
+}
+.menuDropdown.pos-bottom-content:hover .dropdownCollection {
+  transform: translateX(-50%) scale(1);
+}
+
+
+/* ----- Top 系列 ----- */
+
+/* top-left：在上方，左对齐 */
+.pos-top-left .dropdownCollection {
+  bottom: 100%;
+  left: 0;
+}
+
+/* top-right：在上方，右对齐 */
+.pos-top-right .dropdownCollection {
+  bottom: 100%;
+  right: 0;
+}
+
+/* top-content：上方，水平居中 */
+.pos-top-content .dropdownCollection {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) scale(0.95);
+}
+.menuDropdown.pos-top-content:hover .dropdownCollection {
+  transform: translateX(-50%) scale(1);
+}
+
+
+.pos-left .dropdownCollection {
+  top: 0;
+  right: 100%;
+}
+
+.pos-right .dropdownCollection {
+  top: 0;
+  left: 100%;
+}
+</style>

package/components/nav/menuPrompt.vue

@@ -0,0 +1,204 @@
+<script>
+export default {
+  props: {
+    position: {
+      type: String,
+      default: 'bottom', // top / bottom / left / right
+      validator: v => ['top', 'bottom', 'left', 'right'].includes(v)
+    },
+    gap: {
+      type: Number,
+      default: 10   // 弹框距离 title 的 gap
+    },
+    align: {
+      type: String,
+      default: 'left',
+      validator: v => ['left', 'center', 'right'].includes(v)
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    class="menuDropdown"
+    :class="[`pos-${position}`, `align-${align}`]"
+    :style="{ '--gap': gap + 'px' }"
+  >
+    <div>
+      <slot name="title"></slot>
+    </div>
+
+    <div class="dropdownCollection">
+      <slot name="dropdownCollection"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.menuDropdown {
+  position: relative;
+
+  .dropdownCollection {
+    display: flex;
+    flex-direction: column;
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0.95);
+
+    transition:
+      opacity 0.22s ease,
+      transform 0.22s ease,
+      box-shadow 0.22s ease;
+
+    position: absolute;
+
+    padding: 10px 0;
+    border: 1px solid #eee;
+    background: #fff;
+    z-index: 10;
+    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+
+    /* 小三角 */
+    &::after {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      opacity: 0;
+      transition: opacity 0.22s ease;
+    }
+  }
+
+  &:hover .dropdownCollection {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+    box-shadow: 0 6px 30px #0000001a;
+  }
+
+  &:hover .dropdownCollection::after {
+    opacity: 1;
+  }
+}
+
+/* ================================
+   gap 间距控制
+   ================================ */
+.pos-bottom .dropdownCollection {
+  top: calc(100% + var(--gap));
+}
+
+.pos-top .dropdownCollection {
+  bottom: calc(100% + var(--gap));
+}
+
+.pos-left .dropdownCollection {
+  right: calc(100% + var(--gap));
+}
+
+.pos-right .dropdownCollection {
+  left: calc(100% + var(--gap));
+}
+
+/* ================================
+   三角箭头方向（基础方向）
+   ================================ */
+
+/* bottom */
+.pos-bottom .dropdownCollection::after {
+  bottom: 100%;
+  border-width: 0 8px 8px 8px;
+  border-color: transparent transparent #fff transparent;
+}
+
+/* top */
+.pos-top .dropdownCollection::after {
+  top: 100%;
+  border-width: 8px 8px 0 8px;
+  border-color: #fff transparent transparent transparent;
+}
+
+/* left */
+.pos-left .dropdownCollection::after {
+  top: 12px;
+  left: 100%;
+  border-width: 8px 8px 8px 0;
+  border-color: transparent #fff transparent transparent;
+}
+
+/* right */
+.pos-right .dropdownCollection::after {
+  top: 12px;
+  right: 100%;
+  border-width: 8px 0 8px 8px;
+  border-color: transparent transparent transparent #fff;
+}
+
+/* ================================
+   align 内容对齐方式（影响 dropdown）
+   ================================ */
+
+/* 内容左对齐 */
+.align-left .dropdownCollection {
+  left: 0;
+}
+
+/* 内容居中对齐 */
+.align-center .dropdownCollection {
+  left: 50%;
+  transform: translateX(-50%) scale(0.95);
+}
+.menuDropdown.align-center:hover .dropdownCollection {
+  transform: translateX(-50%) scale(1);
+}
+
+/* 内容右对齐 */
+.align-right .dropdownCollection {
+  right: 0;
+}
+
+/* ================================
+   箭头随 align 变化（完整补丁）
+   ================================ */
+
+/* ===== bottom 系列 ===== */
+
+/* left */
+.pos-bottom.align-left .dropdownCollection::after {
+  left: 15px;
+}
+
+/* center */
+.pos-bottom.align-center .dropdownCollection::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* right */
+.pos-bottom.align-right .dropdownCollection::after {
+  right: 15px;
+}
+
+
+/* ===== top 系列 ===== */
+
+/* left */
+.pos-top.align-left .dropdownCollection::after {
+  left: 15px;
+}
+
+/* center */
+.pos-top.align-center .dropdownCollection::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* right */
+.pos-top.align-right .dropdownCollection::after {
+  right: 15px;
+}
+
+/* 左右方向不需要 align，因为箭头垂直居中即可 */
+</style>

package/components/templates/omsLayout.vue

@@ -0,0 +1,109 @@
+<script>
+import { mapPref, THEME_SHORTCUT } from '@shell/store/prefs';
+import ActionMenu from '@shell/components/ActionMenu';
+import Header from '@shell/components/nav/Header';
+import PromptRemove from '@shell/components/PromptRemove';
+import IndentedPanel from '@shell/components/IndentedPanel';
+import Brand from '@shell/mixins/brand';
+import FixedBanner from '@shell/components/FixedBanner';
+import GrowlManager from '@shell/components/GrowlManager';
+import ModalManager from '@shell/components/ModalManager';
+import AwsComplianceBanner from '@shell/components/AwsComplianceBanner';
+import AzureWarning from '@shell/components/auth/AzureWarning';
+import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
+import { mapGetters } from 'vuex';
+import PromptModal from '@shell/components/PromptModal';
+
+export default {
+
+  components: {
+    ActionMenu,
+    Header,
+    IndentedPanel,
+    PromptRemove,
+    PromptModal,
+    FixedBanner,
+    GrowlManager,
+    ModalManager,
+    AwsComplianceBanner,
+    AzureWarning,
+  },
+
+  mixins: [Brand, BrowserTabVisibility],
+
+  data() {
+    return {
+      // Assume home pages have routes where the name is the key to use for string lookup
+      name:             this.$route.name,
+      noLocaleShortcut: process.env.dev || false,
+    };
+  },
+
+  computed: {
+    themeShortcut: mapPref(THEME_SHORTCUT),
+    ...mapGetters(['showTopLevelMenu']),
+  },
+
+  methods: {
+    toggleTheme() {
+      this.$store.dispatch('prefs/toggleTheme');
+    },
+    toggleNoneLocale() {
+      this.$store.dispatch('i18n/toggleNone');
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="dashboard-root">
+    <div
+      class="dashboard-content"
+      :class="{'dashboard-padding-left': showTopLevelMenu}"
+    >
+      <Header :simple="true" />
+      <main
+        class="main-layout"
+        :aria-label="t('layouts.plain')"
+      >
+        <router-view
+          :key="$route.path"
+          class="outlet"
+        />
+      </main>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .dashboard-root {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+  .dashboard-content {
+    display: grid;
+    flex-grow: 1;
+
+    grid-template-areas:
+      "header"
+      "main";
+
+    grid-template-columns: auto;
+    grid-template-rows:    var(--header-height) auto;
+
+    > HEADER {
+      grid-area: header;
+    }
+  }
+
+  MAIN {
+    grid-area: main;
+    overflow: auto;
+
+    .outlet {
+      min-height: 100%;
+      padding: 0;
+    }
+  }
+</style>

package/config/product/order.js

@@ -0,0 +1,117 @@
+import { DSL, IF_HAVE, isAdminUser } from '@shell/store/type-map';
+// import IframePage from '@/shell/list/IframePage.vue';
+export const NAME = 'order';
+
+
+export function init(store) { // 只传 store
+  const { product, virtualType, basicType } = DSL(store, NAME); // DSL 直接用 store 和 NAME
+  
+  let paths = { name: 'c-cluster-order-tenantIframe' }
+
+  // if (isAdminUser(store.getters)) {
+  //   paths = { name: 'c-cluster-order-tenantIframe' }
+  // } else {
+  //   paths = { name: 'c-cluster-order-ServiceMarketIframe' }
+  // }
+
+  // 顶级产品
+  product({
+    ifHave: IF_HAVE.ADMIN,
+    inStore: 'management',
+    icon: 'extension',
+    removable: false,
+    showClusterSwitcher: false,
+    weight: -10,
+  });
+
+  virtualType({
+    ifHave: IF_HAVE.ADMIN,
+    label: '租户',
+    icon: 'user',
+    namespaced: false,
+    name: 'tenant-iframe',
+    weight: 102,
+    route: {
+      name: 'c-cluster-order-tenantIframe',
+      params: {
+        cluster:  '_',
+        product:  NAME,
+      }
+    }
+  });
+
+  // virtualType({
+  //   ifHave: IF_HAVE.ADMIN,
+  //   label:   '订单管理',
+  //   icon:       'user',
+  //   namespaced: false,
+  //   name:       'order-iframe',
+  //   weight:     100,
+  //   route:      {
+  //     name: 'c-cluster-order-orderIframe',
+  //     params: {
+  //       cluster:  '_',
+  //       product:  NAME,
+  //     }
+  //   }
+  // });
+  
+  // // 二级菜单 2：可以增加其他管理页面
+  // virtualType({
+  //   ifHave: IF_HAVE.ADMIN,
+  //   label: '商品上架',
+  //   icon: 'user',
+  //   namespaced: false,
+  //   name: 'shelfist-iframe',
+  //   weight: 101,
+  //   route: {
+  //     name: 'c-cluster-order-shelfistIframe',
+  //     params: {
+  //       cluster:  '_',
+  //       product:  NAME,
+  //     }
+  //   }
+  // });
+
+  // virtualType({
+  //   ifHave: IF_HAVE.TENANT,
+  //   label: '服务市场',
+  //   icon: 'user',
+  //   namespaced: false,
+  //   name: 'ServiceMarket-iframe',
+  //   weight: 99,
+  //   route: {
+  //     name: 'c-cluster-order-ServiceMarketIframe',
+  //     params: {
+  //       cluster:  '_',
+  //       product:  NAME,
+  //     }
+  //   }
+  // });
+
+  
+  // virtualType({
+  //   ifHave: IF_HAVE.TENANT,
+  //   label: '我的订单',
+  //   icon: 'user',
+  //   namespaced: false,
+  //   name: 'orderInfo-iframe',
+  //   weight: 98,
+  //   route: {
+  //     name: 'c-cluster-order-orderInfoIframe',
+  //     params: {
+  //       cluster:  '_',
+  //       product:  NAME,
+  //     }
+  //   }
+  // });
+
+  basicType([
+    // 'order-iframe',
+    'tenant-iframe',
+    // 'shelfist-iframe',
+    // 'ServiceMarket-iframe',
+    // 'orderInfo-iframe'
+  ]);
+
+}

package/config/router/routes.js

@@ -67,6 +67,19 @@ export default [
       },
     ]
   },
+  // {
+  //   path:      '/',
+  //   component: () => interopDefault(import('@shell/components/templates/omsLayout.vue')),
+  //   name:      'omsLayout',
+  //   meta:      { requiresAuthentication: true },
+  //   children:  [
+  //     {
+  //       path:      '/c/:cluster/order/order-iframe',
+  //       component: () => interopDefault(import('@shell/pages/csm/order-iframe.vue')),
+  //       name:      'c-cluster-order-iframe'
+  //     },
+  //   ]
+  // },
   {
     path:      '/',
     component: () => interopDefault(import('@shell/components/templates/plain.vue')),
@@ -169,6 +182,31 @@ export default [
     name:      'default',
     meta:      { requiresAuthentication: true },
     children:  [
+      {
+        path:      '/c/:cluster/order/orderInfo-iframe',
+        component: () => interopDefault(import('@shell/pages/csm/orderInfo-iframe.vue')),
+        name:      'c-cluster-order-orderInfoIframe'
+      },
+      {
+        path:      '/c/:cluster/order/ServiceMarket-iframe',
+        component: () => interopDefault(import('@shell/pages/csm/ServiceMarket-iframe.vue')),
+        name:      'c-cluster-order-ServiceMarketIframe'
+      },
+      {
+        path:      '/c/:cluster/order/shelfist-iframe',
+        component: () => interopDefault(import('@shell/pages/csm/shelfist-iframe.vue')),
+        name:      'c-cluster-order-shelfistIframe'
+      },
+      {
+        path:      '/c/:cluster/order/order-iframe',
+        component: () => interopDefault(import('@shell/pages/csm/order-iframe.vue')),
+        name:      'c-cluster-order-orderIframe'
+      },
+      {
+        path:      '/c/:cluster/order/tenant-iframe',
+        component: () => interopDefault(import('@shell/pages/csm/tenant-iframe.vue')),
+        name:      'c-cluster-order-tenantIframe'
+      },
       {
         path:      '/clusters',
         component: () => interopDefault(import('@shell/pages/clusters/index.vue')),
@@ -330,8 +368,7 @@ export default [
             },
           },
         ]
-      },
-      {
+      }, {
         path:      '/c/:cluster/auth/config',
         component: () => interopDefault(import('@shell/pages/c/_cluster/auth/config/index.vue')),
         name:      'c-cluster-auth-config'

package/list/IframePage.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>2222222</div>
+</template>

package/list/provisioning.cattle.io.cluster.vue

@@ -303,7 +303,38 @@ export default {
           </div>
         </td>
       </template>
-      <template #cell:explorer="{row}">
+      <!-- ==============================
+        name 列 → 使用 explorer 的行为
+        ============================== -->
+      <template #cell:name="{ row }">
+        <router-link
+          v-if="row.mgmt && row.mgmt.isReady && !row.hasError"
+          data-testid="cluster-manager-list-explore-management"
+          :to="{name: 'c-cluster', params: {cluster: row.mgmt.id}}"
+        >
+          <a href="javascript:;">
+            {{ row.nameDisplay || row.name }}
+          </a>
+        </router-link>
+
+        <span v-else>
+          {{ row.nameDisplay || row.name }}
+        </span>
+      </template>
+
+      <!-- ==========================================
+          explorer 列 → 使用 name 原本的导航行为
+          ========================================== -->
+      <template #cell:explorer="{ row }">
+        <router-link
+          :to="row._detailLocation || row.listLocation"
+        >
+          <a href="javascript:;">
+            {{ t('cluster.explore') }}
+          </a>
+        </router-link>
+      </template>
+      <!-- <template #cell:explorer="{row}">
         <router-link
           v-if="row.mgmt && row.mgmt.isReady && !row.hasError"
           data-testid="cluster-manager-list-explore-management"
@@ -319,7 +350,7 @@ export default {
         >
           {{ t('cluster.explore') }}
         </span>
-      </template>
+      </template> -->
     </ResourceTable>
   </div>
 </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dashboard-shell-shell",
-  "version": "3.0.5-logtest.3",
+  "version": "3.0.5-order.2",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",