deploy.config.js

wujingjing

2025-02-12 cc75c6929b6f9ab3a83bd785eec70f3c123e07bf

 src/App.vue

@@ -1,87 +1,17 @@
<template>
   <div>
      <el-button type="primary" class="wjj" @click="btnClick">你好啊啊</el-button>
   </div>
   <div>
      <div class="flex flex-col gap-3">
         <div class="flex gap-2">
            <div class="bg-primary-dark-2 size-10"></div>
            <div class="bg-primary size-10"></div>
            <div class="bg-primary-light-3 size-10"></div>
            <div class="bg-primary-light-5 size-10"></div>
            <div class="bg-primary-light-7 size-10"></div>
            <div class="bg-primary-light-9 size-10"></div>

            <div class="test size-10"></div>
         </div>
         <div class="flex gap-2">
            <div class="bg-success-dark-2 size-10"></div>
            <div class="bg-success size-10"></div>
            <div class="bg-success-light-3 size-10"></div>
            <div class="bg-success-light-5 size-10"></div>
            <div class="bg-success-light-7 size-10"></div>
            <div class="bg-success-light-9 size-10"></div>
         </div>
         <div class="flex gap-2">
            <div class="bg-warning-dark-2 size-10"></div>
            <div class="bg-warning size-10"></div>
            <div class="bg-warning-light-3 size-10"></div>
            <div class="bg-warning-light-5 size-10"></div>
            <div class="bg-warning-light-7 size-10"></div>
            <div class="bg-warning-light-9 size-10"></div>
         </div>
         <div class="flex gap-2">
            <div class="bg-info-dark-2 size-10"></div>
            <div class="bg-info size-10"></div>
            <div class="bg-info-light-3 size-10"></div>
            <div class="bg-info-light-5 size-10"></div>
            <div class="bg-info-light-7 size-10"></div>
            <div class="bg-info-light-9 size-10"></div>
         </div>
         <the-welcome></the-welcome>
      </div>
      <AChart :style="{ width: '100%', height: '300px' }" :options="chartOptions" @chartReady="onChartReady" :theme="AlloyTheme.isDark.value ? 'dark' : 'light'" :extended-config="{ enableNumberFormat: true }" />
   <div class="min-h-screen bg-gray-50">
      <AppHeader />
      <router-view></router-view>
   </div>
</template>

<script setup lang="ts">
import { AChart } from '@/alloy/components/charts';
import { ref } from 'vue';
import type { ECOption } from './alloy/components/charts/src/types';
import { AlloyTheme } from './alloy/helper/AlloyTheme';

const btnClick = () => {
   AlloyTheme.isDark.value = !AlloyTheme.isDark.value;
   ElMessage.success('你好啊啊');
};

const chartOptions = ref<ECOption>({
   title: {
      text: '示例图表',
   },
   xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   },
   yAxis: {
      name: '值',
      type: 'value',
   },
   series: [
      {
         name: '值',
         data: [1, 2000, 1500, 80000, 70, 110, 130],
         type: 'bar',
      },
   ],
});

const onChartReady = (chart: any) => {
   console.log('图表已准备就绪', chart);
};
import AppHeader from './components/AppHeader.vue';
</script>
<style scoped lang="scss">
.test {
   background-color: var(--el-color-primary-light-9);

<style>
#app {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
</style>