style(系统设置): 修改插件样式

frontend/src/views/setting/organization/serviceIntegration/components/serviceList.vue

@@ -59,6 +59,14 @@
                   <a-button type="outline" class="arco-btn-outline--secondary" size="mini" @click="editHanlder(item)">{{
                     t('organization.service.edit')
                   }}</a-button>
+                  <a-button
+                    v-if="item.isConfig"
+                    type="outline"
+                    class="arco-btn-outline--secondary"
+                    size="mini"
+                    @click="resetHanlder(item)"
+                    >{{ t('organization.service.reset') }}</a-button
+                  >
                 </a-space>
                 <span>
                   <a-tooltip v-if="!item.isConfig" :content="t('organization.service.unconfiguredTip')" position="br">
@@ -155,6 +163,8 @@
   const editHanlder = (item: any) => {
     serviceVisible.value = true;
   };
+  const resetHanlder = (item: any) => {};
+
   onMounted(() => {
     setTimeout(() => {
       const result = JSON.stringify([

frontend/src/views/setting/organization/serviceIntegration/locale/en-US.ts

@@ -22,6 +22,7 @@ export default {
   'organization.service.configured': 'Configured',
   'organization.service.methodOfAuthentication': 'Method of authentication',
   'organization.service.edit': 'Edit',
+  'organization.service.reset': 'Reset',
   'organization.service.unconfiguredTip': 'Not configured yet. Configure and open on the edit page',
   'organization.service.batchActionAddUsergroup': 'Add to usergroup',
   'organization.service.tableEnable': 'Enabled',

frontend/src/views/setting/organization/serviceIntegration/locale/zh-CN.ts

@@ -18,6 +18,7 @@ export default {
   'organization.service.configured': '已配置',
   'organization.service.methodOfAuthentication': '认证方式',
   'organization.service.edit': '编辑',
+  'organization.service.reset': '重置',
   'organization.service.unconfiguredTip': '暂未配置，可在编辑页配置并开启',
   'organization.service.batchActionAddUsergroup': '添加至用户组',
   'organization.service.tableEnable': '正常',

frontend/src/views/setting/system/pluginManager/components/pluginTable.vue

@@ -20,99 +20,105 @@
         ></a-input-search>
       </a-col>
     </a-row>
-    <a-table
+    <div class="ms-table-wrapper flex flex-col justify-between">
-      :data="filterData"
+      <div>
-      :pagination="false"
+        <a-table
-      :scroll="{ y: 386, x: 2400 }"
+          :data="filterData"
-      :expandable="expandable"
+          :pagination="false"
-      :loading="loading"
+          :scroll="{ y: 500, x: 2400 }"
-      row-key="id"
+          :expandable="expandable"
-      :expanded-row-keys="expandedRowKeys"
+          :loading="loading"
-      @expand="handleExpand"
+          row-key="id"
-    >
+          :expanded-row-keys="expandedRowKeys"
-      <template #columns>
+          @expand="handleExpand"
-        <a-table-column fixed="left" :title="t('system.plugin.tableColunmName')">
+        >
-          <template #cell="{ record }">
+          <template #columns>
-            {{ record.name }} <span class="text-[--color-text-4]">({{ (record.pluginForms || []).length }})</span>
+            <a-table-column fixed="left" :title="t('system.plugin.tableColunmName')">
+              <template #cell="{ record }">
+                {{ record.name }} <span class="text-[--color-text-4]">({{ (record.pluginForms || []).length }})</span>
+              </template>
+            </a-table-column>
+            <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="description" />
+            <a-table-column :title="t('system.plugin.tableColunmStatus')">
+              <template #cell="{ record }">
+                <div v-if="record.enable" class="flex items-center">
+                  <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
+                  {{ t('system.user.tableEnable') }}
+                </div>
+                <div v-else class="flex items-center text-[var(--color-text-4)]">
+                  <icon-stop class="mr-[2px]" />
+                  {{ t('system.user.tableDisable') }}
+                </div>
+              </template>
+            </a-table-column>
+            <a-table-column :title="t('system.plugin.tableColunmApplicationScene')" data-index="scenario">
+              <template #cell="{ record }">{{
+                record.scenario === 'API' ? t('system.plugin.secneApi') : t('system.plugin.secneProManger')
+              }}</template>
+            </a-table-column>
+            <a-table-column :title="t('system.user.tableColunmOrg')">
+              <template #cell="{ record }">
+                <a-tag
+                  v-for="org of record.organizations"
+                  :key="org.id"
+                  class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
+                  bordered
+                >
+                  {{ org.name }}
+                </a-tag>
+                <a-tag
+                  v-show="(record.organizations || []).length > 2"
+                  class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
+                  bordered
+                >
+                  +{{ (record.organizations || []).length - 2 }}
+                </a-tag>
+              </template>
+            </a-table-column>
+            <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="fileName" />
+            <a-table-column :title="t('system.plugin.tableColunmVersion')" data-index="pluginId" />
+            <a-table-column :title="t('system.plugin.tableColunmAuthorization')">
+              <template #cell="{ record }">
+                <span>{{
+                  record.xpack ? t('system.plugin.uploadOpenSource') : t('system.plugin.uploadCompSource')
+                }}</span>
+              </template>
+            </a-table-column>
+            <a-table-column :title="t('system.plugin.tableColunmCreatedBy')" data-index="createUser" />
+            <a-table-column :title="t('system.plugin.tableColunmUpdateTime')">
+              <template #cell="{ record }">
+                <span>{{ getTime(record.updateTime) }}</span>
+              </template>
+            </a-table-column>
+            <a-table-column :width="200" fixed="right" align="center" :bordered="false">
+              <template #title>
+                {{ t('system.plugin.tableColunmActions') }}
+              </template>
+              <template #cell="{ record }">
+                <MsButton @click="update(record)">{{ t('system.plugin.edit') }}</MsButton>
+                <MsButton v-if="record.enable" @click="disableHandler(record)">{{
+                  t('system.plugin.tableDisable')
+                }}</MsButton>
+                <MsButton v-else @click="enableHandler(record)">{{ t('system.plugin.tableEnable') }}</MsButton>
+                <MsTableMoreAction :list="tableActions" @select="handleSelect($event, record)"></MsTableMoreAction>
+              </template>
+            </a-table-column>
           </template>
-        </a-table-column>
+          <template #expand-icon="{ record, expanded }">
-        <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="description" />
+            <span v-if="(record.pluginForms || []).length && !expanded" class="collapsebtn"
-        <a-table-column :title="t('system.plugin.tableColunmStatus')">
+              ><icon-plus :style="{ 'font-size': '12px' }"
-          <template #cell="{ record }">
+            /></span>
-            <div v-if="record.enable" class="flex items-center">
+            <span v-else-if="(record.pluginForms || []).length && expanded" class="expand"
-              <icon-check-circle-fill class="mr-[2px] text-[rgb(var(--success-6))]" />
+              ><icon-minus class="text-[rgb(var(--primary-6))]" :style="{ 'font-size': '12px' }"
-              {{ t('system.user.tableEnable') }}
+            /></span>
-            </div>
-            <div v-else class="flex items-center text-[var(--color-text-4)]">
-              <icon-stop class="mr-[2px]" />
-              {{ t('system.user.tableDisable') }}
-            </div>
           </template>
-        </a-table-column>
+        </a-table>
-        <a-table-column :title="t('system.plugin.tableColunmApplicationScene')" data-index="scenario">
+      </div>
-          <template #cell="{ record }">{{
+      <div class="ms-footerNum"
-            record.scenario === 'API' ? t('system.plugin.secneApi') : t('system.plugin.secneProManger')
+        >{{ t('system.plugin.totalNum') }}<span class="mx-2">{{ totalNum }}</span
-          }}</template>
+        >{{ t('system.plugin.dataList') }}</div
-        </a-table-column>
+      >
-        <a-table-column :title="t('system.user.tableColunmOrg')">
+    </div>
-          <template #cell="{ record }">
-            <a-tag
-              v-for="org of record.organizations"
-              :key="org.id"
-              class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
-              bordered
-            >
-              {{ org.name }}
-            </a-tag>
-            <a-tag
-              v-show="(record.organizations || []).length > 2"
-              class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
-              bordered
-            >
-              +{{ (record.organizations || []).length - 2 }}
-            </a-tag>
-          </template>
-        </a-table-column>
-        <a-table-column :title="t('system.plugin.tableColunmDescription')" data-index="fileName" />
-        <a-table-column :title="t('system.plugin.tableColunmVersion')" data-index="pluginId" />
-        <a-table-column :title="t('system.plugin.tableColunmAuthorization')">
-          <template #cell="{ record }">
-            <span>{{ record.xpack ? t('system.plugin.uploadOpenSource') : t('system.plugin.uploadCompSource') }}</span>
-          </template>
-        </a-table-column>
-        <a-table-column :title="t('system.plugin.tableColunmCreatedBy')" data-index="createUser" />
-        <a-table-column :title="t('system.plugin.tableColunmUpdateTime')">
-          <template #cell="{ record }">
-            <span>{{ getTime(record.updateTime) }}</span>
-          </template>
-        </a-table-column>
-        <a-table-column :width="200" fixed="right" align="center" :bordered="false">
-          <template #title>
-            {{ t('system.plugin.tableColunmActions') }}
-          </template>
-          <template #cell="{ record }">
-            <MsButton @click="update(record)">{{ t('system.plugin.edit') }}</MsButton>
-            <MsButton v-if="record.enable" @click="disableHandler(record)">{{
-              t('system.plugin.tableDisable')
-            }}</MsButton>
-            <MsButton v-else @click="enableHandler(record)">{{ t('system.plugin.tableEnable') }}</MsButton>
-            <MsTableMoreAction :list="tableActions" @select="handleSelect($event, record)"></MsTableMoreAction>
-          </template>
-        </a-table-column>
-      </template>
-      <template #expand-icon="{ record, expanded }">
-        <span v-if="(record.pluginForms || []).length && !expanded" class="collapsebtn"
-          ><icon-plus :style="{ 'font-size': '12px' }"
-        /></span>
-        <span v-else-if="(record.pluginForms || []).length && expanded" class="expand"
-          ><icon-minus class="text-[rgb(var(--primary-6))]" :style="{ 'font-size': '12px' }"
-        /></span>
-      </template>
-    </a-table>
-    <div class="ms-footerNum"
-      >{{ t('system.plugin.totalNum') }}<span class="mx-2">{{ totalNum }}</span
-      >{{ t('system.plugin.dataList') }}</div
-    >
     <UploadModel
       v-model:visible="uploadVisible"
       :originize-list="originizeList"
@@ -386,6 +392,12 @@
     @apply bg-white;
   }
   .ms-footerNum {
-    @apply absolute bottom-0 mt-4 text-sm text-slate-500;
+    height: 22px;
+    line-height: 22px;
+    @apply mt-4 text-sm text-slate-500;
+  }
+  .ms-table-wrapper {
+    height: calc(100vh - 236px);
+    min-height: 400px;
   }
 </style>