dnhyxc-ui-vue 1.0.0

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "dnhyxc-ui-vue",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.27.5",
+    "@babel/preset-env": "^7.27.2",
+    "@eslint/js": "^9.30.1",
+    "@types/glob": "^9.0.0",
+    "@types/gulp": "^4.0.17",
+    "@types/gulp-autoprefixer": "^0.0.37",
+    "@types/gulp-clean-css": "^4.3.4",
+    "@types/gulp-sass": "^5.0.4",
+    "@types/node": "^24.0.10",
+    "@typescript-eslint/eslint-plugin": "^8.35.1",
+    "@typescript-eslint/parser": "^8.35.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "eslint": "^9.30.1",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-vue": "^9.25.0",
+    "glob": "^11.0.3",
+    "globals": "^16.3.0",
+    "gulp": "^5.0.1",
+    "gulp-autoprefixer": "^9.0.0",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-sass": "^6.0.1",
+    "husky": "^8.0.3",
+    "prettier": "^3.6.2",
+    "rimraf": "^6.0.1",
+    "sass": "^1.89.2",
+    "sucrase": "^3.35.0",
+    "typescript": "^5.3.3",
+    "typescript-eslint": "^8.35.1",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-eslint-parser": "^10.2.0"
+  },
+  "dependencies": {
+    "element-plus": "^2.10.3",
+    "vue": "^3.5.17",
+    "@dnhyxc-ui/utils": "^1.0.0"
+  },
+  "lint-staged": {
+    "*.{js,ts,tsx,jsx,vue}": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ],
+    "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
+      "prettier --write--parser json"
+    ],
+    "package.json": [
+      "prettier --write"
+    ],
+    "*.md": [
+      "prettier --write"
+    ]
+  },
+  "scripts": {
+    "dev:play": "pnpm -C play dev",
+    "build:scss": "gulp -f packages/script/build/index.ts",
+    "build": "pnpm -C packages/components build && pnpm build:scss",
+    "build:full": "pnpm -C packages/components build:full",
+    "build:ui": "pnpm -C packages/components build",
+    "dev:docs": "pnpm -C docs dev",
+    "build:docs": "pnpm -C docs build",
+    "preview:docs": "pnpm -C docs preview",
+    "test": "npx eslint ./packages  --ext ts,vue,js --fix"
+  }
+}

package/packages/components/button/index.ts

@@ -0,0 +1,13 @@
+import { withInstall, type SFCWithInstall } from '@dnhyxc-ui/utils';
+import Button from './src/button.vue';
+
+export const NButton: SFCWithInstall<typeof Button> = withInstall(Button);
+
+export default NButton;
+
+// declare module 'vue' {
+//   export interface GlobalComponents {
+//     NIcon: typeof Icon;
+//   }
+// }
+export * from './src/button';

package/packages/components/button/src/button.ts

@@ -0,0 +1,20 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type Button from './button.vue';
+export const buttonProps = {
+  size: String as PropType<'large' | 'default' | 'small'>,
+  color: String,
+  disabled: Boolean,
+  loading: Boolean,
+  link: Boolean,
+  type: String as PropType<'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' | 'never'>
+} as const;
+
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;
+
+export type ButtonInstance = InstanceType<typeof Button> & unknown;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    NButton: typeof Button;
+  }
+}

package/packages/components/button/src/button.vue

@@ -0,0 +1,39 @@
+<!--
+ * Icon - 图标组件
+ * @author: dnhyxc
+ * @since: 2025-07-02
+ * index.vue
+-->
+<template>
+  <div :class="bem.b()" v-bind="$attrs">
+    <el-button type="primary" :link="link" :size="size" :disabled="disabled" :loading="loading" :style="styles">
+      <slot></slot>
+    </el-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ElButton } from 'element-plus';
+import type { CSSProperties } from 'vue';
+import { createNamespace } from '@dnhyxc-ui/utils';
+import { buttonProps } from './button';
+import './index.scss';
+
+defineOptions({
+  name: 'NIcon',
+  inheritAttrs: false // 禁用继承父组件的属性
+});
+
+const bem = createNamespace('button');
+
+const props = defineProps(buttonProps);
+
+const styles = computed<CSSProperties>(() => {
+  if (!props.size && !props.color) return {};
+  return {
+    ...(props.size ? { 'font-size': props.size + 'px' } : {}),
+    ...(props.color ? { color: props.color } : {})
+  };
+});
+</script>

package/packages/components/button/src/index.scss

@@ -0,0 +1,3 @@
+.n-button {
+  border: 1px solid red;
+}

