alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some UI

Browse Source
This commit is contained in:
xue jiahao
2024-12-05 17:41:00 +08:00
parent a6576827fd
commit 4336462ff1
4 changed files with 141 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/UserDomain/DomainCard.vue
View File

@@ -1,14 +1,16 @@
<template>
<q-card :class="['domain-card', small ? 'small' : '']">
<q-card :class="['domain-card', small ? 'small' : '', item.id == activeId ? 'default': '']">
<q-card-section :class="[small ? 'q-py-sm' : '']">
<div class="row items-center no-wrap">
<div class="row no-wrap">
<div class="col">
<div :class="[small ? 'text-subtitle2' : 'text-h6']">{{ item.name }} <q-icon v-if="isNotOwnerFunc(item.id)" name="account_circle" color="teal" class="q-mb-xs"></q-icon> </div>
<div :class="[small ? 'text-subtitle2' : 'text-h6', 'ellipsis']">{{ item.name }}</div>
<div :class="[small ? 'text-caption' : 'text-subtitle2']">{{ item.url }}</div>
</div>
<!-- <div v-if="isNotOwnerFunc(item.id)" class="col-auto">
<q-icon name="account_circle" color="teal" size="2em"></q-icon>
</div> -->
<div v-if="!isOwnerFunc(item.owner.id)" class="col-auto">
<!-- <q-badge color="secondary" text-color="white" align="middle" class="q-mb-xs" label="他人の所有" /> -->
<q-chip square color="secondary" text-color="white" icon="people" label="他人の所有" size="sm" />
</div>
</div>
</q-card-section>
<q-card-section>
@@ -17,13 +19,13 @@
<div class="text-grey-7 text-caption text-weight-medium">
アカウント
</div>
<div class="smaller-font-size">{{ item.kintoneuser }}</div>
<div class="smaller-font-size">{{ item.user }}</div>
</div>
<div v-if="isNotOwnerFunc(item.id)" class="col-auto">
<div class="col-auto">
<div class="text-grey-7 text-caption text-weight-medium">
所有者
</div>
<div class="smaller-font-size">{{ item.owner }}</div>
<div class="smaller-font-size">{{ item.owner.fullName }}</div>
</div>
</div>
</q-card-section>
@@ -34,16 +36,17 @@
<script setup lang="ts">
import { defineProps, computed } from 'vue';
import { IDomain } from 'src/types/DomainTypes';
import { IDomainOwnerDisplay } from 'src/types/DomainTypes';
import { useAuthStore } from 'stores/useAuthStore';
const props = defineProps<{
item: IDomain;
item: IDomainOwnerDisplay;
small: boolean;
activeId: number;
}>();
const authStore = useAuthStore();
const isNotOwnerFunc = computed(() => (ownerId: string) => {
const isOwnerFunc = computed(() => (ownerId: string) => {
return ownerId == authStore.userId;
});
@@ -53,6 +56,12 @@ const isNotOwnerFunc = computed(() => (ownerId: string) => {
.domain-card.small {
width: 18rem;
}
.domain-card.default {
box-shadow: 0 6px 6px -3px rgba(0, 0, 0, 0.2),
0 10px 14px 1px rgba(0, 0, 0, 0.14),
0 4px 18px 3px rgba(0, 0, 0, 0.12),
inset 0 0 0px 2px #1976D2;
}
.domain-card {
width: 22rem;
word-break: break-word;