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

2025-06-24 11:44:02 +08:00 · 2025-06-24 11:44:02 +08:00 · 13e7d15784
commit 13e7d15784
parent 8dada43656
4 changed files with 101 additions and 32 deletions
--- a/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
+++ b/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;
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/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
--- a/core/core-frontend/src/views/workbranch/ShortcutTable.vue
+++ b/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,12 +100,14 @@ const triggerFilterPanel = () => {
  loadTableData()
 }
 const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
-const preview = id => {
-  const routeUrl = resolve({
-    path: '/preview',
-    query: { dvId: id }
-  })
-  window.open(routeUrl.href, '_blank')
+const preview = (id, disabled = false) => {
+  if (!disabled) {
+    const routeUrl = resolve({
+      path: '/preview',
+      query: { dvId: id }
+    })
+    window.open(routeUrl.href, '_blank')
+  }
 }

 const openDataset = id => {
@ -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,14 +241,20 @@ const executeStore = rowInfo => {
  })
 }

+const checkDisabled = row => {
+  return activeName.value === 'store' && !row.extFlag1
+}
+
 const executeCancelStore = rowInfo => {
-  const param = {
-    id: rowInfo.resourceId,
-    type: rowInfo.type === 'dataV' ? 'screen' : 'panel'
+  if (!checkDisabled(rowInfo)) {
+    const param = {
+      id: rowInfo.resourceId,
+      type: rowInfo.type === 'dataV' ? 'screen' : 'panel'
+    }
+    storeApi(param).then(() => {
+      loadTableData()
+    })
  }
-  storeApi(param).then(() => {
-    loadTableData()
-  })
 }

 const imgType = 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 {
--- a/core/core-frontend/src/views/workbranch/index.vue
+++ b/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>