other components...

src/components/CCardOperator/CCardOperator.ts

@@ -0,0 +1,24 @@
+import { CCard } from '@components'
+import MixinOperator from '../../mixins/mixin-operator'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'CCardOperator',
+  components: { CCard },
+  props:{
+    username: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const tab = ref('one')
+
+    const { getOperatorByUsername } = MixinOperator()
+
+    return {
+      tab,
+      getOperatorByUsername,
+    }
+  },
+})

src/components/CCardOperator/CCardOperator.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <CCard :op="getOperatorByUsername(username)" :tab="tab">
+    </CCard>
+
+  </div>
+</template>
+
+<script lang="ts" src="./CCardOperator.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './CCardOperator.scss';
+</style>

src/components/CCardOperator/index.ts

@@ -0,0 +1 @@
+export {default as CCardOperator} from './CCardOperator.vue'