package/packages/components/icon/index.ts

@@ -0,0 +1,14 @@
+import { withInstall, type SFCWithInstall } from '@dnhyxc-ui/utils';
+import Icon from './src/icon.vue';
+
+// const NIcon = withInstall(Icon);
+export const NIcon: SFCWithInstall<typeof Icon> = withInstall(Icon);
+
+export default NIcon;
+
+// declare module 'vue' {
+//   export interface GlobalComponents {
+//     NIcon: typeof Icon;
+//   }
+// }
+export * from './src/icon';

package/packages/components/icon/src/icon.ts

@@ -0,0 +1,16 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type Icon from './icon.vue';
+export const iconProps = {
+  size: Number as PropType<number | string>,
+  color: String
+} as const;
+
+export type IconProps = ExtractPropTypes<typeof iconProps>;
+
+export type IconInstance = InstanceType<typeof Icon> & unknown;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    NIcon: typeof Icon;
+  }
+}

package/packages/components/icon/src/icon.vue

@@ -0,0 +1,35 @@
+<!--
+ * Icon - 图标组件
+ * @author: dnhyxc
+ * @since: 2025-07-02
+ * index.vue
+-->
+<template>
+  <i :class="bem.b()" :style="styles" v-bind="$attrs">
+    <slot></slot>
+  </i>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { CSSProperties } from 'vue';
+import { createNamespace } from '@dnhyxc-ui/utils';
+import { iconProps } from './icon';
+
+defineOptions({
+  name: 'NIcon',
+  inheritAttrs: false // 禁用继承父组件的属性
+});
+
+const bem = createNamespace('icon');
+
+const props = defineProps(iconProps);
+
+const styles = computed<CSSProperties>(() => {
+  if (!props.size && !props.color) return {};
+  return {
+    ...(props.size ? { 'font-size': props.size + 'px' } : {}),
+    ...(props.color ? { color: props.color } : {})
+  };
+});
+</script>

package/packages/components/icon2/index.ts

@@ -0,0 +1,14 @@
+import { withInstall, type SFCWithInstall } from '@dnhyxc-ui/utils';
+import Icon from './src/icon2.vue';
+
+// const NIcon = withInstall(Icon);
+export const NIcon2: SFCWithInstall<typeof Icon> = withInstall(Icon);
+
+export default NIcon2;
+
+// declare module 'vue' {
+//   export interface GlobalComponents {
+//     NIcon: typeof Icon;
+//   }
+// }
+export * from './src/icon2';

package/packages/components/icon2/src/icon2.ts

@@ -0,0 +1,16 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type Icon from './icon2.vue';
+export const iconProps2 = {
+  size: Number as PropType<number | string>,
+  color: String
+} as const;
+
+export type IconProps2 = ExtractPropTypes<typeof iconProps2>;
+
+export type IconInstance2 = InstanceType<typeof Icon> & unknown;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    NIcon2: typeof Icon;
+  }
+}

package/packages/components/icon2/src/icon2.vue

@@ -0,0 +1,35 @@
+<!--
+ * Icon - 图标组件
+ * @author: dnhyxc
+ * @since: 2025-07-02
+ * index.vue
+-->
+<template>
+  <i :class="bem.b()" :style="styles" v-bind="$attrs">
+    <slot></slot>
+  </i>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { CSSProperties } from 'vue';
+import { createNamespace } from '@dnhyxc-ui/utils';
+import { iconProps2 } from './icon2';
+
+defineOptions({
+  name: 'NIcon2',
+  inheritAttrs: false // 禁用继承父组件的属性
+});
+
+const bem = createNamespace('icon');
+
+const props = defineProps(iconProps2);
+
+const styles = computed<CSSProperties>(() => {
+  if (!props.size && !props.color) return {};
+  return {
+    ...(props.size ? { 'font-size': props.size + 'px' } : {}),
+    ...(props.color ? { color: props.color } : {})
+  };
+});
+</script>

package/packages/components/index.ts

@@ -0,0 +1,5 @@
+export * from './icon';
+export * from './icon2';
+export * from './button';
+export * from './input';
+export * from './monaco';

package/packages/components/input/index.ts

@@ -0,0 +1,13 @@
+import { withInstall, type SFCWithInstall } from '@dnhyxc-ui/utils';
+import Input from './src/input.vue';
+
+export const NInput: SFCWithInstall<typeof Input> = withInstall(Input);
+
+export default NInput;
+
+// declare module 'vue' {
+//   export interface GlobalComponents {
+//     NIcon: typeof Icon;
+//   }
+// }
+export * from './src/input';

