refactor(docs): 更新文档中的依赖名称为 vue-element-ui-x

Author: weilei

docs/src/community/README.md

@@ -16,7 +16,7 @@ Element-UI-X 是一个开源组件库，我们欢迎所有开发者加入我们
 
 我们的组件库通过 NPM 发布：
 
-- [@element-x/core](https://www.npmjs.com/package/@element-x/core)
+- [vue-element-ui-x](https://www.npmjs.com/package/vue-element-ui-x)
 
 ## 加入我们
 

docs/src/guide/components.md

@@ -10,10 +10,10 @@ Element-UI-X 提供了一系列专为 AI 交互设计的 Vue 组件，让你能
 
 ```bash
 # npm
-npm install @element-x/core
+npm install vue-element-ui-x
 
 # 或者使用 yarn
-yarn add @element-x/core
+yarn add vue-element-ui-x
 ```
 
 然后在你的入口文件中引入组件库：
@@ -22,7 +22,7 @@ yarn add @element-x/core
 import Vue from 'vue';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import ElementX from '@element-x/core';
+import ElementX from 'vue-element-ui-x';
 
 Vue.use(ElementUI);
 Vue.use(ElementX);

docs/src/guide/installation.md

@@ -62,7 +62,7 @@ new Vue({
 
 ```js
 import Vue from 'vue';
-import { ElXTypewriter } from '@element-x/core';
+import { ElXTypewriter } from 'vue-element-ui-x';
 
 // 注册组件
 Vue.component(ElXTypewriter.name, ElXTypewriter);
@@ -91,7 +91,7 @@ npm install babel-plugin-component -D
     [
       "component",
       {
-        "libraryName": "@element-x/core",
+        "libraryName": "vue-element-ui-x",
         "style": false
       },
       "element-x"
@@ -105,68 +105,13 @@ npm install babel-plugin-component -D
 ```js
 import Vue from 'vue';
 import { Button, Select } from 'element-ui';
-import { ElXTypewriter } from '@element-x/core';
+import { ElXTypewriter } from 'vue-element-ui-x';
 
 Vue.component(Button.name, Button);
 Vue.component(Select.name, Select);
 Vue.component(ElXTypewriter.name, ElXTypewriter);
 ```
 
-## 引入样式
-
-Element-UI-X 的样式依赖于 Element UI 的主题系统。你需要在项目中引入样式文件：
-
-### 完整引入样式
-
-```js
-// 在 main.js 中
-import 'element-ui/lib/theme-chalk/index.css';
-import '@element-x/core/lib/theme/index.css';
-```
-
-### 使用 SCSS
-
-如果你使用 SCSS，可以在样式文件中引入：
-
-```scss
-/* 引入 Element UI 变量 */
-@import '~element-ui/packages/theme-chalk/src/common/var';
-
-/* 引入 Element-UI-X 变量 */
-@import '~@element-x/core/src/theme/common/var';
-
-/* 自定义变量 */
-$--color-ai-bubble-user: #e8f4ff;
-$--color-ai-bubble-bot: #f7f7f7;
-
-/* 引入组件样式 */
-@import '~element-ui/packages/theme-chalk/src/index';
-@import '~@element-x/core/src/theme/index';
-```
-
-## CDN 引入
-
-你也可以通过 CDN 引入 Element-UI-X（暂未提供）：
-
-```html
-<!-- 引入 Vue -->
-<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
-
-<!-- 引入 Element UI -->
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
-/>
-<script src="https://unpkg.com/element-ui/lib/index.js"></script>
-
-<!-- 引入 Element-UI-X（未来将提供） -->
-<link
-  rel="stylesheet"
-  href="https://unpkg.com/@element-x/core/lib/theme/index.css"
-/>
-<script src="https://unpkg.com/@element-x/core/lib/index.js"></script>
-```
-
 ## 验证安装
 
 安装完成后，你可以在组件中使用 Element-UI-X 的组件：
@@ -175,7 +120,7 @@ $--color-ai-bubble-bot: #f7f7f7;
 <template>
   <div>
     <el-button>Element UI 按钮</el-button>
-    <el-x-typewriter text="这是一个打字机效果组件"></el-x-typewriter>
+    <el-x-typewriter content="这是一个打字机效果组件"></el-x-typewriter>
   </div>
 </template>
 ```

docs/src/guide/quickstart.md

@@ -6,6 +6,8 @@
 
 在成功 [安装](./installation.md) Element-UI-X 之后，你可以开始使用组件库中的组件。以下是一个简单的示例，展示如何使用打字机组件：
 
+:::demo
+
 ```html
 <template>
   <div class="demo-container">
@@ -21,9 +23,9 @@
         <div class="avatar">AI</div>
         <div class="content">
           <el-x-typewriter
-            :text="aiResponse"
-            :type-speed="30"
-            @typing-complete="onTypingComplete"
+            :content="aiResponse"
+            :typing="{ interval: 30, step: 1 }"
+            @finish="onTypingComplete"
             ref="typewriter"
           />
         </div>
@@ -52,19 +54,16 @@
     mounted() {
       // 页面加载后自动开始打字效果
       this.$nextTick(() => {
-        this.$refs.typewriter.startTyping();
+        this.$refs.typewriter.restart();
       });
     },
     methods: {
-      onTypingComplete(text) {
-        console.log('打字效果完成:', text);
+      onTypingComplete(instance) {
+        console.log('打字效果完成:', instance);
       },
       regenerateResponse() {
         // 模拟重新生成回复
-        this.$refs.typewriter.eraseAll();
-        setTimeout(() => {
-          this.$refs.typewriter.startTyping();
-        }, 300);
+        this.$refs.typewriter.restart();
       },
     },
   };
@@ -131,28 +130,41 @@
 </style>
 ```
 
+:::
+
 ## 使用多个组件
 
 Element-UI-X 提供了多个组件，你可以组合使用它们来构建完整的 AI 交互界面。以下是一个简化的示例：
 
+:::demo
+
 ```html
 <template>
   <div class="ai-chat">
     <!-- 思考动画组件 -->
-    <el-x-thinking v-if="isThinking" />
+    <el-x-thinking
+      v-if="isThinking"
+      status="thinking"
+      content="AI正在思考中..."
+    />
 
     <!-- 打字机组件 -->
     <el-x-typewriter
       v-else-if="aiResponse"
-      :text="aiResponse"
+      :content="aiResponse"
+      :typing="{ interval: 40, step: 1 }"
       ref="typewriter"
     />
-
+    <br />
     <!-- 发送框组件 -->
     <el-x-sender
       v-model="userInput"
-      @send="sendMessage"
+      @submit="sendMessage"
       :disabled="isThinking"
+      :loading="senderLoading"
+      ref="sender"
+      clearable
+      @cancel="handleCancel"
     />
   </div>
 </template>
@@ -164,71 +176,78 @@ Element-UI-X 提供了多个组件，你可以组合使用它们来构建完整
         userInput: '',
         aiResponse: '',
         isThinking: false,
+        senderLoading: false,
+        timeoutId: null,
       };
     },
     methods: {
-      sendMessage() {
-        if (!this.userInput.trim()) return;
+      sendMessage(message) {
+        if (!message.trim()) return;
 
-        const userMessage = this.userInput;
-        this.userInput = '';
-        this.isThinking = true;
+        const userMessage = message;
+        this.senderLoading = true;
 
         // 模拟AI响应
-        setTimeout(() => {
-          this.isThinking = false;
-          this.aiResponse = `你发送的消息是: "${userMessage}"。这是一个AI响应示例。`;
-
-          this.$nextTick(() => {
-            this.$refs.typewriter.startTyping();
-          });
-        }, 1500);
+        this.timeoutId = setTimeout(() => {
+          this.isThinking = true;
+          this.senderLoading = false;
+
+          setTimeout(() => {
+            this.isThinking = false;
+            this.aiResponse = `你发送的消息是: "${userMessage}"。这是一个AI响应示例。`;
+
+            this.$nextTick(() => {
+              this.$refs.typewriter.restart();
+            });
+          }, 1500);
+        }, 500);
+      },
+      handleCancel() {
+        this.senderLoading = false;
+        if (this.timeoutId) {
+          clearTimeout(this.timeoutId);
+          this.timeoutId = null;
+        }
+        this.$message.info('取消发送');
       },
     },
   };
 </script>
-```
-
-## 主题定制
 
-Element-UI-X 的组件样式继承自 Element UI 的主题系统，你可以通过修改主题变量来定制组件的外观：
-
-```scss
-/* 在你的样式文件中 */
-@import '~element-ui/packages/theme-chalk/src/common/var';
-
-/* 自定义 Element UI 主题变量 */
-$--color-primary: #6b46c1;
-$--color-success: #38a169;
-$--color-warning: #d69e2e;
-$--color-danger: #e53e3e;
-$--color-info: #4299e1;
-
-/* 自定义 Element-UI-X 主题变量 */
-$--color-ai-bubble-user: lighten($--color-primary, 40%);
-$--color-ai-bubble-bot: lighten($--color-info, 40%);
-$--color-ai-cursor: $--color-primary;
-
-/* 引入组件样式 */
-@import '~element-ui/packages/theme-chalk/src/index';
-@import '~@element-x/core/src/theme/index';
+<style>
+  .ai-chat {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ebeef5;
+    border-radius: 4px;
+  }
+</style>
 ```
 
+:::
+
 ## 组件引用和方法调用
 
 Element-UI-X 的组件支持通过 ref 引用来调用组件方法：
 
+:::demo
+
 ```html
 <template>
   <div>
     <el-x-typewriter
       ref="typewriter"
-      :text="text"
+      :content="text"
+      :typing="{ interval: 40, step: 1 }"
     />
 
-    <el-button @click="startTyping">开始打字</el-button>
-    <el-button @click="typeAll">立即完成</el-button>
-    <el-button @click="eraseAll">清空</el-button>
+    <div class="demo-controls">
+      <el-button-group>
+        <el-button @click="finishTyping">立即完成</el-button>
+        <el-button @click="restart">重新开始</el-button>
+      </el-button-group>
+    </div>
   </div>
 </template>
 
@@ -240,24 +259,29 @@ Element-UI-X 的组件支持通过 ref 引用来调用组件方法：
       };
     },
     methods: {
-      startTyping() {
-        this.$refs.typewriter.startTyping();
-      },
-      typeAll() {
-        this.$refs.typewriter.typeAll();
+      finishTyping() {
+        this.$refs.typewriter.finishTyping();
       },
-      eraseAll() {
-        this.$refs.typewriter.eraseAll();
+      restart() {
+        this.$refs.typewriter.restart();
       },
     },
   };
 </script>
+
+<style>
+  .demo-controls {
+    margin-top: 15px;
+  }
+</style>
 ```
 
+:::
+
 ## 下一步
 
 现在你已经了解了 Element-UI-X 的基本用法，可以：
 
 - 查看 [组件](../components/) 文档了解每个组件的详细用法
-- 查看 [示例](../examples/) 了解更多实际应用场景
-- 参考 [主题](./theme.md) 文档学习如何定制组件样式
+<!-- - 查看 [示例](../examples/) 了解更多实际应用场景
+- 参考 [主题](./theme.md) 文档学习如何定制组件样式 -->