hfn-components 0.6.6 → 0.6.8

package/es/constants/target.d.ts

@@ -1,15 +1,166 @@
-export declare const TARGET_HEAD_KEY: {
-    name: string;
-    key: string;
-}[];
-export declare const TARGET_END_KEY: {
-    name: string;
-    key: string;
-    dealType: string;
-}[];
-export declare const BASIC_KEY: {
-    name: string;
-    key: string;
-    dealType: string;
-    type: string;
-}[];
+export declare const TARGET_HEAD_KEY: readonly [{
+    readonly name: "本周";
+    readonly key: "thisWeek";
+}, {
+    readonly name: "本月";
+    readonly key: "thisMonth";
+}, {
+    readonly name: "近一周";
+    readonly key: "pastWeek";
+}, {
+    readonly name: "近一月";
+    readonly key: "lastOneMonth";
+}, {
+    readonly name: "近三月";
+    readonly key: "lastThreeMonth";
+}, {
+    readonly name: "近六月";
+    readonly key: "lastSixMonth";
+}, {
+    readonly name: "近一年";
+    readonly key: "lastOneYear";
+}, {
+    readonly name: "近两年";
+    readonly key: "lastTwoYear";
+}, {
+    readonly name: "近三年";
+    readonly key: "lastThreeYear";
+}, {
+    readonly name: "近五年";
+    readonly key: "lastFiveYear";
+}, {
+    readonly name: "今年以来";
+    readonly key: "ytd";
+}, {
+    readonly name: "成立以来";
+    readonly key: "cucmulative";
+}];
+export declare const TARGET_END_KEY: readonly [{
+    readonly name: "收益";
+    readonly key: "return";
+    readonly dealType: "colorPercentage";
+}, {
+    readonly name: "年化收益";
+    readonly key: "yearReturn";
+    readonly dealType: "colorPercentage";
+}, {
+    readonly name: "超额收益";
+    readonly key: "excessReturn";
+    readonly dealType: "colorPercentage";
+}, {
+    readonly name: "超额年化收益";
+    readonly key: "excessYearReturn";
+    readonly dealType: "colorPercentage";
+}, {
+    readonly name: "年化波动率";
+    readonly key: "vol";
+    readonly dealType: "percentage";
+}, {
+    readonly name: "超额年化波动率";
+    readonly key: "excessVol";
+    readonly dealType: "percentage";
+}, {
+    readonly name: "夏普比率";
+    readonly key: "sharpeRatio";
+    readonly dealType: "basicText4";
+}, {
+    readonly name: "超额夏普比率";
+    readonly key: "excessSharpeRatio";
+    readonly dealType: "basicText4";
+}, {
+    readonly name: "卡玛比率";
+    readonly key: "calmarRatio";
+    readonly dealType: "basicText4";
+}, {
+    readonly name: "超额卡玛比率";
+    readonly key: "excessCalmarRatio";
+    readonly dealType: "basicText4";
+}, {
+    readonly name: "索提诺比率";
+    readonly key: "sortinoRatio";
+    readonly dealType: "basicText4";
+}, {
+    readonly name: "下行标准差";
+    readonly key: "downsideStd";
+    readonly dealType: "percentage";
+}, {
+    readonly name: "下行风险";
+    readonly key: "downsideDev";
+    readonly dealType: "percentage";
+}, {
+    readonly name: "最大回撤";
+    readonly key: "maxDrawdown";
+    readonly dealType: "percentage";
+}, {
+    readonly name: "超额最大回撤";
+    readonly key: "excessMaxDrawdown";
+    readonly dealType: "percentage";
+}, {
+    readonly name: "最大回撤回补期（天）";
+    readonly key: "maxDrawdownDays";
+    readonly dealType: "notProcessed";
+}, {
+    readonly name: "Alpha";
+    readonly key: "alpha";
+    readonly dealType: "colorPercentage";
+}, {
+    readonly name: "Beta";
+    readonly key: "beta";
+    readonly dealType: "basicText4";
+}, {
+    readonly name: "跟踪误差";
+    readonly key: "trackingError";
+    readonly dealType: "percentage";
+}, {
+    readonly name: "信息比率";
+    readonly key: "informationRatio";
+    readonly dealType: "basicText4";
+}, {
+    readonly name: "偏度";
+    readonly key: "skew";
+    readonly dealType: "basicText4";
+}, {
+    readonly name: "峰度";
+    readonly key: "kurt";
+    readonly dealType: "basicText4";
+}, {
+    readonly name: "VaR（95%置信）";
+    readonly key: "cVaR";
+    readonly dealType: "basicText4";
+}, {
+    readonly name: "周胜率";
+    readonly key: "positiveRatio";
+    readonly dealType: "percentage";
+}, {
+    readonly name: "月胜率";
+    readonly key: "monthlyPositiveRatio";
+    readonly dealType: "percentage";
+}];
+export declare const BASIC_KEY: readonly [{
+    readonly name: "净值日期";
+    readonly key: "priceDate";
+    readonly dealType: "notProcessed";
+    readonly type: "fund";
+}, {
+    readonly name: "单位净值";
+    readonly key: "nav";
+    readonly dealType: "basicText4";
+    readonly type: "fund";
+}, {
+    readonly name: "累计净值";
+    readonly key: "cumulativeNavWithdrawal";
+    readonly dealType: "basicText4";
+    readonly type: "fund";
+}, {
+    readonly name: "日期";
+    readonly key: "priceDate";
+    readonly dealType: "notProcessed";
+    readonly type: "index";
+}, {
+    readonly name: "指数点位";
+    readonly key: "priceNav";
+    readonly dealType: "basicText4";
+    readonly type: "index";
+}];
+export type TargetHeadKeyType = (typeof TARGET_HEAD_KEY)[number]['key'];
+export type TargetEndKeyType = (typeof TARGET_END_KEY)[number]['key'];

