chore: lodash 改为 lodash-es, 采用按需引入的方式使用

farm.config.ts

@@ -0,0 +1,50 @@
+import { defineConfig } from "@farmfe/core";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+// import { fileURLToPath, URL } from "node:url";
+// import yargsParser from "yargs-parser";
+
+// const argv = yargsParser(process.argv.slice(2));
+
+console.log(process.env.DEV_ENV);
+
+// let base: string;
+// switch (argv.mode) {
+//   case "staging":
+//   case "test":
+//     base = "https://custom-chart.shiyue.com/";
+//     break;
+//   case "production":
+//     base = "https://custom-chart.shiyuegame.com/";
+//     break;
+//   default:
+//     base = "http://localhost:8080/";
+// }
+// if (process.env.DEV_ENV === "development") {
+//   base = "http://localhost:8080/";
+// }
+
+export default defineConfig({
+  // compilation: {
+  //   output: {
+  //     path: "./dist",
+  //     publicPath: base,
+  //     filename: "[name]-ycode-[hash:8].[ext]",
+  //   },
+  //   sourcemap: false,
+  // },
+  vitePlugins: [vue(), vueJsx()],
+  // resolve: {
+  //   alias: {
+  //     "@": fileURLToPath(new URL("./src", import.meta.url)),
+  //   },
+  // },
+  // define: {
+  //   _BASE_HOST_: `'${base}'`,
+  // },
+  // server: {
+  //   hmr: true,
+  //   host: "0.0.0.0",
+  //   port: 8080,
+  // },
+});

package.json

@@ -13,12 +13,13 @@
   },
   "dependencies": {
     "@antv/g2plot": "^2.4.31",
+    "@farmfe/core": "^1.6.6",
     "@sy/y-code-chart": "^1.2.1",
     "@vueuse/core": "^10.11.0",
     "ant-design-vue": "^4.1.2",
     "axios": "^1.6.7",
     "cross-env": "^7.0.3",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "p-limit": "^6.1.0",
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
@@ -30,7 +31,7 @@
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node20": "^20.1.2",
     "@types/node": "^20.11.10",
-    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
@@ -43,5 +44,6 @@
     "vite": "^5.0.11",
     "vite-plugin-qiankun": "^1.0.15",
     "vue-tsc": "^1.8.27"
-  }
+  },
+  "packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
 }

src/components/common/y-chart.vue

@@ -5,14 +5,24 @@
     </div>
     <div class="chart-header">
       <div class="chart-filter">
-        <div v-for="(item, index) in filterConfig" :key="index" class="filter-item">
+        <div
+          v-for="(item, index) in filterConfig"
+          :key="index"
+          class="filter-item"
+        >
           <div>
             <a-radio-group v-model:value="dateType" button-style="solid">
               <a-radio-button value="day">日</a-radio-button>
               <a-radio-button value="week">周</a-radio-button>
               <a-radio-button value="month">月</a-radio-button>
             </a-radio-group>
-            <a-range-picker v-if="item.type === 'time'" class="date-item" v-model:value="filterData[item.name]" :picker="rangePicker" @change="toFilt" />
+            <a-range-picker
+              v-if="item.type === 'time'"
+              class="date-item"
+              v-model:value="filterData[item.name]"
+              :picker="rangePicker"
+              @change="toFilt"
+            />
           </div>
         </div>
       </div>
@@ -32,7 +42,7 @@
 import { computed, ref } from "vue";
 import Line from "@/plugins/antv-g2plot/line.vue";
 import Column from "@/plugins/antv-g2plot/column.vue";
