[coc-card] 新功能：随机角色名

src/pages/coc-card/components/SkillTable.vue

@@ -131,7 +131,6 @@ function getTableData(data: SkillGroups, suggestion?: Suggestion) {
 }
 
 const tableData = computed(() => getTableData(props.data, props.suggestion));
-console.log('xxx tableData', tableData);
 
 function findSkillPoints(skillInfo: COCPCSkill) {
   if (!pc) return;

src/pages/coc-card/components/control-section-parts/rand-name/RandNameButton.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { Lollipop } from '@element-plus/icons-vue';
+
+import { RandNameScope } from '../../../types/name';
+
+export interface Props {
+  scope: RandNameScope;
+}
+defineProps<Props>();
+
+interface Emits {
+  (event: 'click', evt?: MouseEvent): void;
+}
+defineEmits<Emits>();
+</script>
+
+<template>
+  <button
+    class="rand-name-button"
+    @click="$emit('click', $event)"
+  >
+    <el-icon size="1.3em">
+      <Lollipop />
+    </el-icon>
+  </button>
+</template>
+
+<style scoped lang="scss">
+.rand-name-button {
+  --color-button-bg: #fff;
+  --color-button-bg-hover: #fafafa;
+  --color-button-bg-active: #f5f5f5;
+  --color-button-border: #b2b2b2;
+}
+.rand-name-button {
+  width: 22px;
+  height: 22px;
+  border: 1px solid var(--color-button-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 6px;
+  background-color: var(--color-button-bg);
+
+  &:hover {
+    background-color: var(--color-button-bg-hover);
+  }
+  &:active {
+    background-color: var(--color-button-bg-active);
+  }
+}
+</style>

src/pages/coc-card/components/control-section-parts/rand-name/RandNameOption.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+interface Props {
+  label: string;
+}
+defineProps<Props>();
+
+interface Emits {
+  (event: 'click', evt?: MouseEvent): void;
+}
+defineEmits<Emits>();
+</script>
+
+<template>
+  <button
+    class="rand-name-option"
+    @click="$emit('click', $event)"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<style scoped lang="scss">
+.rand-name-option {
+  --color-button-bg: #fff;
+  --color-button-bg-hover: #f5f5f5;
+  --color-button-bg-active: #eee;
+  --color-label: #4b4e53;
+}
+.rand-name-option {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* border: 1px solid #4b4e53; */
+  color: var(--color-label);
+  cursor: pointer;
+  background-color: var(--color-background);
+
+  &:hover {
+    background-color: var(--color-button-bg-hover);
+  }
+  &:active {
+    background-color: var(--color-button-bg-active);
+  }
+}
+</style>

src/pages/coc-card/components/control-section-parts/rand-name/RandNameRow.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+// components
+import RandNameButton from './RandNameButton.vue';
+import RandNameOption from './RandNameOption.vue';
+
+// models
+import LA, { LAEventID, FeatureNames } from '@/plugins/51la';
+import { usePC, usePageData } from '../../../hooks/useProviders';
+import { randName } from '../../../models/name';
+import { RandNameScope } from '../../../types/name';
+
+const options: { label: string; scope: RandNameScope }[] = [
+  { label: '随', scope: 'all' },
+  { label: '中', scope: 'zh' },
+  { label: '英', scope: 'en-zh' },
+  { label: 'En', scope: 'en' },
+];
+
+const pc = usePC();
+const pageData = usePageData();
+
+const selectedOptionIndex = ref(0);
+const selectedOption = computed(() => options[selectedOptionIndex.value]);
+
+function switchOption() {
+  selectedOptionIndex.value = (selectedOptionIndex.value + 1) % options.length;
+}
+
+function onButtonClick() {
+  if (!pc?.value) return;
+  const gender = pc.value.gender[0];
+  const sex = gender === '男' ? 'male' : gender === '女' ? 'female' : 'all';
+  pc.value.name = randName(selectedOption.value.scope, sex);
+  LA?.track(LAEventID.FEATURE, { name: FeatureNames.PAPER_RAND_NAME });
+}
+</script>
+
+<template>
+  <div
+    class="rand-name-row"
+    :class="{
+      'printing-image': pageData?.printing,
+    }"
+  >
+    <RandNameOption
+      :label="selectedOption.label"
+      @click="switchOption"
+    />
+    <RandNameButton
+      :scope="selectedOption.scope"
+      @click="onButtonClick"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.rand-name-row {
+  display: flex;
+  gap: 2px;
+  align-items: center;
+}
+
+/* when print */
+.rand-name-row.printing-image {
+  display: none;
+}
+@media print {
+  .rand-name-row {
+    display: none;
+  }
+}
+</style>