refactor: 将全局配置文件 platform-config.json中的ShowModel重命名为TagsStyle，以更准确地反映其语义

public/platform-config.json

@@ -18,7 +18,7 @@
   "SidebarStatus": true,
   "EpThemeColor": "#409EFF",
   "ShowLogo": true,
-  "ShowModel": "smart",
+  "TagsStyle": "chrome",
   "MenuArrowIconNoTransition": false,
   "CachingAsyncRoutes": false,
   "TooltipEffect": "light",

src/layout/components/lay-content/index.vue

@@ -13,7 +13,7 @@ const props = defineProps({
 });
 
 const { t } = useI18n();
-const { showModel } = useTags();
+const { tagsStyle } = useTags();
 const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
 
 const isKeepAlive = computed(() => {
@@ -54,13 +54,13 @@ const getSectionStyle = computed(() => {
   return [
     hideTabs.value && layout ? "padding-top: 48px;" : "",
     !hideTabs.value && layout
-      ? showModel.value == "chrome"
+      ? tagsStyle.value == "chrome"
         ? "padding-top: 85px;"
         : "padding-top: 81px;"
       : "",
     hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
     !hideTabs.value && !layout.value
-      ? showModel.value == "chrome"
+      ? tagsStyle.value == "chrome"
         ? "padding-top: 85px;"
         : "padding-top: 81px;"
       : "",

src/layout/components/lay-setting/index.vue

@@ -53,8 +53,8 @@ if (unref(layoutTheme)) {
   setMenuLayout(layout);
 }
 
-/** 默认灵动模式 */
+/** 页签风格默认为谷歌风格 */
-const markValue = ref($storage.configure?.showModel ?? "smart");
+const tagsStyleValue = ref($storage.configure?.tagsStyle ?? "chrome");
 
 const logoVal = ref($storage.configure?.showLogo ?? true);
 
@@ -63,7 +63,7 @@ const settings = reactive({
   weakVal: $storage.configure.weak,
   tabsVal: $storage.configure.hideTabs,
   showLogo: $storage.configure.showLogo,
-  showModel: $storage.configure.showModel,
+  tagsStyle: $storage.configure.tagsStyle,
   hideFooter: $storage.configure.hideFooter,
   multiTagsCache: $storage.configure.multiTagsCache,
   stretch: $storage.configure.stretch
@@ -124,9 +124,9 @@ const multiTagsCacheChange = () => {
 
 function onChange({ option }) {
   const { value } = option;
-  markValue.value = value;
+  tagsStyleValue.value = value;
-  storageConfigureChange("showModel", value);
+  storageConfigureChange("tagsStyle", value);
-  emitter.emit("tagViewsShowModel", value);
+  emitter.emit("tagViewsTagsStyle", value);
 }
 
 /** 侧边栏Logo */
@@ -442,7 +442,9 @@ onUnmounted(() => removeMatchMedia);
       <Segmented
         resize
         class="select-none"
-        :modelValue="markValue === 'smart' ? 0 : markValue === 'card' ? 1 : 2"
+        :modelValue="
+          tagsStyleValue === 'smart' ? 0 : tagsStyleValue === 'card' ? 1 : 2
+        "
         :options="markOptions"
         @change="onChange"
       />

src/layout/components/lay-tag/index.vue

@@ -32,11 +32,11 @@ const {
   visible,
   showTags,
   instance,
+  tagsStyle,
   multiTags,
   tagsViews,
   buttonTop,
   buttonLeft,
-  showModel,
   translateX,
   isFixedTag,
   pureSetting,
@@ -542,8 +542,8 @@ onMounted(() => {
   });
 
   // 改变标签风格
-  emitter.on("tagViewsShowModel", key => {
+  emitter.on("tagViewsTagsStyle", key => {
-    showModel.value = key;
+    tagsStyle.value = key;
   });
 
   //  接收侧边栏切换传递过来的参数
@@ -559,9 +559,9 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  // 解绑`tagViewsChange`、`tagViewsShowModel`、`changLayoutRoute`公共事件，防止多次触发
+  // 解绑`tagViewsChange`、`tagViewsTagsStyle`、`changLayoutRoute`公共事件，防止多次触发
   emitter.off("tagViewsChange");
-  emitter.off("tagViewsShowModel");
+  emitter.off("tagViewsTagsStyle");
   emitter.off("changLayoutRoute");
 });
 </script>
@@ -574,7 +574,7 @@ onBeforeUnmount(() => {
     <div
       ref="scrollbarDom"
       class="scroll-container"
-      :class="showModel === 'chrome' && 'chrome-scroll-container'"
+      :class="tagsStyle === 'chrome' && 'chrome-scroll-container'"
       @wheel.prevent="handleWheel"
     >
       <div ref="tabDom" class="tab select-none" :style="getTabStyle">
@@ -585,7 +585,7 @@ onBeforeUnmount(() => {
           :class="[
             'scroll-item is-closable',
             linkIsActive(item),
-            showModel === 'chrome' && 'chrome-item',
+            tagsStyle === 'chrome' && 'chrome-item',
             isFixedTag(item) && 'fixed-tag'
           ]"
           @contextmenu.prevent="openMenu(item, $event)"
@@ -593,7 +593,7 @@ onBeforeUnmount(() => {
           @mouseleave.prevent="onMouseleave(index)"
           @click="tagOnClick(item)"
         >
-          <template v-if="showModel !== 'chrome'">
+          <template v-if="tagsStyle !== 'chrome'">
             <span
               class="tag-title dark:text-text_color_primary! dark:hover:text-primary!"
             >
@@ -612,7 +612,7 @@ onBeforeUnmount(() => {
               <IconifyIconOffline :icon="Close" />
             </span>
             <span
-              v-if="showModel !== 'card'"
+              v-if="tagsStyle !== 'card'"
               :ref="'schedule' + index"
               :class="[scheduleIsActive(item)]"
             />

src/layout/hooks/useLayout.ts

@@ -40,7 +40,7 @@ export function useLayout() {
         hideTabs: $config?.HideTabs ?? false,
         hideFooter: $config.HideFooter ?? true,
         showLogo: $config?.ShowLogo ?? true,
-        showModel: $config?.ShowModel ?? "smart",
+        tagsStyle: $config?.TagsStyle ?? "chrome",
         multiTagsCache: $config?.MultiTagsCache ?? false,
         stretch: $config?.Stretch ?? false
       };

src/layout/hooks/useTag.ts

@@ -44,11 +44,11 @@ export function useTags() {
   const currentSelect = ref({});
   const isScrolling = ref(false);
 
-  /** 显示模式，默认灵动模式 */
+  /** 页签风格默认为谷歌风格 */
-  const showModel = ref(
+  const tagsStyle = ref(
     storageLocal().getItem<StorageConfigs>(
       `${responsiveStorageNameSpace()}configure`
-    )?.showModel || "smart"
+    )?.tagsStyle || "chrome"
   );
   /** 是否隐藏标签页，默认显示 */
   const showTags =
@@ -175,7 +175,7 @@ export function useTags() {
   /** 鼠标移入添加激活样式 */
   function onMouseenter(index) {
     if (index) activeIndex.value = index;
-    if (unref(showModel) === "smart") {
+    if (unref(tagsStyle) === "smart") {
       if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
         return;
       toggleClass(true, "schedule-in", instance.refs["schedule" + index][0]);
@@ -190,7 +190,7 @@ export function useTags() {
   /** 鼠标移出恢复默认样式 */
   function onMouseleave(index) {
     activeIndex.value = -1;
-    if (unref(showModel) === "smart") {
+    if (unref(tagsStyle) === "smart") {
       if (hasClass(instance.refs["schedule" + index][0], "schedule-active"))
         return;
       toggleClass(false, "schedule-in", instance.refs["schedule" + index][0]);
@@ -209,11 +209,11 @@ export function useTags() {
   }
 
   onMounted(() => {
-    if (!showModel.value) {
+    if (!tagsStyle.value) {
       const configure = storageLocal().getItem<StorageConfigs>(
         `${responsiveStorageNameSpace()}configure`
       );
-      configure.showModel = "card";
+      configure.tagsStyle = "card";
       storageLocal().setItem(
         `${responsiveStorageNameSpace()}configure`,
         configure
@@ -229,7 +229,7 @@ export function useTags() {
     showTags,
     instance,
     multiTags,
-    showModel,
+    tagsStyle,
     tagsViews,
     buttonTop,
     buttonLeft,

src/utils/mitt.ts

@@ -8,7 +8,7 @@ type Events = {
   logoChange: boolean;
   tagViewsChange: string;
   changLayoutRoute: string;
-  tagViewsShowModel: string;
+  tagViewsTagsStyle: string;
   imageInfo: {
     img: HTMLImageElement;
     height: number;

src/utils/responsive.ts

@@ -29,7 +29,7 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
         hideTabs: config.HideTabs ?? false,
         hideFooter: config.HideFooter ?? true,
         showLogo: config.ShowLogo ?? true,
-        showModel: config.ShowModel ?? "smart",
+        tagsStyle: config.TagsStyle ?? "chrome",
         multiTagsCache: config.MultiTagsCache ?? false,
         stretch: config.Stretch ?? false
       }

types/global.d.ts

@@ -102,7 +102,7 @@ declare global {
     SidebarStatus?: boolean;
     EpThemeColor?: string;
     ShowLogo?: boolean;
-    ShowModel?: string;
+    TagsStyle?: string;
     MenuArrowIconNoTransition?: boolean;
     CachingAsyncRoutes?: boolean;
     TooltipEffect?: Effect;
@@ -142,7 +142,7 @@ declare global {
     themeColor?: string;
     themeMode?: string;
     showLogo?: boolean;
-    showModel?: string;
+    tagsStyle?: string;
     menuSearchHistory?: number;
     mapConfigure?: {
       amapKey?: string;
@@ -177,7 +177,7 @@ declare global {
       hideTabs?: boolean;
       hideFooter?: boolean;
       showLogo?: boolean;
-      showModel?: string;
+      tagsStyle?: string;
       multiTagsCache?: boolean;
       stretch?: boolean | number;
     };