package/es/icons/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptySimple } from './svg/empty-simple.svg';

package/es/icons/index.mjs

@@ -0,0 +1 @@
+export { default as EmptySimple } from './svg/empty-simple.svg.mjs';

package/es/icons/svg/empty-simple.svg.mjs

@@ -0,0 +1,3 @@
+var EmptySimple = "data:image/svg+xml,%3Csvg%20width%3D%2264%22%20height%3D%2241%22%20viewBox%3D%220%200%2064%2041%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%20%3Cg%20transform%3D%22translate%280%201%29%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%20%20%20%20%3Cellipse%20fill%3D%22%23f5f5f5%22%20cx%3D%2232%22%20cy%3D%2233%22%20rx%3D%2232%22%20ry%3D%227%22%2F%3E%20%20%20%20%3Cg%20fill-rule%3D%22nonzero%22%20stroke%3D%22%23d9d9d9%22%3E%20%20%20%20%20%20%3Cpath%20d%3D%22M55%2012.76L44.854%201.258C44.367.474%2043.656%200%2042.907%200H21.093c-.749%200-1.46.474-1.947%201.257L9%2012.761V22h46v-9.24z%22%2F%3E%20%20%20%20%20%20%3Cpath%20d%3D%22M41.613%2015.931c0-1.605.994-2.93%202.227-2.931H55v18.137C55%2033.26%2053.68%2035%2052.05%2035h-40.1C10.32%2035%209%2033.259%209%2031.137V13h11.16c1.233%200%202.227%201.323%202.227%202.928v.022c0%201.605%201.005%202.901%202.237%202.901h14.752c1.232%200%202.237-1.308%202.237-2.913v-.007z%22%20fill%3D%22%23fafafa%22%2F%3E%20%20%20%20%3C%2Fg%3E%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
+
+export { EmptySimple as default };

package/es/index.mjs