package/packages/components/input/src/index.scss

@@ -0,0 +1,3 @@
+.n-input {
+  border: 1px solid red;
+}

package/packages/components/input/src/input.ts

@@ -0,0 +1,22 @@
+import { type ExtractPropTypes, type PropType } from 'vue';
+import type Input from './input.vue';
+export const inputProps = {
+  size: String as PropType<'large' | 'default' | 'small'>,
+  color: String,
+  placeholder: String,
+  disabled: Boolean,
+  loading: Boolean,
+  link: Boolean,
+  value: String,
+  type: String as PropType<'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text' | 'never'>
+} as const;
+
+export type InputProps = ExtractPropTypes<typeof inputProps>;
+
+export type InputInstance = InstanceType<typeof Input> & unknown;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    NInput: typeof Input;
+  }
+}

package/packages/components/input/src/input.vue

@@ -0,0 +1,50 @@
+<!--
+ * Icon - 图标组件
+ * @author: dnhyxc
+ * @since: 2025-07-02
+ * index.vue
+-->
+<template>
+  <div :class="bem.b()" v-bind="$attrs">
+    <el-input v-model="keyword" :size="size" :style="styles" :disabled="disabled" :placeholder="placeholder">
+      <slot></slot>
+    </el-input>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { ElInput } from 'element-plus';
+import type { CSSProperties } from 'vue';
+import { createNamespace } from '@dnhyxc-ui/utils';
+import { inputProps } from './input';
+import './index.scss';
+
+defineOptions({
+  name: 'NInput',
+  inheritAttrs: false // 禁用继承父组件的属性
+});
+
+const bem = createNamespace('input');
+
+const emit = defineEmits(['update:value']);
+
+const props = defineProps(inputProps);
+
+const keyword = computed({
+  get() {
+    return props.value;
+  },
+  set(val) {
+    emit('update:value', val);
+  }
+});
+
+const styles = computed<CSSProperties>(() => {
+  if (!props.size && !props.color) return {};
+  return {
+    ...(props.size ? { 'font-size': props.size + 'px' } : {}),
+    ...(props.color ? { color: props.color } : {})
+  };
+});
+</script>

package/packages/components/monaco/index.ts

@@ -0,0 +1,8 @@
+import { withInstall, type SFCWithInstall } from '@dnhyxc-ui/utils';
+import Monaco from './src/monaco.vue';
+
+export const NMonaco: SFCWithInstall<typeof Monaco> = withInstall(Monaco);
+
+export default NMonaco;
+
+export * from './src/monaco';

package/packages/components/monaco/src/custom.ts

