更新前端src/views/（template-market，toolbox，watermark，wizard，workbranch）目录文件

core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue

@@ -135,7 +135,7 @@
           </div>
         </el-row>
         <el-row v-if="state.curTemplate" class="img-main">
-          <img style="height: 100%" :src="imgUrlTrans(state.templatePreviewUrl)" alt="" />
+          <img :src="imgUrlTrans(state.templatePreviewUrl)" alt="" />
         </el-row>
       </el-col>
     </el-row>
@@ -151,7 +151,7 @@ import { searchMarketPreview } from '@/api/templateMarket'
 import { onMounted, reactive, watch, ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import TemplateMarketPreviewItem from '@/views/template-market/component/TemplateMarketPreviewItem.vue'
-import { deepCopy } from '@/utils/utils'
+import { deepCopy, getActiveCategories } from '@/utils/utils'
 import { imgUrlTrans } from '@/utils/imgUtils'
 
 const { t } = useI18n()
@@ -269,6 +269,11 @@ const initMarketTemplate = () => {
       state.marketTemplatePreviewShowList = rsp.data.contents
       state.hasResult = true
       state.categories = rsp.data.categories
+      initTemplateShow()
+      const activeCategoriesShow = getActiveCategories(state.currentMarketTemplateShowList)
+      state.categories = rsp.data.categories.filter(category =>
+        activeCategoriesShow.has(category.label)
+      )
       activeCategories.value = deepCopy(state.categories)
       if (props.previewId) {
         state.marketTemplatePreviewShowList.forEach(categoryTemplates => {
@@ -377,9 +382,10 @@ onMounted(() => {
   }
 }
 .aside-list {
-  padding: 0px 12px 12px 12px;
+  padding: 0 12px 12px 12px;
   width: 100%;
   height: calc(100vh - 200px);
+  overflow-x: hidden;
   //overflow-y: auto;
   :deep(.ed-collapse) {
     --ed-collapse-header-font-size: 14px !important;
@@ -506,6 +512,7 @@ onMounted(() => {
   white-space: nowrap;
   cursor: pointer;
   color: var(--TextPrimary, #1f2329);
+  background: rgba(255, 255, 255, 1);
   -webkit-appearance: none;
   text-align: center;
   box-sizing: border-box;
@@ -611,6 +618,13 @@ onMounted(() => {
   width: 100%;
   height: calc(100% - 76px) !important;
 }
+
+.img-main img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain; /* 保持图片比例，不裁剪 */
+}
+
 .open-button {
   cursor: pointer;
   font-size: 30px;
@@ -658,8 +672,8 @@ onMounted(() => {
   cursor: pointer;
   font-weight: 400;
   color: #646a73;
-  min-width: 64px;
   height: 22px;
+  line-height: 22px;
   display: flex;
   align-items: center;
   white-space: nowrap;
@@ -675,7 +689,7 @@ onMounted(() => {
     height: 100%;
     transform: translate(-50%, -50%);
     display: none;
-    border-radius: 4px 0 0 0;
+    border-radius: 4px;
   }
 
   &:hover {
@@ -700,6 +714,7 @@ onMounted(() => {
   font-weight: 400;
   color: #1f2329;
   cursor: default;
+  margin-left: 4px;
 }
 .mp-divider {
   border-color: #1f232926;

core/core-frontend/src/views/template-market/index.vue

@@ -119,6 +119,7 @@
           v-show="state.networkStatus && state.hasResult"
           id="template-show-area"
           class="template-right"
+          style="padding-top: 16px"
         >
           <el-row v-if="state.marketActiveTab === null"
             ><TemplateSkeleton :width="state.templateCurWidth"
@@ -141,6 +142,9 @@
             <el-row v-show="state.marketActiveTab === t('work_branch.recommend')">
               <el-row
                 style="display: inline; width: 100%; margin-bottom: 32px"
+                :style="{
+                  marginBottom: categoryItem.label !== t('work_branch.recent') ? '32px' : 0
+                }"
                 v-for="(categoryItem, index) in categoriesComputed"
                 :key="index"
               >
@@ -171,7 +175,7 @@
           </div>
         </el-row>
         <el-row v-show="!state.networkStatus" class="template-empty">
-          {{ t('visualization.market_network_tips') }}
+          111 {{ t('visualization.market_network_tips', [state.baseUrl]) }}
         </el-row>
       </el-row>
     </el-row>
@@ -197,6 +201,7 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { XpackComponent } from '@/components/plugin'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { Base64 } from 'js-base64'
+import { getActiveCategories } from '@/utils/utils'
 const { t } = useI18n()
 const { wsCache } = useCache()
 const embeddedStore = useEmbedded()
@@ -415,12 +420,16 @@ const initMarketTemplate = async () => {
     .then(rsp => {
       state.baseUrl = rsp.data.baseUrl
       state.currentMarketTemplateShowList = rsp.data.contents
-      state.marketTabs = rsp.data.categories
-      state.marketActiveTab = state.marketTabs[1].label
       initStyle()
       initTemplateShow()
+      const activeCategories = getActiveCategories(state.currentMarketTemplateShowList)
+      state.marketTabs = rsp.data.categories.filter(category =>
+        activeCategories.has(category.label)
+      )
+      state.marketActiveTab = state.marketTabs[1].label
     })
-    .catch(() => {
+    .catch(err => {
+      console.error('searchMarket:', err)
       state.networkStatus = false
     })
 }
@@ -466,7 +475,7 @@ const templateApply = template => {
   apply(template)
 }
 
-const apply = template => {
+const apply = () => {
   if (state.dvCreateForm.newFrom === 'new_market_template' && !state.dvCreateForm.templateUrl) {
     ElMessage.warning(t('template_manage.get_download_link_hint'))
     return false

core/core-frontend/src/views/workbranch/ShortcutTable.vue

@@ -8,7 +8,7 @@ import icon_database_outlined from '@/assets/svg/icon_database_outlined.svg'
 import icon_operationAnalysis_outlined from '@/assets/svg/icon_operation-analysis_outlined.svg'
 import dvDashboardSpineMobile from '@/assets/svg/dv-dashboard-spine-mobile.svg'
 import icon_pc_outlined from '@/assets/svg/icon_pc_outlined.svg'
-import icon_cancel_store from '@/assets/svg/icon_cancel_store.svg'
+import dvDashboardSpineMobileDisabled from '@/assets/svg/dv-dashboard-spine-mobile-disabled.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 import { ref, reactive, onMounted, computed, watch } from 'vue'
 import type { TabsPaneContext } from 'element-plus-secondary'
@@ -61,6 +61,7 @@ const iconMap = {
   panelMobile: dvDashboardSpineMobile,
   dashboard: icon_dashboard_outlined,
   dashboardMobile: dvDashboardSpineMobile,
+  dashboardMobileDisabled: dvDashboardSpineMobileDisabled,
   screen: icon_operationAnalysis_outlined,
   dataV: icon_operationAnalysis_outlined,
   dataset: icon_app_outlined,
@@ -99,13 +100,15 @@ const triggerFilterPanel = () => {
   loadTableData()
 }
 const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
-const preview = id => {
+const preview = (id, disabled = false) => {
+  if (!disabled) {
     const routeUrl = resolve({
       path: '/preview',
       query: { dvId: id }
     })
     window.open(routeUrl.href, '_blank')
   }
+}
 
 const openDataset = id => {
   const routeUrl = resolve({
@@ -198,7 +201,7 @@ const sortChange = param => {
 }
 
 const handleCellClick = row => {
-  if (row) {
+  if (row && !checkDisabled(row)) {
     const sourceId = activeName.value === 'recent' ? row.id : row.resourceId
     if (['dashboard', 'panel'].includes(row.type)) {
       window.open('#/panel/index?dvId=' + sourceId, '_self')
@@ -238,7 +241,12 @@ const executeStore = rowInfo => {
   })
 }
 
+const checkDisabled = row => {
+  return activeName.value === 'store' && !row.extFlag1
+}
+
 const executeCancelStore = rowInfo => {
+  if (!checkDisabled(rowInfo)) {
     const param = {
       id: rowInfo.resourceId,
       type: rowInfo.type === 'dataV' ? 'screen' : 'panel'
@@ -247,6 +255,7 @@ const executeCancelStore = rowInfo => {
       loadTableData()
     })
   }
+}
 
 const imgType = ref()
 const emptyDesc = ref('')
@@ -352,18 +361,32 @@ const getEmptyDesc = (): string => {
                   <Icon
                     ><component
                       class="svg-icon"
-                      :is="iconMap[scope.row.type + 'Mobile']"
+                      :is="
+                        iconMap[
+                          scope.row.type + 'Mobile' + (checkDisabled(scope.row) ? 'Disabled' : '')
+                        ]
+                      "
                     ></component
                   ></Icon>
                 </el-icon>
-                <el-icon v-else :class="`main-color color-${scope.row.type}`">
+                <el-icon
+                  v-else
+                  :class="`main-color color-${scope.row.type} custom-color${
+                    checkDisabled(scope.row) ? '-disabled' : ''
+                  }`"
+                >
                   <Icon
                     ><component class="svg-icon" :is="iconMap[scope.row.type]"></component
                   ></Icon>
                 </el-icon>
                 <el-tooltip placement="top">
                   <template #content>{{ scope.row.name }}</template>
-                  <span class="ellipsis" style="max-width: 250px">{{ scope.row.name }}</span>
+                  <span
+                    class="ellipsis"
+                    :class="{ 'color-disabled': checkDisabled(scope.row) }"
+                    style="max-width: 250px"
+                    >{{ scope.row.name }}</span
+                  >
                 </el-tooltip>
                 <el-icon
                   v-if="activeName === 'recent' && ['screen', 'panel'].includes(scope.row.type)"
@@ -406,17 +429,24 @@ const getEmptyDesc = (): string => {
 
           <el-table-column width="100" fixed="right" key="_operation" :label="$t('common.operate')">
             <template #default="scope">
-              <div style="display: flex; flex-direction: row; align-items: center">
+              <div
+                style="display: flex; flex-direction: row; align-items: center"
+                :class="{ 'opt-disabled': checkDisabled(scope.row) }"
+              >
                 <template v-if="['dashboard', 'dataV', 'panel', 'screen'].includes(scope.row.type)">
                   <el-tooltip
                     effect="dark"
                     :content="t('work_branch.new_page_preview')"
+                    :disabled="checkDisabled(scope.row)"
                     placement="top"
                   >
                     <el-icon
                       class="hover-icon hover-icon-in-table"
                       @click.stop="
-                        preview(activeName === 'recent' ? scope.row.id : scope.row.resourceId)
+                        preview(
+                          activeName === 'recent' ? scope.row.id : scope.row.resourceId,
+                          checkDisabled(scope.row)
+                        )
                       "
                     >
                       <Icon name="icon_pc_outlined"><icon_pc_outlined class="svg-icon" /></Icon>
@@ -425,6 +455,7 @@ const getEmptyDesc = (): string => {
                   <ShareHandler
                     v-if="!shareDisable"
                     :in-grid="true"
+                    :disabled="checkDisabled(scope.row)"
                     :weight="scope.row.weight"
                     :resource-id="activeName === 'recent' ? scope.row.id : scope.row.resourceId"
                     :resource-type="scope.row.type"
@@ -432,6 +463,7 @@ const getEmptyDesc = (): string => {
                   <el-tooltip
                     v-if="activeName === 'store'"
                     effect="dark"
+                    :disabled="checkDisabled(scope.row)"
                     :content="t('work_branch.cancel_favorites')"
                     placement="top"
                   >
@@ -439,7 +471,7 @@ const getEmptyDesc = (): string => {
                       class="hover-icon hover-icon-in-table"
                       @click.stop="executeCancelStore(scope.row)"
                     >
-                      <Icon name="icon_cancel_store"><icon_cancel_store class="svg-icon" /></Icon>
+                      <Icon name="icon_cancel_store"><visualStar class="svg-icon" /></Icon>
                     </el-icon>
                   </el-tooltip>
                 </template>
@@ -568,6 +600,19 @@ const getEmptyDesc = (): string => {
 .jump-active {
   cursor: pointer;
 }
+
+.color-disabled {
+  color: #bbbfc4;
+}
+
+.opt-disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+.custom-color-disabled {
+  background: #bbbfc4 !important;
+}
 </style>
 <style lang="less">
 .menu-panel-select_popper {

core/core-frontend/src/views/workbranch/index.vue

@@ -345,7 +345,7 @@ loadShareBase()
               v-if="!ele['menuAuth'] || !ele['anyManage']"
               class="box-item"
               effect="dark"
-              :content="t('work_branch.template_market_official')"
+              :content="t('work_branch.permission_to_create')"
               placement="top"
             >
               <div class="empty-tooltip-container" />
@@ -430,7 +430,7 @@ loadShareBase()
             </div>
           </el-row>
           <el-row v-show="!state.networkStatus" class="template-empty">
-            {{ t('visualization.market_network_tips') }}
+            {{ t('visualization.market_network_tips', [state.baseUrl]) }}
           </el-row>
         </template>
       </div>