@@ -4,8 +4,8 @@ export { HtTable } from './components/htTable/index.mjs';
 export { HtChart } from './components/chart/index.mjs';
 export { HtTarget } from './components/htTarget/index.mjs';
 export { HtPieChart } from './components/pieChart/index.mjs';
-export { columnDealProps, elTableProps } from './components/htTable/src/htTable.mjs';
 export { chartProps } from './components/chart/src/HtChart.mjs';
+export { columnDealProps, elTableProps } from './components/htTable/src/htTable.mjs';
 export { pieProps } from './components/pieChart/src/HtPieChart.mjs';
 
 const install = installer.install;

package/es/utils/index.mjs

@@ -1,4 +1,4 @@
 export { withInstall } from './common.mjs';
-export { handleData, handleText } from './table.mjs';
+export { absPercentage, basicText4, convertKey, getTargetHeadWithYears, percentage, percentage4, thousandText2, thousandText4 } from './table.mjs';
 export { dataHandle, splitK } from './tool.mjs';
 export { legendEnterOperate, legendLeaveOperate, setEchartTitle, setEchartTooltip, setEchartXAxis, setEchartYAxis } from './chart.mjs';

package/es/utils/table.d.ts

@@ -1,2 +1,11 @@
-export declare const handleData: (value: any, type: string) => string | number;
-export declare const handleText: (value: any, type: string) => any;
+export declare const convertKey: (data: any, key: string) => any;
+export declare const getTargetHeadWithYears: () => {
+    name: string;
+    key: string;
+}[];
+export declare const basicText4: (val: number | string | undefined) => string;
+export declare const percentage: (val: number | string | undefined) => string;
+export declare const percentage4: (val: number | string | undefined) => string;
+export declare const absPercentage: (val: number | string | undefined) => string;
+export declare const thousandText2: (val: number | string | undefined) => string;
+export declare const thousandText4: (val: number | string | undefined) => string;

package/es/utils/table.mjs

@@ -1,31 +1,41 @@
-import { splitK } from './tool.mjs';
+import { TARGET_HEAD_KEY } from '../constants/target.mjs';
+import '../constants/chartConfig.mjs';
+import { splitK, dataHandle } from './tool.mjs';
 
