搜索结果列表页面开发

src/components/TokenItem/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="g-conversation-item">
+    <div class="g-conversation-item-left">
+      <!-- <div class="g-conversation-item-left-icon">
+        <slot name="icon">
+          <img :src="svg" v-if="svg" />
+          <d-icon name="icon-console" size="32px" v-else></d-icon>
+        </slot>
+      </div> -->
+      <div>
+        <div class="g-conversation-item-left-header">
+          <slot name="header">
+            <span class="g-conversation-item-left-header-title">{{ item.name }}</span>
+          </slot>
+        </div>
+        <div class="g-conversation-item-left-content text-CG600">
+          <slot name="content">
+            <p>{{ item.scopes?.join(',') }}</p>
+            <p class="g-conversation-item-size text-xs">
+              <span>创建于 {{ formatTimeFromNow(item.created_at) }}</span>
+              <span class="g-secret-key-item-split"></span>
+              <span>将于 {{ formatTimeFromNow(item.expires_at) }} 过期</span>
+              <!-- <span class="g-secret-key-item-split"></span> -->
+            </p>
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div class="g-conversation-item-right">
+      <slot name="right">
+        <MoreList :moreOpts="moreOpts" :item="item"></MoreList>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTimeFormat } from '@/utils/hooks/useTimeFormat';
+import MoreList from '@/components/MoreList/index.vue';
+interface listItem {
+  object_id: string;
+  ip: string;
+  desc?: string;
+  tagText?: string;
+  browser?: string;
+  os?: string;
+  time?: string;
+  hideDeleted?: boolean;
+  is_current?: boolean;
+}
+withDefaults(defineProps<{
+  item?: listItem | object | any,
+  moreOpts: any,
+  svg?: any,
+}>(), {
+  item: () => ({
+    object_id: '',
+    ip: '',
+    desc: '',
+    tagText: '',
+    browser: '',
+    os: '',
+    time: '',
+    hideDeleted: false,
+    is_current: false
+  }),
+  moreOpts: () => [],
+  svg: ''
+});
+
+const { formatTimeFromNow } = useTimeFormat();
+</script>
+
+<style scoped lang="scss">
+$g-conversation-item-border-color: #D3D3D3;
+
+.g-conversation-item {
+  display: flex;
+  justify-content: space-between;
+
+  &-size {
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+  }
+
+  &-left {
+    display: flex;
+    align-items: center;
+
+    &-icon {
+      margin-right: 16px;
+      margin-top: 4px;
+    }
+
+    &-header {
+      &-title {
+        margin-right: 8px;
+        font-size: 16px;
+        font-weight: 500;
+      }
+    }
+
+    &-content {
+      margin-top: 0px;
+
+      p {
+        margin-top: 4px;
+      }
+    }
+  }
+
+  &-right {
+    font-size: 16px;
+    align-self: center;
+    flex-shrink: 0;
+    display: flex;
+
+    :deep(.devui-button) {
+      border-color: $g-conversation-item-border-color;
+      margin-left: 24px;
+
+      // i {
+      //   font-size: 20px !important;
+      // }
+    }
+  }
+}
+
+.g-secret-key-item-split {
+  margin: 0 8px;
+  display: inline-block;
+  font-weight: bolder;
+  width: 1px;
+  height: 12px;
+  background-color: var(--color-G400);
+}
+</style>