dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.9

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -52,7 +52,7 @@ const {
 
 provideDropdownContext();
 
-const popperContainer = ref(null);
+// const popperContainer = ref(null);
 const dropdownTarget = ref(null);
 
 useClickOutside(dropdownTarget, () => showMenu(false));
@@ -71,16 +71,30 @@ const applyShow = () => {
     :triggers="[]"
     :shown="isMenuOpen"
     :auto-hide="false"
-    :container="popperContainer"
+    append-to-body
     :placement="placement"
     :distance="distance"
     @apply-show="applyShow"
+    popper-class="custom-dropdown" 
   >
     <slot name="default">
       <!--Empty slot content Trigger-->
     </slot>
 
     <template #popper>
+      <!-- <div
+        ref="dropdownTarget"
+        class="dropdownTarget"
+        tabindex="-1"
+        role="menu"
+        aria-orientation="vertical"
+        dropdown-menu-collection
+        :aria-label="ariaLabel || 'Dropdown Menu'"
+        @keydown="handleKeydown"
+        @keydown.down.prevent="setFocus('down')"
+        @keydown.up.prevent="setFocus('up')"
+        
+      > -->
       <div
         ref="dropdownTarget"
         class="dropdownTarget"
@@ -92,6 +106,8 @@ const applyShow = () => {
         @keydown="handleKeydown"
         @keydown.down.prevent="setFocus('down')"
         @keydown.up.prevent="setFocus('up')"
+        @keydown.tab="showMenu(false)"
+        @keydown.escape="returnFocus"
       >
         <slot name="dropdownCollection">
           <!--Empty slot content-->
@@ -99,14 +115,13 @@ const applyShow = () => {
       </div>
     </template>
   </v-dropdown>
-  <div
+  <!-- <div
     ref="popperContainer"
     class="popperContainer"
     @keydown.tab="showMenu(false)"
     @keydown.escape="returnFocus"
   >
-    <!--Empty container for mounting popper content-->
-  </div>
+  </div> -->
 </template>
 
 <style lang="scss" scoped>
@@ -115,7 +130,8 @@ const applyShow = () => {
     &:deep(.v-popper__popper) {
 
       .v-popper__wrapper {
-        box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
+        box-shadow: 0 5px 20px var(--shadow);
+        /* box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.25), 0px 4px 10px 0px rgba(0, 0, 0, 0.15); */
         border-radius: var(--border-radius-lg);
 
         .v-popper__arrow-container {
@@ -124,7 +140,9 @@ const applyShow = () => {
 
         .v-popper__inner {
           overflow: unset;
-          padding: 10px 0 10px 0;
+          /* padding: 10px 0 10px 0; */
+          padding: 0px;
+          /* min-width: 145px; */
         }
       }
     }
@@ -138,4 +156,14 @@ const applyShow = () => {
       outline: none;
     }
   }
+
+  .custom-dropdown{
+    .v-popper__wrapper{
+      .v-popper__inner {
+        padding: 0px;
+      }
+    }
+  }
+
 </style>
+

package/rancher-components/RcDropdown/RcDropdownItem.vue

@@ -52,8 +52,8 @@ const handleClick = (e: MouseEvent) => {
     display: flex;
     gap: 8px;
     align-items: center;
-    padding: 9px 8px;
-    margin: 0 9px;
+    padding: 8px 10px;
+    min-width: 145px;
     border-radius: 4px;
 
     &:hover {

package/rancher-components/RcDropdown/RcDropdownMenu.vue

@@ -11,6 +11,8 @@ import IconOrSvg from '@shell/components/IconOrSvg';
 withDefaults(defineProps<RcDropdownMenuComponentProps>(), {
   buttonRole: 'primary',
   buttonSize: undefined,
+  isDetail: false,
+  showIcon: false
 });
 
 const emit = defineEmits(['update:open', 'select']);
@@ -31,7 +33,10 @@ const hasOptions = (options: DropdownOption[]) => {
       :data-testid="dataTestid"
       :aria-label="buttonAriaLabel"
     >
-      <i class="icon icon-actions" />
+    <div v-if="showIcon">
+      <i data-v-5db2c2c7="" class="icon icon-actions" alt="More actions icon"></i>
+    </div>
+    <a v-else href="javascript:;">操作</a>
     </rc-dropdown-trigger>
     <template #dropdownCollection>
       <template
@@ -42,7 +47,7 @@ const hasOptions = (options: DropdownOption[]) => {
           v-if="!a.divider"
           @click="(e: MouseEvent) => emit('select', e, a)"
         >
-          <template #before>
+          <!-- <template #before>
             <IconOrSvg
               v-if="a.icon || a.svg"
               :icon="a.icon"
@@ -50,18 +55,19 @@ const hasOptions = (options: DropdownOption[]) => {
               class="icon"
               color="header"
             />
-          </template>
+          </template> -->
           {{ a.label }}
         </rc-dropdown-item>
-        <rc-dropdown-separator
+        <!-- <rc-dropdown-separator
           v-else
-        />
+        /> -->
       </template>
       <rc-dropdown-item
         v-if="!hasOptions(options)"
         disabled
       >
-        No actions available
+        <!-- No actions available -->
+         暂无可执行的操作。
       </rc-dropdown-item>
     </template>
   </rc-dropdown>

package/rancher-components/RcDropdown/types.ts

@@ -46,4 +46,5 @@ export type RcDropdownMenuComponentProps = {
   buttonAriaLabel?: string;
   dropdownAriaLabel?: string;
   dataTestid?: string;
+  showIcon?: Boolean;
 }

package/rancher-components/StringList/StringList.vue

@@ -633,7 +633,7 @@ export default defineComponent({
 }
 
 :deep() {
-  .labeled-input INPUT.no-label,
+  // .labeled-input INPUT.no-label,
   .labeled-input INPUT:hover.no-label,
   .labeled-input INPUT:focus.no-label {
     padding: 1px 0px 0px 0px;

package/scripts/publish-shell.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 # 执行命令示例：
-# TAG=shell-pkg-v3.0.2-rc.105 ./shell/scripts/publish-shell.sh
+# TAG=shell-pkg-v3.0.5-test.8 ./shell/scripts/publish-shell.sh
 
 set -euo pipefail
 

package/static/loading-indicator.html

@@ -15,14 +15,14 @@
   animation: initial-load-animate 1s infinite linear;
   background-color: transparent;
   box-sizing: border-box;
-  border: 5px solid #008ACF;
+  border: 5px solid #1890FF;
   border-radius: 50%;
-  border-top-color: #00B2E2;
+  border-top-color: transparent;
   display: inline-block;
   height: 80px;
   margin: 0 auto;
   width: 80px;
-}
+}}
 
 @keyframes initial-load-animate {
   0% {

package/store/i18n.js

@@ -18,7 +18,7 @@ export const state = function() {
   // const available = translationContext.keys().map(path => path.replace(/^.*\/([^\/]+)\.[^.]+$/, '$1'));
   // Using require.context() forces them to all be in the same webpack chunk name... just hardcode the list for now so zh-hans
   // gets generated as it's own chunk instead of being loaded all the time.
-  const available = [DEFAULT_LOCALE, 'zh-hans'];
+  const available = ['zh-hans', DEFAULT_LOCALE];
 
   const out = {
     default:      DEFAULT_LOCALE,
@@ -229,8 +229,11 @@ export const actions = {
     const exists = !!state.available.find((loc) => loc === selected);
 
     if ( !selected || !exists) {
-      selected = state.default;
+      selected = 'zh-hans';
     }
+    
+    // selected = 'none'
+    selected = 'zh-hans'
 
     return dispatch('switchTo', selected);
   },

package/store/modal.ts

@@ -17,7 +17,7 @@ const state = (): ModalState => ({
   componentProps:      {},
   resources:           [],
   closeOnClickOutside: false,
-  modalWidth:          '600px',
+  modalWidth:          '610px',
   modalSticky:         false
 });
 
@@ -45,7 +45,7 @@ const mutations: MutationTree<ModalState> = {
     state.componentProps = payload.componentProps || {};
     state.resources = Array.isArray(payload.resources) ? payload.resources : (payload.resources ? [payload.resources] : []);
     state.closeOnClickOutside = payload.closeOnClickOutside ?? false;
-    state.modalWidth = payload.modalWidth || '600px';
+    state.modalWidth = payload.modalWidth || '610px';
     state.modalSticky = payload.modalSticky ?? false;
   },
 
@@ -55,7 +55,7 @@ const mutations: MutationTree<ModalState> = {
     state.componentProps = {};
     state.resources = [];
     state.closeOnClickOutside = false;
-    state.modalWidth = '600px';
+    state.modalWidth = '610px';
     state.modalSticky = false;
   }
 };

package/store/prefs.js

@@ -57,14 +57,14 @@ export const PINNED_CLUSTERS = create('pinned-clusters', [], { parseJSON });
 export const GROUP_RESOURCES = create('group-by', 'namespace');
 export const DIFF = create('diff', 'unified', { options: ['unified', 'split'] });
 export const THEME = create('theme', 'auto', {
-  options:     ['light', 'auto', 'dark'],
+  options:     ['light'],
   asCookie,
   parseJSON,
   mangleRead:  (x) => x.replace(/^ui-/, ''),
-  mangleWrite: (x) => `ui-${ x }`,
+  mangleWrite: (x) => `ui-light`, // 接口同时修改为 白色
 });
 export const PREFERS_SCHEME = create('pcs', '', { asCookie, asUserPreference: false });
-export const LOCALE = create('locale', 'en-us', { asCookie });
+export const LOCALE = create('locale', 'zh-hans', { asCookie });
 export const KEYMAP = create('keymap', 'sublime', { options: ['sublime', 'emacs', 'vim'] });
 export const ROWS_PER_PAGE = create('per-page', 100, { options: [10, 25, 50, 100], parseJSON });
 export const LOGS_WRAP = create('logs-wrap', true, { parseJSON });
@@ -149,6 +149,11 @@ export const getters = {
 
     const def = clone(definition.def);
 
+    if (key === THEME) {
+      // 无论 state 里存的是什么，都强制返回 light
+      return 'light';
+    }
+
     return def;
   },
 
@@ -470,7 +475,9 @@ export const actions = {
         try {
           value = JSON.parse(value);
         } catch (err) {
-          console.error('Error parsing server pref', key, value, err); // eslint-disable-line no-console
+          // 容错处理：如果后端返回 map[...] 这样的字符串，直接忽略或重置为空
+          console.warn(`Pref ${ key } has invalid JSON, resetting`, value);
+          value = definition.defaultValue || null;
           continue;
         }
       }

package/store/type-map.js

@@ -395,6 +395,7 @@ export function productsLoaded() {
 
 export const state = function() {
   return {
+    actionsWidth:            0,
     products:                [],
     virtualTypes:            {},
     spoofedTypes:            {},
@@ -464,6 +465,8 @@ export const getters = {
     };
   },
 
+  actionsWidth: (state) => state.actionsWidth,
+
   // Turns a group name into a display label (e.g. management.cattle.io.v3.cluster -> Cluster)
   groupLabelFor(state) {
     return (schemaOrName) => {
@@ -509,6 +512,12 @@ export const getters = {
       return state.basicTypes?.[product]?.[schemaId];
     };
   },
+  
+  groupsForVirTypes(state) {
+    return (product, name) => {
+      return state?.virtualTypes?.[product]?.find(item => item.name === name)?.icon;
+    };
+  },
 
   optionsFor(state, getters, rootState, rootGetters) {
     const def = {
@@ -661,7 +670,18 @@ export const getters = {
 
         const label = typeObj.labelKey ? rootGetters['i18n/t'](typeObj.labelKey) || typeObj.label : typeObj.label;
 
-        let labelDisplay = highlightLabel(label, count, typeObj.schema);
+        const virtual = !!typeObj.virtual;
+        let icon = typeObj.icon;
+
+        if ( (!virtual || typeObj.isSpoofed ) && !icon ) {
+          if ( namespaced ) {
+            icon = 'folder';
+          } else {
+            icon = 'globe';
+          }
+        }
+
+        let labelDisplay = highlightLabel(label, icon, count, typeObj.schema);
 
         // If we did not match on just the label, add the schema name and see if that matches
         if (!labelDisplay && typeObj.schema?.attributes) {
@@ -778,7 +798,7 @@ export const getters = {
         return group;
       }
 
-      function highlightLabel(original, count, schema) {
+      function highlightLabel(original, icon, count, schema) {
         let label = escapeHtml(original);
 
         if ( searchRegex ) {
@@ -802,6 +822,12 @@ export const getters = {
           }
         }
 
+        if ( icon ) {
+          console.log(icon)
+          label = `<i class="icon icon-fw icon-${ icon }"></i>${ label }`;
+          console.log(label)
+        }
+
         return label;
       }
     };
@@ -1471,6 +1497,10 @@ export const getters = {
 };
 
 export const mutations = {
+  setActionsWidth(state, width) {
+    state.actionsWidth = width
+  },
+
   schemaChanged(state) {
     state.schemaGeneration = state.schemaGeneration + 1;
   },