feat: added tooltip

package.json

@@ -1,6 +1,6 @@
 {
   "name": "crawlab-ui",
-  "version": "0.6.3-1",
+  "version": "0.6.3-2",
   "private": false,
   "author": {
     "name": "Marvin Zhang",

src/components/spider/SpiderForm.vue

@@ -108,6 +108,8 @@
     >
       <cl-switch
         v-model="form.auto_install"
+        :tooltip="systemInfo.edition === 'global.edition.community' ? t('components.spider.form.autoInstallDisabled') : undefined"
+        :disabled="systemInfo.edition === 'global.edition.community'"
       />
     </cl-form-item>
     <!-- ./Row -->
@@ -190,7 +192,7 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, ref, watch} from 'vue';
+import {computed, defineComponent, ref, watch} from 'vue';
 import {useStore} from 'vuex';
 import useSpider from '@/components/spider/spider';
 import useNode from '@/components/node/node';
@@ -211,6 +213,12 @@ export default defineComponent({
     // store
     const store = useStore();
 
+    const {
+      common: commonState
+    } = store.state as RootStoreState;
+
+    const systemInfo = computed<SystemInfo>(() => commonState.systemInfo || {});
+
     // use node
     const {
       allListSelectOptions: allNodeSelectOptions,
@@ -271,6 +279,7 @@ export default defineComponent({
       ...useSpider(store),
 
       // custom
+      systemInfo,
       TASK_MODE_SELECTED_NODES,
       TASK_MODE_SELECTED_NODE_TAGS,
       allNodeSelectOptions,

src/components/switch/Switch.vue

@@ -1,18 +1,20 @@
 <template>
-  <el-switch
-    v-model="internalValue"
-    :active-color="activeColor"
-    :active-icon="activeIconComp"
-    :active-text="activeText"
-    :disabled="disabled"
-    :inactive-color="inactiveColor"
-    :inactive-icon="inactiveIconComp"
-    :inactive-text="inactiveText"
-    :loading="loading"
-    :width="width"
-    :inline-prompt="inlinePrompt"
-    @change="onChange"
-  />
+  <el-tooltip :content="tooltip" :disabled="!tooltip">
+    <el-switch
+      v-model="internalValue"
+      :active-color="activeColor"
+      :active-icon="activeIconComp"
+      :active-text="activeText"
+      :disabled="disabled"
+      :inactive-color="inactiveColor"
+      :inactive-icon="inactiveIconComp"
+      :inactive-text="inactiveText"
+      :loading="loading"
+      :width="width"
+      :inline-prompt="inlinePrompt"
+      @change="onChange"
+    />
+  </el-tooltip>
 </template>
 
 <script lang="ts">
@@ -64,6 +66,9 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    tooltip: {
+      type: String,
+    },
   },
   emits: [
     'update:model-value',

src/i18n/lang/en/components/spider.ts

@@ -12,6 +12,7 @@ const spider: LComponentsSpider = {
     priority: 'Priority',
     incrementalSync: 'Incremental Sync',
     autoInstall: 'Auto Install',
+    autoInstallDisabled: 'Auto Install (available in Crawlab Pro)',
   },
   actions: {
     files: {

src/i18n/lang/zh/components/spider.ts

@@ -12,6 +12,7 @@ const spider: LComponentsSpider = {
     priority: '优先级',
     incrementalSync: '增量同步文件',
     autoInstall: '自动安装依赖',
+    autoInstallDisabled: '自动安装依赖 (仅限 Crawlab Pro)',
   },
   actions: {
     files: {

src/interfaces/components/switch/Switch.d.ts

@@ -11,5 +11,6 @@ export declare global {
     width?: number;
     loading?: boolean;
     inlinePrompt?: boolean;
+    tooltip?: string;
   }
 }

src/interfaces/i18n/components/spider.d.ts

@@ -12,6 +12,7 @@ interface LComponentsSpider {
     priority: string;
     incrementalSync: string;
     autoInstall: string;
+    autoInstallDisabled: string;
   };
   actions: {
     files: {