卡片结构

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

@@ -76,23 +76,23 @@
   const viewsOpts = computed(() => [
     {
       name: '主机列表',
-      key: 'host',
+      key: 'hostView',
       type: 'radio-group',
-      defaultVal: appStore.host,
+      defaultVal: appStore.hostView,
       options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]
     },
     {
       name: '主机秘钥',
-      key: 'hostKeys',
+      key: 'hostKeyView',
       type: 'radio-group',
-      defaultVal: appStore.hostKeys,
+      defaultVal: appStore.hostKeyView,
       options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]
     },
     {
       name: '主机身份',
-      key: 'hostIdentity',
+      key: 'hostIdentityView',
       type: 'radio-group',
-      defaultVal: appStore.hostIdentity,
+      defaultVal: appStore.hostIdentityView,
       options: [{ value: 'table', label: '表格' }, { value: 'card', label: '卡片' }]
     },
   ]);

orion-ops-ui/src/store/modules/app/index.ts

@@ -16,9 +16,9 @@ const defaultConfig: AppState = {
   menuWidth: 220,
   colorWeak: false,
   // 用户偏好-页面视图
-  host: 'table',
-  hostKeys: 'table',
-  hostIdentity: 'table',
+  hostView: 'table',
+  hostKeyView: 'table',
+  hostIdentityView: 'table',
 };
 
 export default defineStore('app', {

orion-ops-ui/src/store/modules/app/types.ts

@@ -1,6 +1,6 @@
 export type Theme = 'light' | 'dark'
 export type Device = 'desktop' | 'mobile'
-export type ViewType = 'table' | 'card'
+export type ViewType = 'table' | 'card' | undefined
 
 /**
  * 应用状态
@@ -36,7 +36,7 @@ export interface UserPreferenceLayout {
  * 用户偏好 - 页面视图
  */
 export interface UserPreferenceViews {
-  host: ViewType | string;
-  hostKeys: ViewType | string;
-  hostIdentity: ViewType | string;
+  hostView: ViewType;
+  hostKeyView: ViewType;
+  hostIdentityView: ViewType;
 }

orion-ops-ui/src/views/asset/host/components/host-card-list.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="card-list-layout">
+    <div class="card-list-header">
+      <!-- title slot -->
+      <!-- plusIcon |  field field field searchFieldInput searchIcon resetIcon  -->
+      <!-- margin -->
+      <!-- cardList / empty -->
+      <!-- margin -->
+      <!-- page -->
+
+      <div>
+        title
+      </div>
+      <div class="card-list-header-left">
+      </div>
+      <div class="card-list-header-right">
+        right search/add
+      </div>
+    </div>
+    <div>
+      card 区域
+      <a-row :gutter="cardLayoutGutter">
+        <a-col v-for="item in list"
+               :key="item.id"
+               class="wrapper"
+               v-bind="cardLayoutCols">
+          <a-card class="general-card"
+                  :bordered="false"
+                  :hoverable="true"
+                  style="width: 98%; height: 120px;">
+            <template #title>
+              {{ item.name }}
+            </template>
+            <template #extra>
+              <icon-more />
+            </template>
+          </a-card>
+        </a-col>
+      </a-row>
+    </div>
+    <div>
+      page 区域
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'host-card-list'
+  };
+</script>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+
+  const cardLayoutGutter = [
+    { xs: 16, sm: 16, md: 16 },
+    { xs: 16, sm: 16, md: 16 }
+  ];
+
+  const cardLayoutCols = {
+    xs: 24,
+    sm: 12,
+    md: 8,
+    lg: 6,
+    xl: 4,
+    xxl: 4,
+  };
+
+  const list = ref<Array<any>>([]);
+
+  for (let i = 0; i < 20; i++) {
+    list.value.push({
+      id: i + 1,
+      name: `名称 ${i + 1}`,
+      host: `192.168.1.${i}`
+    });
+  }
+
+</script>
+
+<style scoped lang="less">
+  .card-list-layout {
+    .card-list-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: var(--color-bg-4);
+
+      &-left {
+        color: red;
+      }
+
+      &-right {
+        color: blue;
+      }
+    }
+
+  }
+
+  .general-card {
+    transition-property: all;
+  }
+
+  .general-card:hover {
+    transform: translateY(-4px);
+  }
+</style>

orion-ops-ui/src/views/asset/host/components/host-config-ssh-form.vue

@@ -138,8 +138,7 @@
 </script>
 
 <script lang="ts" setup>
-  import { reactive, ref, watch } from 'vue';
-  import useLoading from '@/hooks/loading';
+  import { ref, watch } from 'vue';
   import { updateHostConfigStatus, updateHostConfig } from '@/api/asset/host';
   import { HostSshConfig, AuthTypeEnum } from '@/views/asset/host/types/host-config.types';
   import { sshRules } from '@/views/asset/host/types/host-config.rules';
@@ -147,7 +146,7 @@
   import HostIdentitySelector from '@/components/asset/host-identity/host-identity-selector.vue';
   import { toOptions } from '@/utils/enum';
   import { FieldRule, Message } from '@arco-design/web-vue';
-  import { RoleUpdateRequest } from '@/api/user/role';
+  import useLoading from '@/hooks/loading';
 
   const { loading, setLoading } = useLoading();
 

orion-ops-ui/src/views/asset/host/index.vue

@@ -1,10 +1,17 @@
 <template>
   <div class="layout-container">
-    <!-- 表格 -->
-    <host-table ref="table"
+    <!-- 列表-表格 -->
+    <host-table v-if="renderTable"
+                ref="table"
                 @openAdd="() => modal.openAdd()"
                 @openUpdate="(e) => modal.openUpdate(e)"
                 @openUpdateConfig="(e) => config.open(e)" />
+    <!-- 列表-卡片 -->
+    <host-card-list v-else
+                    ref="card"
+                    @openAdd="() => modal.openAdd()"
+                    @openUpdate="(e) => modal.openUpdate(e)"
+                    @openUpdateConfig="(e) => config.open(e)" />
     <!-- 添加修改模态框 -->
     <host-form-modal ref="modal"
                      @added="() => table.addedCallback()"
@@ -21,15 +28,21 @@
 </script>
 
 <script lang="ts" setup>
+  import { computed, onUnmounted, ref } from 'vue';
+  import { useAppStore, useCacheStore } from '@/store';
   import HostTable from './components/host-table.vue';
+  import HostCardList from '@/views/asset/host/components/host-card-list.vue';
   import HostFormModal from './components/host-form-modal.vue';
-  import { onUnmounted, ref } from 'vue';
-  import { useCacheStore } from '@/store';
   import HostConfigDrawer from '@/views/asset/host/components/host-config-drawer.vue';
 
   const table = ref();
+  const card = ref();
   const modal = ref();
   const config = ref();
+  const appStore = useAppStore();
+
+  // FIXME 临时
+  const renderTable = computed(() => appStore.hostView === 'card');
 
   // 卸载时清除 tags cache
   onUnmounted(() => {