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

package/rancher-components/LabeledTooltip/LabeledTooltip.vue

@@ -109,9 +109,9 @@ export default defineComponent({
 
      .status-icon {
         position:  absolute;
-        right: 30px;
-        top: $input-padding-lg;
-        z-index: z-index(hoverOverContent);
+        right: 5px;
+        top: 10px;
+        z-index: 3;
      }
 
     @mixin tooltipColors($color) {
@@ -120,11 +120,19 @@ export default defineComponent({
         }
     }
 
+    &.null {
+
+        .status-icon {
+          top: 8px !important;
+          right: 25px !important;
+        }
+    }
+
     &.error {
         @include tooltipColors(var(--error));
 
         .status-icon {
-          top: 7px;
+          top: 9px !important;
           right: 5px;
         }
     }
@@ -138,6 +146,35 @@ export default defineComponent({
     }
 }
 
+.labeled-select{
+  .labeled-tooltip{
+    &.null {
+        .status-icon {
+          top: 10px !important;
+          right: 25px !important;
+        }
+    }
+
+    &.error {
+
+        .status-icon {
+          top: 9px !important;
+          right: 20px;
+        }
+    }
+  }
+}
+.labeled-input{
+  .labeled-tooltip{
+    &.null {
+        .status-icon {
+          top: 10px !important;
+          right: 10px !important;
+        }
+    }
+  }
+}
+
 // Ensure code blocks inside tootips don't look awful
 .v-popper__popper.v-popper--theme-tooltip {
   .v-popper__inner {

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/build-pkg.sh

@@ -2,7 +2,6 @@
 
 SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 BASE_DIR="$( cd $SCRIPT_DIR && cd ../.. & pwd)"
-SHELL_DIR=$BASE_DIR/shell/
 EXIT_CODE=0
 FORMATS="umd-min"
 
@@ -19,12 +18,18 @@ done
 
 shift $((OPTIND-1))
 
-# Use shell folder in node modules when we have @rancher/shell installed as a node module
-# rather than the use-case of the mono-repo with the shell folder at the top-level
-if [ ! -d ${SHELL_DIR} ]; then
-  SHELL_DIR=$BASE_DIR/node_modules/@rancher/shell/
-  SHELL_DIR=$(cd -P ${SHELL_DIR} && pwd)
+# ---- 修改这里 ----
+# 优先使用顶级 shell 文件夹，如果不存在则使用 node_modules/dashboard-shell-shell
+SHELL_DIR=$BASE_DIR/shell/
+if [ ! -d "${SHELL_DIR}" ]; then
+  SHELL_DIR=$BASE_DIR/node_modules/dashboard-shell-shell/
+  if [ ! -d "${SHELL_DIR}" ]; then
+    echo "Error: dashboard-shell-shell not found in node_modules"
+    exit 1
+  fi
 fi
+# 转为绝对路径，防止符号链接循环
+SHELL_DIR=$(cd -P "${SHELL_DIR}" && pwd)
 
 CREATE_TARBALL=${2}
 
@@ -46,18 +51,14 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
 
   pushd pkg/${1}
 
-  # Check that the .shell link exists and points to the correct place
-  if [ -e ".shell" ]; then
-    LINK=$(readlink .shell)
-    if [ "${LINK}" != "${SHELL_DIR}" ]; then
-      echo ".shell symlink exists but does not point to expected location - please check and fix"
-      popd
-      exit -1
-    fi
-  else
-    ln -s ${SHELL_DIR} .shell
+  # 删除旧的 .shell，防止循环
+  if [ -L ".shell" ] || [ -e ".shell" ]; then
+    rm -rf .shell
   fi
 
+  # 创建新的符号链接
+  ln -s "${SHELL_DIR}" .shell
+
   FILE=index.js
   if [ -f ./index.ts ]; then
     FILE=index.ts
@@ -72,7 +73,7 @@ if [ -d "${BASE_DIR}/pkg/${1}" ]; then
   cp -f ./package.json ${PKG_DIST}/package.json
   node ${SCRIPT_DIR}/pkgfile.js ${PKG_DIST}/package.json
   rm -rf ${PKG_DIST}/*.bak
-  rm .shell
+  rm -rf .shell
 
   popd  
 fi
@@ -81,22 +82,16 @@ if [ $EXIT_CODE -ne 0 ]; then
   exit $EXIT_CODE
 fi
 
-
 if [ -n "${CREATE_TARBALL}" ]; then
   echo $COMMIT $COMMIT_BRANCH > ${PKG_DIST}/version-commit.txt
 
   TARBALL=${NAME}.tar.gz
 
   pushd ${PKG_DIST}
-
   rm -f ../$TARBALL
-
   echo "Compressing to ${TARBALL}..."
-
   tar -czf ../${TARBALL} .
-
   popd
-
 fi
 
 exit $EXIT_CODE

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.61 ./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,
@@ -108,6 +108,7 @@ export const getters = {
         ...args
       };
 
+      moreArgs['count'] = moreArgs['count'] !== undefined ? moreArgs['count'] : 1
       return formatter.format(moreArgs);
     } else {
       return '?';
@@ -229,8 +230,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,10 @@ export const getters = {
           }
         }
 
+        if ( icon ) {
+          label = `<i class="icon icon-fw icon-${ icon }"></i>${ label }`;
+        }
+
         return label;
       }
     };
@@ -1471,6 +1495,10 @@ export const getters = {
 };
 
 export const mutations = {
+  setActionsWidth(state, width) {
+    state.actionsWidth = width
+  },
+
   schemaChanged(state) {
     state.schemaGeneration = state.schemaGeneration + 1;
   },