jianghu-ui 1.0.1

package/src/components/JhToast/JhToast.stories.js

@@ -0,0 +1,386 @@
+import JhToast from './JhToast.vue';
+
+export default {
+  title: '基础组件/JhToast - 消息提示',
+  component: JhToast,
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: 'boolean',
+      description: '是否显示',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    message: {
+      control: 'text',
+      description: '消息内容',
+      table: {
+        defaultValue: { summary: '' },
+      },
+    },
+    type: {
+      control: 'select',
+      options: ['success', 'error', 'warning', 'info', 'loading'],
+      description: '消息类型',
+      table: {
+        defaultValue: { summary: 'success' },
+      },
+    },
+    position: {
+      control: 'select',
+      options: ['top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
+      description: '显示位置',
+      table: {
+        defaultValue: { summary: 'top' },
+      },
+    },
+    timeout: {
+      control: 'number',
+      description: '自动关闭时间(毫秒), -1表示不自动关闭',
+      table: {
+        defaultValue: { summary: '3000' },
+      },
+    },
+    showCloseButton: {
+      control: 'boolean',
+      description: '是否显示关闭按钮',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+  },
+};
+
+// 基础示例
+export const 基础示例 = {
+  render: () => ({
+    components: { JhToast },
+    data() {
+      return {
+        show: false,
+      };
+    },
+    template: `
+      <div>
+        <v-btn @click="show = true">显示提示</v-btn>
+        <jh-toast
+          v-model="show"
+          message="这是一条成功消息"
+          type="success"
+        />
+      </div>
+    `,
+  }),
+};
+
+// 不同类型
+export const 不同类型 = {
+  render: () => ({
+    components: { JhToast },
+    data() {
+      return {
+        showSuccess: false,
+        showError: false,
+        showWarning: false,
+        showInfo: false,
+        showLoading: false,
+      };
+    },
+    template: `
+      <div>
+        <v-btn class="mr-2 mb-2" color="success" @click="showSuccess = true">Success</v-btn>
+        <v-btn class="mr-2 mb-2" color="error" @click="showError = true">Error</v-btn>
+        <v-btn class="mr-2 mb-2" color="warning" @click="showWarning = true">Warning</v-btn>
+        <v-btn class="mr-2 mb-2" color="info" @click="showInfo = true">Info</v-btn>
+        <v-btn class="mb-2" color="primary" @click="showLoading = true">Loading</v-btn>
+
+        <jh-toast
+          v-model="showSuccess"
+          message="操作成功完成!"
+          type="success"
+        />
+        <jh-toast
+          v-model="showError"
+          message="操作失败,请重试"
+          type="error"
+        />
+        <jh-toast
+          v-model="showWarning"
+          message="请注意此操作的风险"
+          type="warning"
+        />
+        <jh-toast
+          v-model="showInfo"
+          message="这是一条提示信息"
+          type="info"
+        />
+        <jh-toast
+          v-model="showLoading"
+          message="正在处理中..."
+          type="loading"
+        />
+      </div>
+    `,
+  }),
+};
+
+// 不同位置
+export const 不同位置 = {
+  render: () => ({
+    components: { JhToast },
+    data() {
+      return {
+        showTop: false,
+        showBottom: false,
+        showTopLeft: false,
+        showTopRight: false,
+        showBottomLeft: false,
+        showBottomRight: false,
+      };
+    },
+    template: `
+      <div>
+        <div class="mb-2">
+          <v-btn class="mr-2" @click="showTopLeft = true">Top Left</v-btn>
+          <v-btn class="mr-2" @click="showTop = true">Top</v-btn>
+          <v-btn @click="showTopRight = true">Top Right</v-btn>
+        </div>
+        <div>
+          <v-btn class="mr-2" @click="showBottomLeft = true">Bottom Left</v-btn>
+          <v-btn class="mr-2" @click="showBottom = true">Bottom</v-btn>
+          <v-btn @click="showBottomRight = true">Bottom Right</v-btn>
+        </div>
+
+        <jh-toast v-model="showTop" message="顶部居中" position="top" />
+        <jh-toast v-model="showBottom" message="底部居中" position="bottom" />
+        <jh-toast v-model="showTopLeft" message="顶部左侧" position="top-left" />
+        <jh-toast v-model="showTopRight" message="顶部右侧" position="top-right" />
+        <jh-toast v-model="showBottomLeft" message="底部左侧" position="bottom-left" />
+        <jh-toast v-model="showBottomRight" message="底部右侧" position="bottom-right" />
+      </div>
+    `,
+  }),
+};
+
+// 带操作按钮
+export const 带操作按钮 = {
+  render: () => ({
+    components: { JhToast },
+    data() {
+      return {
+        show: false,
+        actionCount: 0,
+      };
+    },
+    template: `
+      <div>
+        <v-btn @click="show = true">显示带操作的提示</v-btn>
+        <p class="mt-2">操作按钮点击次数: {{ actionCount }}</p>
+        <jh-toast
+          v-model="show"
+          message="文件已删除"
+          type="warning"
+          action-text="撤销"
+          @action="actionCount++; show = false"
+        />
+      </div>
+    `,
+  }),
+};
+
+// 自定义图标
+export const 自定义图标 = {
+  render: () => ({
+    components: { JhToast },
+    data() {
+      return {
+        show1: false,
+        show2: false,
+        show3: false,
+      };
+    },
+    template: `
+      <div>
+        <v-btn class="mr-2" @click="show1 = true">自定义图标</v-btn>
+        <v-btn class="mr-2" @click="show2 = true">自定义颜色</v-btn>
+        <v-btn @click="show3 = true">自定义图标+颜色</v-btn>
+
+        <jh-toast
+          v-model="show1"
+          message="有新消息"
+          icon="mdi-email"
+        />
+        <jh-toast
+          v-model="show2"
+          message="自定义紫色"
+          color="purple"
+        />
+        <jh-toast
+          v-model="show3"
+          message="点赞成功"
+          icon="mdi-heart"
+          color="pink"
+        />
+      </div>
+    `,
+  }),
+};
+
+// 长文本消息
+export const 长文本消息 = {
+  render: () => ({
+    components: { JhToast },
+    data() {
+      return {
+        show1: false,
+        show2: false,
+      };
+    },
+    template: `
+      <div>
+        <v-btn class="mr-2" @click="show1 = true">中等长度消息</v-btn>
+        <v-btn @click="show2 = true">超长消息(会被截断)</v-btn>
+
+        <jh-toast
+          v-model="show1"
+          message="这是一条中等长度的消息,用于测试消息内容的显示效果"
+          type="info"
+        />
+        <jh-toast
+          v-model="show2"
+          message="这是一条非常非常长的消息内容,主要用于测试当消息内容超过最大长度限制时的显示效果,多余的内容会被自动截断并添加省略号。这样可以保证界面的整洁性,避免消息过长影响用户体验。"
+          type="warning"
+          :max-length="50"
+        />
+      </div>
+    `,
+  }),
+};
+
+// 不自动关闭
+export const 不自动关闭 = {
+  render: () => ({
+    components: { JhToast },
+    data() {
+      return {
+        show: false,
+      };
+    },
+    template: `
+      <div>
+        <v-btn @click="show = true">显示不自动关闭的提示</v-btn>
+        <p class="mt-2 text-caption">需要手动点击关闭按钮</p>
+        <jh-toast
+          v-model="show"
+          message="重要提示:此消息不会自动关闭"
+          type="warning"
+          :timeout="-1"
+        />
+      </div>
+    `,
+  }),
+};
+
+// 垂直布局
+export const 垂直布局 = {
+  render: () => ({
+    components: { JhToast },
+    data() {
+      return {
+        show: false,
+      };
+    },
+    template: `
+      <div>
+        <v-btn @click="show = true">显示垂直布局</v-btn>
+        <jh-toast
+          v-model="show"
+          message="这是一条使用垂直布局的消息,按钮会显示在下方"
+          type="info"
+          vertical
+          action-text="查看详情"
+        />
+      </div>
+    `,
+  }),
+};
+
+// 无关闭按钮
+export const 无关闭按钮 = {
+  render: () => ({
+    components: { JhToast },
+    data() {
+      return {
+        show: false,
+      };
+    },
+    template: `
+      <div>
+        <v-btn @click="show = true">显示无关闭按钮的提示</v-btn>
+        <p class="mt-2 text-caption">3秒后自动关闭</p>
+        <jh-toast
+          v-model="show"
+          message="此消息没有关闭按钮,会自动关闭"
+          type="success"
+          :show-close-button="false"
+        />
+      </div>
+    `,
+  }),
+};
+
+// 实际应用
+export const 实际应用 = {
+  render: () => ({
+    components: { JhToast },
+    data() {
+      return {
+        showToast: false,
+        toastMessage: '',
+        toastType: 'success',
+        isProcessing: false,
+      };
+    },
+    methods: {
+      async simulateSave() {
+        this.isProcessing = true;
+        this.toastMessage = '正在保存...';
+        this.toastType = 'loading';
+        this.showToast = true;
+
+        // 模拟异步操作
+        setTimeout(() => {
+          const success = Math.random() > 0.3;
+          this.toastMessage = success ? '保存成功!' : '保存失败,请重试';
+          this.toastType = success ? 'success' : 'error';
+          this.isProcessing = false;
+        }, 2000);
+      },
+      async simulateDelete() {
+        const result = await this.confirmDelete();
+        if (result) {
+          this.toastMessage = '删除成功';
+          this.toastType = 'warning';
+          this.showToast = true;
+        }
+      },
+      async confirmDelete() {
+        // 这里应该使用 confirm dialog,这里简化处理
+        return window.confirm('确定要删除吗?');
+      },
+    },
+    template: `
+      <div>
+        <v-btn class="mr-2" @click="simulateSave" :loading="isProcessing">保存数据</v-btn>
+        <v-btn @click="simulateDelete">删除数据</v-btn>
+
+        <jh-toast
+          v-model="showToast"
+          :message="toastMessage"
+          :type="toastType"
+        />
+      </div>
+    `,
+  }),
+};

package/src/components/JhToast/JhToast.vue

@@ -0,0 +1,239 @@
+<template>
+  <v-snackbar
+    v-model="isVisible"
+    :color="currentColor"
+    :timeout="currentTimeout"
+    :top="position.includes('top')"
+    :bottom="position.includes('bottom')"
+    :left="position.includes('left')"
+    :right="position.includes('right')"
+    :vertical="vertical"
+    :elevation="elevation"
+    :class="['jh-toast', `jh-toast--${type}`]"
+    @input="handleInput"
+  >
+    <div class="jh-toast__content">
+      <v-progress-circular
+        v-if="type === 'loading'"
+        :size="18"
+        :width="3"
+        color="white"
+        indeterminate
+        class="jh-toast__icon"
+      ></v-progress-circular>
+      <v-icon
+        v-else-if="currentIcon"
+        :color="iconColor"
+        class="jh-toast__icon"
+      >
+        {{ currentIcon }}
+      </v-icon>
+      <span class="jh-toast__message">{{ currentMessage }}</span>
+    </div>
+
+    <template v-slot:action="{ attrs }">
+      <v-btn
+        v-if="showCloseButton"
+        :color="closeButtonColor"
+        text
+        small
+        v-bind="attrs"
+        @click="close"
+      >
+        {{ closeButtonText }}
+      </v-btn>
+      <v-btn
+        v-if="actionText"
+        :color="actionButtonColor"
+        text
+        small
+        v-bind="attrs"
+        @click="handleAction"
+      >
+        {{ actionText }}
+      </v-btn>
+    </template>
+  </v-snackbar>
+</template>
+
+<script>
+export default {
+  name: 'JhToast',
+  props: {
+    // 是否显示
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    // 消息内容
+    message: {
+      type: String,
+      default: '',
+    },
+    // 类型: success, error, warning, info, loading
+    type: {
+      type: String,
+      default: 'success',
+      validator: (v) => ['success', 'error', 'warning', 'info', 'loading'].includes(v),
+    },
+    // 位置: top, bottom, top-left, top-right, bottom-left, bottom-right
+    position: {
+      type: String,
+      default: 'top',
+      validator: (v) => ['top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(v),
+    },
+    // 自动关闭时间(毫秒), -1 表示不自动关闭
+    timeout: {
+      type: Number,
+      default: 3000,
+    },
+    // 自定义颜色
+    color: {
+      type: String,
+      default: '',
+    },
+    // 自定义图标
+    icon: {
+      type: String,
+      default: '',
+    },
+    // 图标颜色
+    iconColor: {
+      type: String,
+      default: 'white',
+    },
+    // 是否显示关闭按钮
+    showCloseButton: {
+      type: Boolean,
+      default: true,
+    },
+    // 关闭按钮文本
+    closeButtonText: {
+      type: String,
+      default: '关闭',
+    },
+    // 关闭按钮颜色
+    closeButtonColor: {
+      type: String,
+      default: 'white',
+    },
+    // 操作按钮文本
+    actionText: {
+      type: String,
+      default: '',
+    },
+    // 操作按钮颜色
+    actionButtonColor: {
+      type: String,
+      default: 'white',
+    },
+    // 是否垂直布局
+    vertical: {
+      type: Boolean,
+      default: false,
+    },
+    // 阴影高度
+    elevation: {
+      type: [Number, String],
+      default: 24,
+    },
+    // 消息最大长度
+    maxLength: {
+      type: Number,
+      default: 100,
+    },
+  },
+  data() {
+    return {
+      isVisible: false,
+    };
+  },
+  computed: {
+    currentMessage() {
+      let msg = this.message || '';
+      if (msg.length > this.maxLength) {
+        msg = msg.substring(0, this.maxLength) + '...';
+      }
+      return msg;
+    },
+    currentColor() {
+      if (this.color) return this.color;
+
+      const colorMap = {
+        success: 'success',
+        error: 'error',
+        warning: 'warning',
+        info: 'info',
+        loading: 'primary',
+      };
+      return colorMap[this.type] || 'success';
+    },
+    currentIcon() {
+      if (this.icon) return this.icon;
+      if (this.type === 'loading') return '';
+
+      const iconMap = {
+        success: 'mdi-check-circle',
+        error: 'mdi-alert-circle',
+        warning: 'mdi-alert',
+        info: 'mdi-information',
+      };
+      return iconMap[this.type] || 'mdi-check-circle';
+    },
+    currentTimeout() {
+      return this.type === 'loading' ? -1 : this.timeout;
+    },
+  },
+  watch: {
+    value(newVal) {
+      this.isVisible = newVal;
+    },
+    isVisible(newVal) {
+      if (!newVal) {
+        this.$emit('input', false);
+      }
+    },
+  },
+  mounted() {
+    this.isVisible = this.value;
+  },
+  methods: {
+    handleInput(value) {
+      this.$emit('input', value);
+      if (!value) {
+        this.$emit('close');
+      }
+    },
+    close() {
+      this.isVisible = false;
+    },
+    handleAction() {
+      this.$emit('action');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.jh-toast__content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.jh-toast__icon {
+  margin-right: 12px;
+}
+
+.jh-toast__message {
+  flex: 1;
+  word-break: break-word;
+}
+
+/* 响应式样式 */
+@media screen and (max-width: 600px) {
+  .jh-toast__message {
+    max-width: calc(100vw - 200px);
+  }
+}
+</style>

package/src/components/JhTreeSelect/JhTreeSelect.md

@@ -0,0 +1,82 @@
+# JhTreeSelect - 树形选择器
+
+JhTreeSelect 提供多选/单选树对话框，集成搜索、全选、移动端适配和已选列表，适用于组织、权限、分类等层级数据的选择。
+
+## 功能特性
+
+- 🌳 **多模式**：支持 `multiple`/`single` 两种模式，可选择节点或仅选择叶子
+- 🔍 **即时搜索**：关键字过滤树节点，并支持“全选当前搜索结果”
+- 📱 **响应式**：小屏自动切换全屏弹窗，已选区域在移动端折叠展示
+- 🧺 **批量操作**：内置全选、清除、批量删除已选项
+- 🔁 **受控对话框**：`visible` + `v-model` 统一控制，确认再回传
+
+## 基础用法
+
+```vue
+<template>
+  <jh-tree-select
+    v-model="selectedNodes"
+    :visible.sync="dialogVisible"
+    :data="treeData"
+    mode="multiple"
+    :allow-select-node="true"
+    title="选择部门"
+    @confirm="handleConfirm"
+  />
+</template>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | `v-model`，选中节点数组 | Array | [] |
+| visible | 弹窗是否显示 | boolean | false |
+| mode | 选择模式 `multiple/single` | string | `multiple` |
+| title | 对话框标题 | string | `选择节点` |
+| placeholder | 搜索框占位符 | string | `搜索节点` |
+| maxWidth | 弹窗最大宽度 | string | `1000px` |
+| data | 树形数据源 | Array | [] |
+| nodeKey | 节点唯一 key 字段名 | string | `id` |
+| nodeLabel | 节点显示字段名 | string | `label` |
+| nodeChildren | 子节点字段名 | string | `children` |
+| allowSelectNode | 是否允许点击节点本身选择 | boolean | false |
+| showSearch | 是否展示搜索框 | boolean | true |
+| showSelectAll | 是否展示全选按钮（仅 multiple） | boolean | true |
+| loading | 数据加载状态 | boolean | false |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| input | `v-model` 更新，返回选中节点数组 | (nodes: Array) |
+| update:visible | 同步弹窗开关 | (visible: boolean) |
+| confirm | 点击“确定”后触发 | (nodes: Array) |
+| cancel | 点击“取消”或关闭图标后触发 | - |
+
+### Slots
+
+组件暂未开放插槽。
+
+## 数据结构示例
+
+```js
+const treeData = [
+  {
+    id: 'dept-1',
+    label: '总部',
+    children: [
+      { id: 'dept-1-1', label: '技术部' },
+      { id: 'dept-1-2', label: '运营部' }
+    ]
+  }
+];
+```
+
+## 使用建议
+
+- 如果只允许选择叶子节点，可将 `allowSelectNode` 设为 false，并在 `toggleNode` 中自定义策略
+- 需要默认展开其他层级时，可修改组件数据或 fork 组件以暴露更多控制属性
+- 回传的数据为节点对象，包含原始字段，可直接提交给后端或提取 ID