主题设置页面完成

core/apps/AppQyWxConfig/components/AiSelectCard.vue

@@ -0,0 +1,74 @@
+<template>
+  <section class="AiSelectCard" flex>
+    <div class="checkCard" v-for="op in list" :key="op[props.value]" :class="{checked:op.dictValue==value}">
+      <el-image :src="op.thumb"/>
+      <el-row type="flex" class="bottomPane">
+        <b class="label fill" v-text="op[props.label]"/>
+        <el-button type="text" @click.stop="$emit('change',op[props.value])">使用</el-button>
+      </el-row>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiSelectCard",
+  model: {
+    prop: "value",
+    event: "change"
+  },
+  props: {
+    value: {default: ""},
+    ops: {default: () => []},
+    type: {default: "web"},
+    dict: String,
+    prop: {default: () => ({})}
+  },
+  computed: {
+    list: v => (v.dict ? v.$dict.getDict(v.dict) : v.ops || []).map(e => ({
+      ...e,
+      thumb: `https://cdn.cunwuyun.cn/theme/thumb/${v.type}_${e[v.props.value]}.png`
+    })),
+    props: v => ({value: 'dictValue', label: 'dictName', ...v.prop})
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiSelectCard {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+
+  .checkCard {
+    width: 360px;
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+
+    .label {
+      user-select: none;
+    }
+
+    &.checked:before {
+      position: absolute;
+      content: "应用中";
+      top: 16px;
+      left: 16px;
+      z-index: 9;
+      padding: 8px 16px;
+      background: rgba(#000, .7);
+      color: #fff;
+      border-radius: 8px;
+    }
+
+    .bottomPane {
+      height: 48px;
+      align-items: center;
+      padding: 0 16px;
+      border-top: 1px solid #eee;
+    }
+  }
+}
+</style>