前言

一千个人心中有一千个哈姆雷特，最新使用 wails V3 在写一个桌面软件，样式挑选来挑选去最后决定还是使用大厂的产品 antdv (毕竟 NanUI 作者都已经顶不住大环境去卖钢材了，个人兴趣的东西真心不敢用小厂的东西了)

主题配置

在 App.vue 的代码中进行变更，包裹原本 <template></template> 中的代码

token 中的数据可以直接在 ant 主题配置 (opens new window) 配置后进行导出，导出的格式是 json 的，我新手小白不知道如何直接读取这个配置文件，只好写入到代码中去了

<template>
  <a-config-provider
      :theme="{
        token: {
          colorPrimary: '#00bb3c',
          colorInfo: '#00bb3c',
          borderRadius: 8,
          wireframe: true,
          fontSize: 14,
          sizeStep: 4,
          sizeUnit: 4
        },
      }">
    <!--  原来的代码  -->
  </a-config-provider>
</template>

组件

slider 滑动输入条

slider 滑动输入条只允许选中设置的刻度

注意：

1. 设置 step 为 null 使其只能选择刻度点
2. 在 change 事件中处理只选择当前刻度的逻辑:

<template>
    <a-slider
        :marks="marks"
        :step="null"
        :value="sliderValue"
        @change="handleChange"
        :tooltipOpen=false
        v-model:value="historyCapacity">
    </a-slider>
</template>
<script setup>
import {ref} from 'vue';

// 历史记录容量
const historyCapacity = ref("周");
// 滑块值
let sliderValue = ref(35);
// 滑块刻度
const marks = {
  0: '天',
  35: '周',
  70: '月',
  100: '无限'
}
// 限制滑块刻度选择
function handleChange(value) {
  sliderValue.value = parseInt(value);
}
</script>

form 表单

为什么表单右侧输入控件无法靠左对齐

解决方案，将右侧的元素的宽度设置为 100%

Segmented 分段控制器

使用分段控制器实现类似 Tabs（标签页） 的效果

主要是前端小白菜，没办法各种坑

这段代码主要的逻辑是使用 Segmented 中的 change 属性来进行下面的 div 显示和隐藏

<template>
  <a-segmented class="segmentedStyle" :selectedIndex="setType"
               size="large" v-model:value="setType" block
               :options="setTopData" @change="onChange">
    <template #label="{ value: val, payload = {} }">
      <div style="padding: 4px 4px;text-align:center">
        <template v-if="payload.icon">
          <Icon :icon="payload.icon" class="iconStyle">
          </Icon>
          <div style="line-height: 10px">{{ payload.label }}</div>
        </template>
      </div>
    </template>
  </a-segmented>
  <div v-if="setType === 'SettingsGeneral'">
    <SetGeneral/>
  </div>
  <div v-else>
    <SetAbout/>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import SetGeneral from "@/components/set/setGeneral.vue";
import {Icon} from "@iconify/vue";
import SetAbout from "@/components/set/setAbout.vue";

// 顶部导航栏数据
const setTopData = ref([
  {
    value: 'SettingsGeneral',
    payload: {
      label: '通用',
      icon: "material-symbols:settings-outline",
    },
  },
  {
    value: 'SettingsAbout',
    payload: {
      label: '关于',
      icon: "mdi:information-outline",
    },
  },
]);
// 选中的导航栏
const setType = ref('SettingsGeneral');

// 改变分段控制器操作
function onChange(key) {
  setType.value = key;
}

</script>

<style scoped>
.segmentedStyle {
  margin: 5px;
  height: 70px;
}

.iconStyle {
  font-size: 36px;
  color: #00c042;
  margin-bottom: -5px;
}
</style>

Typography 排版

1. 指定 Typography 的行数，超出行数后显示省略号，并且不显示展开按钮(默认：Expand)

<a-typography>
  <!-- 本例子现实的情况是：6行，并隐藏展开按钮 -->
  <a-typography-paragraph :ellipsis="{rows:6,expandable:false}">
    {{content}}
  </a-typography-paragraph>
</a-typography>

2. 指定 Typography 内容靠左

<a-typography>
  <a-typography-paragraph style="text-align: left">
    {{content}}
  </a-typography-paragraph>
</a-typography>

Table 表格