@@ -0,0 +1,124 @@
+import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api.js';
+import prettier from 'prettier';
+import parserMarkdown from 'prettier/parser-markdown';
+import parserBabel from 'prettier/parser-babel';
+import parserTypescript from 'prettier/parser-typescript';
+import parserHtml from 'prettier/parser-html';
+import parserYaml from 'prettier/parser-yaml';
+import parserPostcss from 'prettier/parser-postcss';
+
+// 自定义主题
+export const beauty = (bg = '#00000000') => {
+  return {
+    base: 'vs-dark',
+    inherit: true,
+    rules: [
+      { token: '', foreground: '6ae5c7' }, // 默认文本颜色
+      { token: 'comment', foreground: '9c9c9c' }, // 注释颜色 #9c9c9c 6a9955
+      { token: 'keyword', foreground: 'b955e5', fontStyle: 'bold' }, // 关键字颜色 #b955e5
+      { token: 'variable', foreground: '9cdcfe' }, // 变量颜色 #6ae5c7
+      { token: 'variable.language', foreground: '6ae5c7' }, // 语言变量颜色 #6ae5c7
+      { token: 'variable.parameter', foreground: '6ae5c7' }, // 参数变量颜色 #6ae5c7
+      { token: 'type', foreground: 'fbe77f' }, // 类型颜色 #fbe77f
+      { token: 'function', foreground: 'fbe77f' }, // 函数颜色 #fbe77f
+      { token: 'string', foreground: 'a6de7f' }, // 字符串颜色 #a6de7f
+      { token: 'number', foreground: 'e7a03c' }, // 数字颜色 #e7a03c
+      { token: 'regexp', foreground: '89b5f9' }, // 正则表达式颜色 #89b5f9
+      { token: 'operator', foreground: 'dd664d' }, // 操作符颜色 #dd664d
+      { token: 'property', foreground: '6ae5c7' }, // 属性颜色 #6ae5c7
+      { token: 'constant', foreground: '6ae5c7' }, // 常量颜色 #6ae5c7
+      { token: 'namespace', foreground: 'b955e5' }, // 命名空间颜色 #b955e5
+      { token: 'comment.block.documentation', foreground: '9c9c9c' }, // 文档注释颜色
+      { token: 'comment.block', foreground: '9c9c9c' }, // 块注释颜色
+      { token: 'comment.line', foreground: '9c9c9c' }, // 行注释颜色
+      { token: 'meta.tag', foreground: 'e53f73' }, // 元标记颜色 #e53f73
+      { token: 'meta.attribute.name', foreground: '000000' }, // 元属性名称颜色 #6ae5c7
+      { token: 'meta.selector', foreground: 'e53f73' }, // 元选择器颜色 #e53f73
+      { token: 'tag', foreground: 'e53f73' },
+      { token: 'attribute.name', foreground: 'fbe77f' }, // html 属性名颜色
+      { token: 'attribute.value', foreground: 'a6de7f' } // html 属性值颜色
+    ],
+    colors: {
+      'editor.foreground': '#d5d5d5', // 编辑器前景色
+      'editor.background': bg, // 编辑器背景色
+      'editor.lineHighlightBackground': '#00000000', // 当前行高亮背景色
+      'editor.lineHighlightBorder': '#ffffff5c' // 隐藏当前行边框颜色
+    }
+  };
+};
+
+// 注册自定义格式化配置
+export const registerDocumentFormatInfo = (monaco: typeof monacoEditor) => {
+  const prettierFormat = ({ text, parser = 'markdown' }: { text: string; parser: string }) => {
+    console.log(prettier, 'prettier', text, parser);
+    return prettier.format(text, {
+      parser,
+      singleQuote: true,
+      tabWidth: 2, // 设置 tabSize 为 2
+      semi: true, // 在语句末尾添加分号
+      arrowParens: 'avoid', // 如果只有一个参数则不加括号
+      plugins: [parserMarkdown, parserBabel, parserTypescript, parserHtml, parserPostcss, parserYaml]
+    });
+  };
+
+  const provider: monacoEditor.languages.DocumentFormattingEditProvider = {
+    provideDocumentFormattingEdits: (
+      model: monacoEditor.editor.ITextModel
+    ): monacoEditor.languages.ProviderResult<monacoEditor.languages.TextEdit[]> => {
+      const text = model.getValue();
+      const language = model.getLanguageId(); // 获取当前语言标识符
+
+      if (language === 'c' || language === 'python') return [];
+
+      let formattedText;
+
+      switch (language) {
+        case 'markdown':
+          formattedText = prettierFormat({ text, parser: 'markdown' });
+          break;
+        case 'javascript':
+          formattedText = prettierFormat({ text, parser: 'babel' });
+          break;
+        case 'typescript':
+          formattedText = prettierFormat({ text, parser: 'typescript' });
+          break;
+        case 'html':
+          formattedText = prettierFormat({ text, parser: 'html' });
+          break;
+        case 'css':
+          formattedText = prettierFormat({ text, parser: 'postcss' });
+          break;
+        case 'less':
+          formattedText = prettierFormat({ text, parser: 'postcss' });
+          break;
+        case 'scss':
+          formattedText = prettierFormat({ text, parser: 'postcss' });
+          break;
+        case 'yaml':
+          formattedText = prettierFormat({ text, parser: 'yaml' });
+          break;
+        default:
+          formattedText = prettierFormat({ text, parser: 'markdown' });
+      }
+
+      return [
+        {
+          range: model.getFullModelRange(),
+          text: formattedText as unknown as string
+        }
+      ];
+    }
+  };
+
+  // 注册格式化
+  monaco.languages.registerDocumentFormattingEditProvider('markdown', provider);
+  monaco.languages.registerDocumentFormattingEditProvider('javascript', provider);
+  monaco.languages.registerDocumentFormattingEditProvider('typescript', provider);
+  monaco.languages.registerDocumentFormattingEditProvider('html', provider);
+  monaco.languages.registerDocumentFormattingEditProvider('css', provider);
+  monaco.languages.registerDocumentFormattingEditProvider('less', provider);
+  monaco.languages.registerDocumentFormattingEditProvider('scss', provider);
+  monaco.languages.registerDocumentFormattingEditProvider('yaml', provider);
+  monaco.languages.registerDocumentFormattingEditProvider('c', provider);
+  monaco.languages.registerDocumentFormattingEditProvider('python', provider);
+};