-import _ from 'lodash';
+import { cloneDeep } from "lodash-es";
 
 const props = defineProps({
   title: {
@@ -70,7 +80,7 @@ const currentChart = computed(() => {
 })
 
 const toFilt = () => {
-  const cloneFilter = _.cloneDeep(props.filterConfig);
+  const cloneFilter = cloneDeep(props.filterConfig);
   const filter = cloneFilter
     .filter((item) => {
       return filterData.value[item.name] !== undefined && filterData.value[item.name] !== null;

src/components/common/y-table.vue

@@ -32,17 +32,48 @@
           @change="toFilt"
         />
         <!-- 日期范围 -->
-        <a-range-picker v-else-if="item.type === 'time'" class="date-item" v-model:value="filterData[item.name]" @change="toFilt" />
+        <a-range-picker
+          v-else-if="item.type === 'time'"
+          class="date-item"
+          v-model:value="filterData[item.name]"
+          @change="toFilt"
+        />
         <!-- 带时分的日期范围 -->
-        <a-range-picker v-else-if="item.type === 'date_time'" class="date-time-item" v-model:value="filterData[item.name]" show-time format="YYYY-MM-DD HH:mm" @change="toFilt" />
+        <a-range-picker
+          v-else-if="item.type === 'date_time'"
+          class="date-time-item"
+          v-model:value="filterData[item.name]"
+          show-time
+          format="YYYY-MM-DD HH:mm"
+          @change="toFilt"
+        />
         <!-- 数值区间 -->
-        <div v-else-if="item.type === 'number_range' && filterData[item.name]" class="number_range_box">
+        <div
-          <a-input-number placeholder="最小值" style="width: 140px" v-model:value="filterData[item.name].min" @change="toFilt" />
+          v-else-if="item.type === 'number_range' && filterData[item.name]"
+          class="number_range_box"
+        >
+          <a-input-number
+            placeholder="最小值"
+            style="width: 140px"
+            v-model:value="filterData[item.name].min"
+            @change="toFilt"
+          />
           <span class="divider"> - </span>
-          <a-input-number placeholder="最大值" style="width: 140px" v-model:value="filterData[item.name].max" @change="toFilt" />
+          <a-input-number
+            placeholder="最大值"
+            style="width: 140px"
+            v-model:value="filterData[item.name].max"
+            @change="toFilt"
+          />
         </div>
       </div>
-      <div v-if="isExport" class="filter-item"><a :href="`${YCODE_BASEURL}/api/v1/preview/export?preview_id=${previewId}&filter=${JSON.stringify(getFilter())}`" target="_blank"><a-button type="primary"><CloudDownloadOutlined />导出</a-button></a></div>
+      <div v-if="isExport" class="filter-item">
+        <a
+          :href="`${YCODE_BASEURL}/api/v1/preview/export?preview_id=${previewId}&filter=${JSON.stringify(getFilter())}`"
+          target="_blank"
+          ><a-button type="primary"><CloudDownloadOutlined />导出</a-button></a
+        >
+      </div>
     </div>
     <div class="y-table-content">
       <a-table
@@ -54,9 +85,21 @@
         bordered
       >
         <template #bodyCell="{ column, record }">
-          <a-image v-if="column.show_type === 'img'" :src="record[column.dataIndex]" :width="160" />
+          <a-image
-          <a v-else-if="column.show_type === 'link'" target="_blank" :href="record[column.dataIndex]">{{ record[column.dataIndex] }}</a>
+            v-if="column.show_type === 'img'"
-          <div v-else-if="column.show_type === 'richText'" v-html="record[column.dataIndex]"></div>
+            :src="record[column.dataIndex]"
+            :width="160"
+          />
+          <a
+            v-else-if="column.show_type === 'link'"
+            target="_blank"
+            :href="record[column.dataIndex]"
+            >{{ record[column.dataIndex] }}</a
+          >
+          <div
+            v-else-if="column.show_type === 'richText'"
+            v-html="record[column.dataIndex]"
+          ></div>
           <template v-else>{{ record[column.dataIndex] }}</template>
         </template>
       </a-table>
@@ -78,7 +121,7 @@
 <script setup>
 import { reactive, ref, watch } from "vue";
 import { useDebounceFn } from "@vueuse/core";
-import _ from "lodash";
+import { cloneDeep } from "lodash-es";
 import { CloudDownloadOutlined } from "@ant-design/icons-vue";
 
 const YCODE_BASEURL = import.meta.env.VITE_YCODE_BASEURL
@@ -139,7 +182,7 @@ const filterOption = (input, option) => {
 };
 
 const getFilter = () => {
-  const cloneFilter = _.cloneDeep(props.filterConfig);
+  const cloneFilter = cloneDeep(props.filterConfig);
   const filter = cloneFilter
     .filter((item) => {
       return filterData.value[item.name] !== undefined && filterData.value[item.name] !== null;
@@ -196,7 +239,6 @@ const toFilt = useDebounceFn(() => {
 const pageChange = () => {
   getData();
 };
-
 </script>
 
 <style lang="less" scoped>

src/plugins/antv-g2plot/useChart.js

@@ -1,5 +1,5 @@
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
-import _ from "lodash";
+import { cloneDeep } from "lodash-es";
 
 export default function useChart(ChartClass, props) {
   const chart = ref(null); // 表格实例
@@ -11,7 +11,7 @@ export default function useChart(ChartClass, props) {
   let handler;
 
   onMounted(() => {
-    chartOptions.value = _.cloneDeep(props.config);
+    chartOptions.value = cloneDeep(props.config);
 
     // 实例化图表
     const chartInstance = new ChartClass(container.value, { ...props.config });
@@ -48,7 +48,7 @@ export default function useChart(ChartClass, props) {
   watch(
     () => props.config,
     (config) => {
-      const newConfig = _.cloneDeep(config);
+      const newConfig = cloneDeep(config);
       chartOptions.value = newConfig;
       chart.value.update(newConfig);
     },

src/views/view-all-manage/create-view/index.vue

@@ -28,7 +28,11 @@
             ></a-select>
           </a-form-item>
           <a-form-item label="是否导出" v-if="showTypeId === 1">
-            <a-switch v-model:checked="isExport" :checkedValue="1" :unCheckedValue="0">
+            <a-switch
+              v-model:checked="isExport"
+              :checkedValue="1"
+              :unCheckedValue="0"
+            >
             </a-switch>
           </a-form-item>
           <a-form-item label="字段" v-if="fieldList.length">
@@ -42,10 +46,16 @@
             </a-checkbox-group>
           </a-form-item>
           <a-form-item label="x轴" v-if="xDataList.length">
-            <a-radio-group :options="xDataList" v-model:value="xDataId"></a-radio-group>
+            <a-radio-group
+              :options="xDataList"
+              v-model:value="xDataId"
+            ></a-radio-group>
           </a-form-item>
           <a-form-item label="y轴" v-if="yDataList.length">
-            <a-checkbox-group :options="yDataList" v-model:value="yDataId"></a-checkbox-group>
+            <a-checkbox-group
+              :options="yDataList"
+              v-model:value="yDataId"
+            ></a-checkbox-group>
           </a-form-item>
         </a-form>
         <div class="footer">
@@ -87,16 +97,43 @@
                 v-model:value="previewData.filterData[item.name]"
                 @change="toFilt"
               />
-              <a-range-picker v-if="item.type === 'time'" class="date-item" v-model:value="previewData.filterData[item.name]" @change="toFilt" />
+              <a-range-picker
-              <a-range-picker v-else-if="item.type === 'date_time'" class="date-time-item" v-model:value="previewData.filterData[item.name]" show-time format="YYYY-MM-DD HH:mm" @change="toFilt" />
+                v-if="item.type === 'time'"
+                class="date-item"
+                v-model:value="previewData.filterData[item.name]"
+                @change="toFilt"
+              />
+              <a-range-picker
+                v-else-if="item.type === 'date_time'"
+                class="date-time-item"
+                v-model:value="previewData.filterData[item.name]"
+                show-time
+                format="YYYY-MM-DD HH:mm"
+                @change="toFilt"
+              />
               <!-- 数值区间 -->
-              <div v-else-if="item.type === 'number_range' && previewData.filterData[item.name]" class="number_range_box">
+              <div
-                <a-input-number placeholder="最小值" style="width: 140px" v-model:value="previewData.filterData[item.name].min" @change="toFilt" />
+                v-else-if="item.type === 'number_range' && previewData.filterData[item.name]"
+                class="number_range_box"
+              >
+                <a-input-number
+                  placeholder="最小值"
+                  style="width: 140px"
+                  v-model:value="previewData.filterData[item.name].min"
+                  @change="toFilt"
+                />
                 <span class="divider"> - </span>
-                <a-input-number placeholder="最大值" style="width: 140px" v-model:value="previewData.filterData[item.name].max" @change="toFilt" />
+                <a-input-number
+                  placeholder="最大值"
+                  style="width: 140px"
+                  v-model:value="previewData.filterData[item.name].max"
+                  @change="toFilt"
+                />
               </div>
             </div>
-            <div v-if="previewData.isExport" class="filter-item"><a-button type="primary">导出</a-button></div>
+            <div v-if="previewData.isExport" class="filter-item">
+              <a-button type="primary">导出</a-button>
+            </div>
           </div>
           <div class="y-table-content">
             <a-table
@@ -108,9 +145,21 @@
               bordered
             >
               <template #bodyCell="{ column, record }">
-                <a-image v-if="column.show_type === 'img'" :src="record[column.dataIndex]" :width="160" />
+                <a-image
-                <a v-else-if="column.show_type === 'link'" target="_blank" :href="record[column.dataIndex]">{{ record[column.dataIndex] }}</a>
+                  v-if="column.show_type === 'img'"
-                <div v-else-if="column.show_type === 'richText'" v-html="record[column.dataIndex]"></div>
+                  :src="record[column.dataIndex]"
+                  :width="160"
+                />
+                <a
+                  v-else-if="column.show_type === 'link'"
+                  target="_blank"
+                  :href="record[column.dataIndex]"
+                  >{{ record[column.dataIndex] }}</a
+                >
+                <div
+                  v-else-if="column.show_type === 'richText'"
+                  v-html="record[column.dataIndex]"
+                ></div>
                 <template v-else>{{ record[column.dataIndex] }}</template>
               </template>
             </a-table>
@@ -125,7 +174,12 @@
             />
           </div>
         </div>
-        <y-chart v-else-if="previewData.type === 'chart'" :chart-cfg="previewData.chartCfg" :filter-config="previewData.filter" @toFilt="() => {toPreview({})}"></y-chart>
+        <y-chart
+          v-else-if="previewData.type === 'chart'"
+          :chart-cfg="previewData.chartCfg"
+          :filter-config="previewData.filter"
+          @toFilt="() => {toPreview({})}"
+        ></y-chart>
         <div class="preview-area" v-else>
           <div><BarChartOutlined /></div>
           <div>预览区</div>
@@ -160,7 +214,7 @@ import {
 import { message } from "ant-design-vue";
 import { BarChartOutlined } from "@ant-design/icons-vue";
 import yChart from "@/components/common/y-chart.vue";
-import _ from 'lodash'
+import { cloneDeep } from "lodash-es";
 
 const projectSel = ref([]); // 项目下拉
 const modularSel = ref([])  // 数据来源下拉
@@ -286,7 +340,7 @@ const toPreview = ({filter}) => {
   previewLoading.value = true;
   let filterData
   if (!filter) {
-    const cloneFilter = _.cloneDeep(previewData.filterConfig)
+    const cloneFilter = cloneDeep(previewData.filterConfig)
     filterData = cloneFilter
       .filter((item) => {
         return previewData.filterData[item.name] !== undefined && previewData.filterData[item.name] !== null;