删除 tipsPreference.

orion-ops-ui/src/components/global-setting/block.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="block">
     <h5 class="title">{{ title }}</h5>
-    <div v-for="option in options" :key="option.name" class="option-wrapper">
-      <!-- 偏好项 -->
-      <span>{{ option.name }}</span>
-      <!-- 偏好值 -->
-      <form-wrapper :name="option.key"
-                    :type="option.type as string"
-                    :default-value="option.defaultVal"
-                    :options="option.options"
-                    @input-change="handleChange" />
-    </div>
+    <template v-for="option in options" :key="option.name">
+      <div class="option-wrapper" v-permission="option.permission || []">
+        <!-- 偏好项 -->
+        <span>{{ option.name }}</span>
+        <!-- 偏好值 -->
+        <form-wrapper :name="option.key"
+                      :type="option.type as string"
+                      :default-value="option.defaultVal"
+                      :options="option.options"
+                      @input-change="handleChange" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -26,6 +28,7 @@
     name: string;
     key: string;
     type?: string;
+    permission?: string[];
     defaultVal?: boolean | string | number;
     options?: Array<RadioOption>;
   }

orion-ops-ui/src/components/global-setting/index.vue

@@ -78,6 +78,7 @@
       name: '主机列表',
       key: 'hostView',
       type: 'radio-group',
+      permission: ['asset:host:query'],
       defaultVal: appStore.hostView,
       options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]
     },
@@ -85,6 +86,7 @@
       name: '主机秘钥',
       key: 'hostKeyView',
       type: 'radio-group',
+      permission: ['asset:host-key:query'],
       defaultVal: appStore.hostKeyView,
       options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]
     },
@@ -92,6 +94,7 @@
       name: '主机身份',
       key: 'hostIdentityView',
       type: 'radio-group',
+      permission: ['asset:host-identity:query'],
       defaultVal: appStore.hostIdentityView,
       options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]
     },

orion-ops-ui/src/components/navbar/index.vue

@@ -117,16 +117,31 @@
       </li>
       <!-- 偏好设置 -->
       <li>
-        <a-tooltip content="偏好设置">
-          <a-button class="nav-btn"
-                    type="outline"
-                    shape="circle"
-                    @click="openGlobalSetting">
-            <template #icon>
-              <icon-settings />
-            </template>
-          </a-button>
-        </a-tooltip>
+        <a-popover :popup-visible="tippedPreference" position="br">
+          <template #title>
+            💡 点击这里可以修改系统偏好~
+          </template>
+          <template #content>
+           <span style="line-height: 1.8">
+             ◾ 可以修改页面布局<br>
+             ◾ 可以切换显示视图
+           </span>
+            <div class="tips-buttons">
+              <a-button size="mini" class="mr8" @click="closePreferenceTip(false)">关闭</a-button>
+              <a-button size="mini" type="primary" @click="closePreferenceTip(true)">不在提醒</a-button>
+            </div>
+          </template>
+          <a-tooltip content="偏好设置">
+            <a-button class="nav-btn"
+                      type="outline"
+                      shape="circle"
+                      @click="openGlobalSetting">
+              <template #icon>
+                <icon-settings />
+              </template>
+            </a-button>
+          </a-tooltip>
+        </a-popover>
       </li>
       <!-- 用户信息 -->
       <li>
@@ -177,6 +192,8 @@
   import MessageBox from '../message-box/index.vue';
   import { openGlobalSettingKey, toggleDrawerMenuKey } from '@/types/symbol';
 
+  // TODO 默认值
+  const tippedPreference = ref(true);
   const appStore = useAppStore();
   const userStore = useUserStore();
   const { logout } = useUser();
@@ -201,7 +218,9 @@
     valueLight: 'light',
     storageKey: 'arco-theme',
     onChanged(dark: boolean) {
-      appStore.toggleTheme(dark);
+      appStore.updateSettings({
+        theme: dark ? 'dark' : 'light'
+      });
     },
   });
 
@@ -232,6 +251,15 @@
 
   // 注入收缩菜单
   const toggleDrawerMenu = inject(toggleDrawerMenuKey) as () => void;
+
+  // 关闭偏好提示
+  const closePreferenceTip = (ack: boolean) => {
+    tippedPreference.value = false;
+    if (ack) {
+      // TODO 修改
+    }
+  };
+
 </script>
 
 <style scoped lang="less">
@@ -296,4 +324,11 @@
       margin-top: 0;
     }
   }
+
+  .tips-buttons {
+    margin-top: 12px;
+    display: flex;
+    justify-content: flex-end;
+  }
+
 </style>