-const handleData = (value, type) => {
-  if (isNaN(parseFloat(value))) return "-";
-  let val = parseFloat(value);
-  if (type.includes("percent")) {
-    val = val * 100;
-  }
-  const floatMatch = type.match(/float(\d+)/);
-  if (floatMatch) {
-    const precision = Number(floatMatch[1]);
-    val = val.toFixed(precision);
-  }
-  if (type.includes("splitK")) {
-    val = splitK(val);
-  }
-  if (type.includes("sign")) {
-    val = Number(val) > 0 ? "+" + val : val;
-  }
-  if (type.includes("percent")) {
-    val = val + "%";
-  }
-  return val;
+const convertKey = (data, key) => {
+  const newKey = key.replace(/([A-Z])/g, "_$1").toLowerCase();
+  return data[key] || data[newKey];
 };
-const handleText = (value, type) => {
-  if (type === "name") {
-    return value;
+const getTargetHeadWithYears = () => {
+  const head = [...TARGET_HEAD_KEY].map((item) => ({ name: item.name, key: item.key }));
+  let startYear = 2018;
+  const nowYear = (/* @__PURE__ */ new Date()).getFullYear();
+  while (startYear <= nowYear) {
+    head.push({ name: `${startYear}`, key: `${startYear}` });
+    startYear++;
   }
+  return head;
+};
+const isInvalid = (val) => {
+  return val === "-" || val === void 0 || val === null || val === "";
+};
+const basicText4 = (val) => {
+  return isInvalid(val) ? "-" : Number(val).toFixed(4);
+};
+const percentage = (val) => {
+  return isInvalid(val) ? "-" : (Number(val) * 100).toFixed(2) + "%";
+};
+const percentage4 = (val) => {
+  return isInvalid(val) ? "-" : (Number(val) * 100).toFixed(4) + "%";
+};
+const absPercentage = (val) => {
+  return isInvalid(val) ? "-" : Math.abs(Number(val) * 100).toFixed(2) + "%";
+};
+const thousandText2 = (val) => {
+  return isInvalid(val) ? "-" : splitK(dataHandle(Number(val), false, 2));
+};
+const thousandText4 = (val) => {
+  return isInvalid(val) ? "-" : splitK(dataHandle(Number(val), false, 4));
 };
 
-export { handleData, handleText };
+export { absPercentage, basicText4, convertKey, getTargetHeadWithYears, percentage, percentage4, thousandText2, thousandText4 };

package/es/utils/tool.d.ts

@@ -1,2 +1,2 @@
-export declare function dataHandle(val: any, isPer: boolean, floatNum: number): any;
+export declare function dataHandle(val: any, isPer: boolean, floatNum: number): string;
 export declare function splitK(num: string | number): string;

package/es/utils/tool.mjs

@@ -1,42 +1,14 @@
 function dataHandle(val, isPer, floatNum) {
-  val = parseFloat(val);
-  if (isNaN(val)) {
-    return "-";
-  } else {
-    if (isPer) {
-      val = val * 100;
-    }
-    if (Number(val.toFixed(floatNum)) === 0) {
-      const a = 0;
-      return a.toFixed(floatNum);
-    } else {
-      return val.toFixed(floatNum);
-    }
-  }
+  const num = parseFloat(val);
+  if (isNaN(num)) return "-";
+  const result = isPer ? num * 100 : num;
+  return result.toFixed(floatNum);
 }
 function splitK(num) {
-  let decimal = String(num).split(".")[1] || "";
-  if (decimal === "") {
-    decimal = "00";
-  }
-  const tempArr = [];
-  const revNumArr = String(num).split(".")[0].split("").reverse();
-  const mark = revNumArr[revNumArr.length - 1];
-  if (mark === "-") {
-    revNumArr.splice(-1, 1);
-  }
-  for (const i in revNumArr) {
-    tempArr.push(revNumArr[i]);
-    const index = parseFloat(i);
-    if ((index + 1) % 3 === 0 && Number(i) !== revNumArr.length - 1) {
-      tempArr.push(",");
-    }
-  }
-  if (mark === "-") {
-    tempArr.push(mark);
-  }
-  const zs = tempArr.reverse().join("");
-  return decimal ? zs + "." + decimal : zs;
+  const str = String(num);
+  const [integer, decimal = "00"] = str.split(".");
+  const formatted = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return `${formatted}.${decimal}`;
 }
 
 export { dataHandle, splitK };

package/package.json

@@ -1,10 +1,34 @@
 {
   "name": "hfn-components",
-  "version": "0.6.6",
+  "version": "0.6.8",
   "description": "",
-  "main": "index.ts",
+  "main": "es/index.mjs",
   "module": "es/index.mjs",
   "types": "es/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./es/index.d.ts",
+      "import": "./es/index.mjs"
+    },
+    "./es": {
+      "types": "./es/index.d.ts",
+      "import": "./es/index.mjs"
+    },
+    "./es/*": {
+      "types": "./es/*.d.ts",
+      "import": "./es/*.mjs"
+    },
+    "./constants": {
+      "types": "./es/constants/index.d.ts",
+      "import": "./es/constants/index.mjs"
+    },
+    "./utils": {
+      "types": "./es/utils/index.d.ts",
+      "import": "./es/utils/index.mjs"
+    },
+    "./theme-chalk/index.css": "./theme-chalk/index.css",
+    "./dist/index.css": "./dist/index.css"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -15,6 +39,8 @@
     "element-plus": "^2.7.7",
     "vue": "^3.2.0",
     "echarts": "^5.5.1",
-    "lodash.clonedeep": "^4.5.0"
+    "lodash.clonedeep": "^4.5.0",
+    "vue-draggable-plus": "^0.6.1",
+    "@element-plus/icons-vue": "^2.0.0"
   }
 }

package/theme-chalk/ht-table.css

@@ -1 +1 @@
-.header-text-wrap{line-height:1.5;white-space:pre-line}
+.ht-table-wrapper{display:flex;flex-direction:column;height:100%}.ht-table-wrapper .el-table{flex:1;min-height:0}.ht-table-wrapper .el-table__empty-text{line-height:normal}.ht-table-cell-copy{align-items:center;display:inline-flex;gap:4px;width:100%}.ht-table-cell-text{flex:none;max-width:calc(100% - 22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ht-copy-icon{color:#909399;cursor:pointer;flex-shrink:0;font-size:14px;opacity:0;transition:opacity .2s}.ht-copy-icon:hover{color:#d70c19}.el-table__row:hover .ht-copy-icon{opacity:1}.ht-table-pagination{align-items:center;display:flex;justify-content:flex-end;padding:12px 0}.ht-table-wrapper .el-table__column-filter-trigger .el-icon svg{display:none}.ht-table-wrapper .el-table__column-filter-trigger .el-icon:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23909399' d='M384 523.392V928a32 32 0 0 0 46.336 28.608l192-96A32 32 0 0 0 640 832V523.392l280.768-343.104a32 32 0 1 0-49.536-40.576l-288 352A32 32 0 0 0 576 512v300.224l-128 64V512a32 32 0 0 0-7.232-20.288L195.52 192H704a32 32 0 1 0 0-64H128a32 32 0 0 0-24.768 52.288z'/%3E%3C/svg%3E") no-repeat 50%;background-size:contain;content:"";display:inline-block;height:14px;width:14px}

package/theme-chalk/ht-target.css

@@ -1 +1 @@
-.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}
+.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}.check_item{align-items:center;cursor:grab}.check_item:active{cursor:grabbing}.ghost{background:#f0f0f0;opacity:.5}.close-icon{cursor:pointer}.close-icon:hover{color:#909399!important}

package/theme-chalk/index.css

@@ -1 +1 @@
-.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}.header-text-wrap{line-height:1.5;white-space:pre-line}
+.echart-box{display:flex;flex-direction:column;height:100%;position:relative;width:100%}.echart-content{flex:auto}.echart-lenged{box-sizing:border-box;display:flex;flex-wrap:wrap;font-size:12px;height:auto;margin-top:6px;padding-right:22px;position:relative;width:100%;z-index:999}.bg-span{height:2px;width:14px}.bg-span,.bg-span-bar{display:inline-block;margin-right:6px}.bg-span-bar{border-radius:2px;height:10px;width:16px}.span-box{cursor:pointer;margin-left:5px;margin-right:6px}.noData,.span-box{align-items:center;display:flex}.noData{bottom:0;color:#ccc;font-size:16px;justify-content:center;position:absolute}._100,.noData{height:100%;width:100%}.dialog{padding:24px!important;width:860px!important}.factor-content{display:flex;flex-direction:column;flex-wrap:wrap;height:380px;width:100%}.factor_item{width:33.33%}.check_item,.factor_item{display:flex;margin-bottom:10px}.check_item{justify-content:space-between}.flex-alignCnter{align-items:center;cursor:pointer;display:flex}.target-head{display:grid;grid:auto/repeat(5,1fr)}.flow-col{border-left:1px solid #e8e8e8;height:520px;overflow-y:auto;padding-left:10px}.check_item{align-items:center;cursor:grab}.check_item:active{cursor:grabbing}.ghost{background:#f0f0f0;opacity:.5}.close-icon{cursor:pointer}.close-icon:hover{color:#909399!important}.ht-table-wrapper{display:flex;flex-direction:column;height:100%}.ht-table-wrapper .el-table{flex:1;min-height:0}.ht-table-wrapper .el-table__empty-text{line-height:normal}.ht-table-cell-copy{align-items:center;display:inline-flex;gap:4px;width:100%}.ht-table-cell-text{flex:none;max-width:calc(100% - 22px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ht-copy-icon{color:#909399;cursor:pointer;flex-shrink:0;font-size:14px;opacity:0;transition:opacity .2s}.ht-copy-icon:hover{color:#d70c19}.el-table__row:hover .ht-copy-icon{opacity:1}.ht-table-pagination{align-items:center;display:flex;justify-content:flex-end;padding:12px 0}.ht-table-wrapper .el-table__column-filter-trigger .el-icon svg{display:none}.ht-table-wrapper .el-table__column-filter-trigger .el-icon:after{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23909399' d='M384 523.392V928a32 32 0 0 0 46.336 28.608l192-96A32 32 0 0 0 640 832V523.392l280.768-343.104a32 32 0 1 0-49.536-40.576l-288 352A32 32 0 0 0 576 512v300.224l-128 64V512a32 32 0 0 0-7.232-20.288L195.52 192H704a32 32 0 1 0 0-64H128a32 32 0 0 0-24.768 52.288z'/%3E%3C/svg%3E") no-repeat 50%;background-size:contain;content:"";display:inline-block;height:14px;width:14px}

package/theme-chalk/src/table.scss

@@ -1,5 +1,62 @@
-// 表头文字换行样式
-.header-text-wrap {
-  white-space: pre-line;
-  line-height: 1.5;
+.ht-table-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.ht-table-wrapper .el-table {
+  flex: 1;
+  min-height: 0;
+}
+.ht-table-wrapper .el-table__empty-text {
+  line-height: normal;
+}
+.ht-table-cell-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+}
+.ht-table-cell-text {
+  flex: none;
+  max-width: calc(100% - 22px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ht-copy-icon {
+  flex-shrink: 0;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s;
+  color: #909399;
+  font-size: 14px;
+  &:hover {
+    color: #d70c19;
+  }
+}
+.el-table__row:hover .ht-copy-icon {
+  opacity: 1;
+}
+.ht-table-pagination {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 12px 0;
+}
+
+// 替换筛选图标为 Element Plus 的 Filter 漏斗图标
+.ht-table-wrapper .el-table__column-filter-trigger .el-icon {
+  svg {
+    display: none;
+  }
+  &::after {
+    content: '';
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    // 使用 data URI 内联 SVG，颜色设为 #909399
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23909399' d='M384 523.392V928a32 32 0 0 0 46.336 28.608l192-96A32 32 0 0 0 640 832V523.392l280.768-343.104a32 32 0 1 0-49.536-40.576l-288 352A32 32 0 0 0 576 512v300.224l-128 64V512a32 32 0 0 0-7.232-20.288L195.52 192H704a32 32 0 1 0 0-64H128a32 32 0 0 0-24.768 52.288z'/%3E%3C/svg%3E")
+      no-repeat center;
+    background-size: contain;
+  }
 }

package/theme-chalk/src/target.scss

@@ -27,13 +27,33 @@
 }
 
 .target-head {
-  display: grid; 
-  grid: auto / repeat(5, 1fr)
+  display: grid;
+  grid: auto / repeat(5, 1fr);
 }
 
 .flow-col {
-  height: 520px; 
+  height: 520px;
   overflow-y: auto;
   border-left: 1px solid #e8e8e8;
   padding-left: 10px;
 }
+
+.check_item {
+  cursor: grab;
+  align-items: center;
+}
+.check_item:active {
+  cursor: grabbing;
+}
+/* 拖拽时的占位样式 */
+.ghost {
+  opacity: 0.5;
+  background: #f0f0f0;
+}
+/* 关闭图标 */
+.close-icon {
+  cursor: pointer;
+}
+.close-icon:hover {
+  color: #909399 !important;
+}