Spinner Model Controls(二)

本文介绍了JSpinner组件中的SpinnerModel接口及其三种实现:SpinnerDateModel、SpinnerListModel和SpinnerNumberModel。探讨了如何通过这些模型定制日期、列表项和数值的选择,并提供了自定义模型的示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

14.2 SpinnerModel接口

到目前为止,我们已经了解了如何与主JSpinner类交互。SpinnerModel接口是组件的数据模型。SpinnerModel的定义如下:

public interface SpinnerModel {
  // Properties
  public Object getValue();
  public void setValue(Object);
  public Object getNextValue();
  public Object getPreviousValue();
  // Listeners
  public void addChangeListener(ChangeListener);
  public void removeChangeListener(ChangeListener);
}

SpinnerMOdel的六个方法直接映射到JSpinner的相应方法。JSpinner方法只是将这些方法调用转向模型的方法,尽管在监听器方法的情况下,事件源是我们关联监听器的地方。

14.3 AbstractSpinnerModel类

SpinnerModel接口的基本实现是AbstractSpinnerModel类。他提供了监听器列表的管理与通知。子类必须实现其他的四个与值相关的接口方法。SpinnerModel接口的实现有:SpinnerDateModel,SpinnerListModel与SpinnerNumberModel。

14.3.1 SpinnerDateModel类

正如其名字所暗示的,SpinnerModel提供了日期的选择。这个类有两个构造函数:一个在默认情况下选择所有的日期,而另一个允许我们限制范围。

public SpinnerDateModel()
SpinnerModel model = new SpinnerDateModel();
JSpinner spinner = new JSpinner(model);
public SpinnerDateModel(Date value, Comparable start, Comparable end,
  int calendarField)
Calendar cal = Calendar.getInstance();
Date now = cal.getTime();
cal.add(Calendar.YEAR, -50);
Date startDate = cal.getTime();
cal.add(Calendar.YEAR, 100);
Date endDate = cal.getTime();
SpinnerModel model =
  new SpinnerDateModel(now, startDate, endDate, Calendar.YEAR);
JSpinner spinner = new JSpinner(model);

如果我们没有指定任何参数,则没有起始点与结束点。这里所显示的示例使用参数来提供100年的范围。最后一个域应是Calendar类的一个常量:

•Calendar.AM_PM

•Calendar.DAY_OF_MONTH

•Calendar.DAY_OF_WEEK

•Calendar.DAY_OF_WEEK_IN_MONTH

•Calendar.DAY_OF_YEAR

•Calendar.ERA

•Calendar.HOUR

•Calendar.HOUR_OF_DAY

•Calendar.MILLISECOND

•Calendar.MINUTE

•Calendar.MONTH

•Calendar.SECOND

•Calendar.WEEK_OF_MONTH

•Calendar.WEEK_OF_YEAR

• Calendar.YEAR

注意,SpinnerModel不包含任何与时区相关的Calendar常量。我们不可以通过SpinnerDateModel在JSpinner内进行滚动。

表14-3列出了SpinnerModel接口的三个属性以四个SpinnerDateModel的特定属性。


通常情况下,我们将会使用的唯一新属性是用于获取最终的日期,尽管他所做的是以合适的数据类型包装getValue()的方法的结果。如果我们为构造函数提供了一个日期范围,在当前值为边界条件时,前一个或是后一个值将为null。

14.3.2 SpinnerListModel类

SpinnerListModel提供了由条目列表中,或者是至少是他们的字符串表示中进行选择。这个类有三个构造函数:

public SpinnerListModel()
SpinnerModel model = new SpinnerListModel();
JSpinner spinner = new JSpinner(model);
public SpinnerListModel(List<?> values)
List<String> list = args;
SpinnerModel model = new SpinnerListModel(list);
JSpinner spinner = new JSpinner(model);
public SpinnerListModel(Object[] values)
SpinnerModel model = new SpinnerListModel(args);
JSpinner spinner = new JSpinner(model);

当没有提供参数时,模型只包含一个元素:字符串empty。List版本具有一个到列表的引用。他并没有拷贝这个列表。如果我们修改这个列表,我们就修改了模型中的元素。数组版本创建了一个不可以添加的私有的List实例的内联类。对于List与数组版本,初始时选中的是第一个元素。如果其中一个为空,则会抛出IllegalArgumentException。

如表14-4所示,在接口之外所添加的唯一属性就是获取或是设置列表。


14.3.3 SpinnerNumberModel类

SpinnerNumberModel提供了由一个无限制或是有限制的值范围内进行数字选择。所选择的数字可以是Number的任意子类,包括Integer与Double。这个类具有四个构造函数,而前三个都是最后一个的简化版。

public SpinnerNumberModel()
SpinnerModel model = new SpinnerNumberModel();
JSpinner spinner = new JSpinner(model);
public SpinnerNumberModel(double value, double minimum, double maximum,
  double stepSize)
SpinnerModel model = new SpinnerNumberModel(50, 0, 100, .25);
JSpinner spinner = new JSpinner(model);
public SpinnerNumberModel(int value, int minimum, int maximum, int stepSize)
SpinnerModel model = new SpinnerNumberModel(50, 0, 100, 1);
JSpinner spinner = new JSpinner(model);
public SpinnerNumberModel(Number value, Comparable minimum, Comparable maximum,
  Number stepSize)
Number value = new Integer(50);
Number min = new Integer(0);
Number max = new Integer(100);
Number step = new Integer(1);
SpinnerModel model = new SpinnerNumberModel(value, min, max, step);
JSpinner spinner = new JSpinner(model);

如果最小值或是最大值为null,则这个范围就是无限制的。对于无参数的版本,初始值为0而步进值为1。步进尺寸是字面值,所以如果我们将这个步进值设置为.333,则并不完美。

表14-5显示了SpinnerNumberModel的属性。所添加的属性与构造函数所提供的相同。


14.3.4 自定义模型

通常情况下,JSpinner的可用模型就足够了,所以我们并不需要派生。然而,所提供的模型并不能总是满足我们的需求。例如,我们也许希望使用一个包装了SpinnerListModel的自定义模型,而不希望停在第一个或是最后一个元素上,他向另一个方向环绕。列表14-2显示了一个这样的实现。

package swingstudy.ch13;
 
import java.util.List;
 
import javax.swing.SpinnerListModel;
 
public class RolloverSpinnerListModel extends SpinnerListModel {
 
	public RolloverSpinnerListModel(List<?> values) {
		super(values);
	}
 
	public RolloverSpinnerListModel(Object[] values) {
		super(values);
	}
 
	public Object getNextValue() {
		Object returnValue = super.getNextValue();
		if(returnValue == null) {
			returnValue = getList().get(0);
		}
		return returnValue;
	}
 
	public Object getPreviousValue() {
		Object returnValue = super.getPreviousValue();
		if(returnValue == null) {
			List list = getList();
			returnValue = list.get(list.size()-1);
		}
		return returnValue;
	}
}


以上mrviewer.vue中的本草關聯功能以前述病態關聯功能為範例進行修改, mrmncrud.vue: <template> <div class="mncrud-container"> <div class="mncrud-controls"> <input v-model="searchQuery" placeholder="搜索本草名稱..." class="search-input" @input="filterMNTags" /> </div> <!-- 创建表单 --> <div class="form-section"> <form @submit.prevent="createMNTag" class="create-form"> <input v-model="newMNTag.mnname" placeholder="輸入新本草名稱" required class="form-input" :disabled="isLoading" /> <button type="submit" class="form-btn create-btn" :disabled="isLoading">創建</button> </form> </div> <div class="mncrud-content"> <div v-if="isLoading" class="loading"> <div class="loading-spinner"></div> <span>加載中...</span> </div> <div v-else> <!-- 标签列表 --> <div class="mncrud-list" v-if="filteredTags.length > 0"> <div v-for="tag in filteredTags" :key="tag.id" class="mncrud-item"> <div class="tag-info"> <span class="tag-id">ID: {{ tag.id }}</span> <span class="tag-name">{{ tag.mnname }}</span> </div> <div class="tag-actions"> <button @click="editMNTag(tag)" class="action-btn edit-btn">編輯</button> <button @click="deleteMNTag(tag.id)" class="action-btn delete-btn">刪除</button> </div> </div> </div> <div v-else class="no-tags"> 沒有找到匹配的本草標籤 </div> </div> </div> <!-- 编辑模态框 --> <div v-if="editingTag" class="edit-modal"> <div class="modal-content"> <h3>編輯本草名稱</h3> <form @submit.prevent="updateMNTag"> <input v-model="editingTag.mnname" required class="form-input" :disabled="isLoading" /> <div class="modal-actions"> <button type="submit" class="form-btn save-btn">保存</button> <button type="button" @click="cancelEdit" class="form-btn cancel-btn">取消</button> </div> </form> </div> </div> </div> </template> <script> export default { name: 'mrmncrud', data() { return { mnTags: [], filteredTags: [], searchQuery: '', newMNTag: { mnname: '' }, editingTag: null, isLoading: false }; }, methods: { async fetchMNTags() { this.isLoading = true; try { const response = await fetch('MNTag/?format=json'); if (!response.ok) throw new Error('获取数据失败'); this.mnTags = await response.json(); this.filterMNTags(); } catch (error) { console.error('获取本草标签失败:', error); alert('加载数据失败,请重试'); } finally { this.isLoading = false; } }, filterMNTags() { const query = this.searchQuery.trim().toLowerCase(); if (!query) { this.filteredTags = [...this.mnTags]; } else { this.filteredTags = this.mnTags.filter(tag => tag.mnname.toLowerCase().includes(query) || tag.id.toString().includes(query) ); } }, async createMNTag() { if (!this.newMNTag.mnname.trim()) { alert('本草名称不能为空'); return; } this.isLoading = true; try { const response = await fetch('MNTag/?format=json', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.newMNTag), }); if (!response.ok) throw new Error('创建失败'); await this.fetchMNTags(); this.newMNTag.mnname = ''; this.$emit('tag-updated'); } catch (error) { console.error('创建本草标签失败:', error); alert(error.message); } finally { this.isLoading = false; } }, editMNTag(tag) { this.editingTag = { ...tag }; }, async updateMNTag() { if (!this.editingTag.mnname.trim()) { alert('本草名称不能为空'); return; } this.isLoading = true; try { const response = await fetch(`MNTag/${this.editingTag.id}/?format=json`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.editingTag), }); if (!response.ok) throw new Error('更新失败'); await this.fetchMNTags(); this.editingTag = null; this.$emit('tag-updated'); } catch (error) { console.error('更新本草标签失败:', error); alert(error.message); } finally { this.isLoading = false; } }, cancelEdit() { this.editingTag = null; }, async deleteMNTag(id) { if (!confirm('确定要删除这个本草标签吗?')) return; this.isLoading = true; try { const response = await fetch(`MNTag/${id}/?format=json`, { method: 'DELETE' }); if (!response.ok) throw new Error('删除失败'); await this.fetchMNTags(); this.$emit('tag-updated'); } catch (error) { console.error('删除本草标签失败:', error); alert(error.message); } finally { this.isLoading = false; } } }, mounted() { this.fetchMNTags(); } }; </script> <style scoped> .mncrud-container { height: 100%; display: flex; flex-direction: column; } .mncrud-controls { padding: 10px; background: #f5f5f5; border-bottom: 1px solid #ddd; } .search-input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .mncrud-content { flex: 1; overflow-y: auto; padding: 10px; } .form-section { padding: 10px; background: #f5f5f5; border-bottom: 1px solid #ddd; } .create-form { display: flex; gap: 10px; } .form-input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .form-btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; } .create-btn { background-color: #4CAF50; color: white; } .mncrud-list { display: flex; flex-direction: column; gap: 10px; } .mncrud-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: white; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .tag-info { display: flex; flex-direction: column; } .tag-id { font-size: 0.8rem; color: #666; } .tag-name { font-weight: 500; } .tag-actions { display: flex; gap: 5px; } .action-btn { padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; } .edit-btn { background-color: #2196F3; color: white; } .delete-btn { background-color: #f44336; color: white; } .no-tags { padding: 20px; text-align: center; color: #666; font-style: italic; } .edit-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background: white; padding: 20px; border-radius: 8px; width: 90%; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; } .save-btn { background-color: #4CAF50; color: white; } .cancel-btn { background-color: #9E9E9E; color: white; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .loading-spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top: 4px solid #3498db; width: 30px; height: 30px; animation: spin 1s linear infinite; margin-bottom: 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>
08-04
分析mreditor.vue及mrdncrud中病態編輯的功能為範例,新加入一個辨證編輯的功能,修改mreditor.vue代碼,並增加一個mrdiancrud.vue mreditor.vue: <template> <div> <div> <div class="wangeditor"> <WangEditor v-model="content" @response="(msg) => content = msg" /> </div> <div class="up-panel"> <div class="tag-panel"> <mrdncrud v-if="showDnCrud" @tag-updated="handleDnTagUpdated" /> <mrmncrud v-if="showMnCrud" @tag-updated="handleMnTagUpdated" /> <mrsncrud v-if="showSnCrud" @tag-updated="handleSnTagUpdated" /> <mrpncrud v-if="showPnCrud" @tag-updated="handlePnTagUpdated" /> <mrfncrud v-if="showFnCrud" @tag-updated="handleFnTagUpdated" /> </div> <div class="crud-buttons"> <button @click="toggleDnCrud" class="fixed-dncrud-btn"> {{ showDnCrud ? '病態編輯' : '病態編輯' }} </button> <button @click="toggleMnCrud" class="fixed-mncrud-btn"> {{ showMnCrud ? '本草編輯' : '本草編輯' }} </button> <button @click="toggleSnCrud" class="fixed-sncrud-btn"> {{ showSnCrud ? '典籍編輯' : '典籍編輯' }} </button> <button @click="togglePnCrud" class="fixed-pncrud-btn"> {{ showPnCrud ? '方劑編輯' : '方劑編輯' }} </button> <button @click="toggleFnCrud" class="fixed-fncrud-btn"> {{ showFnCrud ? '人物編輯' : '人物編輯' }} </button> </div> </div> <div class="right-panel"> <div class="dntag-display" v-if="currentDnTags.length"> <div class="field-name">相關病態:</div> <div class="dntag-value"> <span v-for="(tag, index) in currentDnTags" :key="'dn-'+index" class="dn-tag" style="color: rgb(212, 107, 8);"> {{ tag }}<span v-if="index < currentDnTags.length - 1">;</span> </span> </div> </div> <div class="dntag-display" v-else> <div class="field-name">相關病態:</div> <div class="dntag-value">無關聯病態名稱</div> </div> <div class="mntag-display" v-if="currentMnTags.length"> <div class="field-name">相關本草:</div> <div class="mntag-value"> <span v-for="(tag, index) in currentMnTags" :key="'mn-'+index" class="mn-tag" style="color: rgb(0, 128, 0);"> {{ tag }}<span v-if="index < currentMnTags.length - 1">;</span> </span> </div> </div> <div class="mntag-display" v-else> <div class="field-name">相關本草:</div> <div class="mntag-value">無關聯本草名稱</div> </div> <div class="sntag-display" v-if="currentSnTags.length"> <div class="field-name">相關典籍:</div> <div class="sntag-value"> <span v-for="(tag, index) in currentSnTags" :key="'sn-'+index" class="sn-tag" style="color: rgb(51, 102, 255);"> {{ tag }}<span v-if="index < currentSnTags.length - 1">;</span> </span> </div> </div> <div class="sntag-display" v-else> <div class="field-name">相關典籍:</div> <div class="sntag-value">無關聯典籍名稱</div> </div> <div class="pntag-display" v-if="currentPnTags.length"> <div class="field-name">相關方劑:</div> <div class="pntag-value"> <span v-for="(tag, index) in currentPnTags" :key="'pn-'+index" class="pn-tag" style="color: rgb(138, 43, 226);"> {{ tag }}<span v-if="index < currentPnTags.length - 1">;</span> </span> </div> </div> <div class="pntag-display" v-else> <div class="field-name">相關方劑:</div> <div class="pntag-value">無關聯方劑名稱</div> </div> <div class="fntag-display" v-if="currentFnTags.length"> <div class="field-name">相關人物:</div> <div class="fntag-value"> <span v-for="(tag, index) in currentFnTags" :key="'fn-'+index" class="fn-tag" style="color: rgb(139, 69, 19);"> {{ tag }}<span v-if="index < currentFnTags.length - 1">;</span> </span> </div> </div> <div class="fntag-display" v-else> <div class="field-name">相關人物:</div> <div class="fntag-value">無關聯人物名稱 </div> </div> </div> </div> <div class="content-display" v-html="displayContent"></div> <footer class="sticky-footer"> <!-- 修改点:将reset按钮绑定到confirmReset方法 --> <span><button @click="confirmReset" class="reset-btn">輸入新醫案</button></span> <span class="form-input"> <input v-model="formData.mrname" placeholder="醫案命名" class="name-input" /> </span> <span class="form-input"> <input v-model="formData.mrorigin" placeholder="醫案出處" class="origin-input" /> </span> <span class="form-input"> <input v-model="formData.mrdoctor" placeholder="醫案醫者" class="doctor-input" /> </span> <span class="form-input"> <input v-model="formData.mrposter" placeholder="提交者姓名" class="poster-input" /> </span> <span><button @click="toggleDisplayFormat">{{ displayButtonText }}</button></span> <span class="id-input"> <input v-model="fetchId" placeholder="輸入醫案ID" type="number" min="1" /> <button @click="fetchById">載入醫案</button> </span> <span v-if="submittedId"> <button @click="updateContent" class="update-btn">更新醫案</button> <button @click="deleteContent" class="delete-btn">刪除醫案</button> </span> <span v-else> <button @click="submitContent" class="submit-btn">提交醫案</button> </span> <span v-if="submittedId" class="submitted-id">醫案 ID: {{ submittedId }}</span> <span>醫案編輯器</span> </footer> </div> </template> <script> import WangEditor from './WangEditor.vue'; import mrdncrud from './mrdncrud.vue'; import mrmncrud from './mrmncrud.vue'; import mrsncrud from './mrsncrud.vue'; import mrpncrud from './mrpncrud.vue'; import mrfncrud from './mrfncrud.vue'; import LZString from 'lz-string'; export default { name: 'mreditor', components: { WangEditor, mrdncrud, mrmncrud, mrsncrud, mrpncrud, mrfncrud }, data() { return { content: '', submittedId: null, fetchId: null, dnTags: [], mnTags: [], snTags: [], pnTags: [], fnTags: [], showRawHtml: false, stateVersion: '1.5', autoSaveTimer: null, autoSaveInterval: 30000, currentDnTags: [], currentMnTags: [], currentSnTags: [], currentPnTags: [], currentFnTags: [], dnTagMap: {}, mnTagMap: {}, snTagMap: {}, pnTagMap: {}, fnTagMap: {}, showDnCrud: false, showMnCrud: false, showSnCrud: false, showPnCrud: false, showFnCrud: false, formData: { mrname: "", mrorigin: "", mrdoctor: "", mrposter: "" } }; }, computed: { highlightedContent() { if (!this.dnTags.length && !this.mnTags.length && !this.snTags.length && !this.pnTags.length && !this.fnTags.length) return this.content; const tempEl = document.createElement('div'); tempEl.innerHTML = this.content; if (this.dnTags.length) { const walker = document.createTreeWalker( tempEl, NodeFilter.SHOW_TEXT ); const nodes = []; while (walker.nextNode()) { nodes.push(walker.currentNode); } nodes.forEach(node => { let text = node.nodeValue; let newHtml = text; this.dnTags .slice() .sort((a, b) => b.length - a.length) .forEach(tag => { const regex = new RegExp( this.escapeRegExp(tag), 'g' ); newHtml = newHtml.replace( regex, `<span style="color: rgb(212, 107, 8); font-weight: bold;">${tag}</span>` ); }); if (newHtml !== text) { const span = document.createElement('span'); span.innerHTML = newHtml; node.parentNode.replaceChild(span, node); } }); } if (this.mnTags.length) { const mnWalker = document.createTreeWalker( tempEl, NodeFilter.SHOW_TEXT ); const mnNodes = []; while (mnWalker.nextNode()) mnNodes.push(mnWalker.currentNode); mnNodes.forEach(node => { let text = node.nodeValue; let newHtml = text; this.mnTags .slice() .sort((a, b) => b.length - a.length) .forEach(tag => { const regex = new RegExp(this.escapeRegExp(tag), 'g'); newHtml = newHtml.replace( regex, `<span style="color: rgb(0, 128, 0); font-weight: bold;">${tag}</span>` ); }); if (newHtml !== text) { const span = document.createElement('span'); span.innerHTML = newHtml; node.parentNode.replaceChild(span, node); } }); } if (this.snTags.length) { const snWalker = document.createTreeWalker( tempEl, NodeFilter.SHOW_TEXT ); const snNodes = []; while (snWalker.nextNode()) snNodes.push(snWalker.currentNode); snNodes.forEach(node => { let text = node.nodeValue; let newHtml = text; this.snTags .slice() .sort((a, b) => b.length - a.length) .forEach(tag => { const regex = new RegExp(this.escapeRegExp(tag), 'g'); newHtml = newHtml.replace( regex, `<span style="color: rgb(51, 102, 255); font-weight: bold;">${tag}</span>` ); }); if (newHtml !== text) { const span = document.createElement('span'); span.innerHTML = newHtml; node.parentNode.replaceChild(span, node); } }); } if (this.pnTags.length) { const pnWalker = document.createTreeWalker( tempEl, NodeFilter.SHOW_TEXT ); const pnNodes = []; while (pnWalker.nextNode()) pnNodes.push(pnWalker.currentNode); pnNodes.forEach(node => { let text = node.nodeValue; let newHtml = text; this.pnTags .slice() .sort((a, b) => b.length - a.length) .forEach(tag => { const regex = new RegExp(this.escapeRegExp(tag), 'g'); newHtml = newHtml.replace( regex, `<span style="color: rgb(138, 43, 226); font-weight: bold;">${tag}</span>` ); }); if (newHtml !== text) { const span = document.createElement('span'); span.innerHTML = newHtml; node.parentNode.replaceChild(span, node); } }); } if (this.fnTags.length) { const fnWalker = document.createTreeWalker( tempEl, NodeFilter.SHOW_TEXT ); const fnNodes = []; while (fnWalker.nextNode()) fnNodes.push(fnWalker.currentNode); fnNodes.forEach(node => { let text = node.nodeValue; let newHtml = text; this.fnTags .slice() .sort((a, b) => b.length - a.length) .forEach(tag => { const regex = new RegExp(this.escapeRegExp(tag), 'g'); newHtml = newHtml.replace( regex, `<span style="color: rgb(139, 69, 19); font-weight: bold;">${tag}</span>` ); }); if (newHtml !== text) { const span = document.createElement('span'); span.innerHTML = newHtml; node.parentNode.replaceChild(span, node); } }); } return tempEl.innerHTML; }, displayContent() { if (this.showRawHtml) { return this.escapeHtml(this.content); } return this.highlightedContent; }, displayButtonText() { return this.showRawHtml ? '病態渲染格式' : '病態原始標籤'; } }, watch: { content: { handler() { this.debouncedSaveState(); }, deep: true } }, async mounted() { await this.fetchDNTags(); await this.fetchMNTags(); await this.fetchSNTags(); await this.fetchPNTags(); await this.fetchFNTags(); this.restoreState(); this.setupAutoSave(); }, activated() { console.log('醫案編輯器被激活'); this.restoreState(); this.setupAutoSave(); }, deactivated() { console.log('醫案編輯器被停用'); this.saveState(); this.clearAutoSave(); }, beforeDestroy() { this.clearAutoSave(); }, methods: { // 新增方法:确认重置逻辑 confirmReset() { // 检查是否有需要保存的数据 const hasData = this.content || this.submittedId || this.formData.mrname || this.formData.mrorigin || this.formData.mrdoctor || this.formData.mrposter; if (hasData) { // 显示警告对话框 if (confirm('輸入欄位中有資料!回原頁面繼續更新檔案請按確定,離開原頁面請按取消。')) { // 用户选择"是":回到原来页面(不执行任何操作) return; } else { // 用户选择"否":清除数据并重置 this.resetAll(); } } else { // 没有数据时直接重置 this.resetAll(); } }, // 重置所有数据 resetAll() { this.content = ''; this.submittedId = null; this.fetchId = null; this.showRawHtml = false; this.currentDnTags = []; this.currentMnTags = []; this.currentSnTags = []; this.currentPnTags = []; this.currentFnTags = []; this.showDnCrud = false; this.showMnCrud = false; this.showSnCrud = false; this.showPnCrud = false; this.showFnCrud = false; this.formData = { mrname: "", mrorigin: "", mrdoctor: "", mrposter: "" }; // 清除自动保存状态 this.clearState(); // 关闭标签面板 const panel = document.querySelector('.tag-panel'); if (panel) panel.style.display = 'none'; }, toggleDnCrud() { this.showDnCrud = !this.showDnCrud; this.showMnCrud = false; this.showSnCrud = false; this.showPnCrud = false; this.showFnCrud = false; this.updatePanelDisplay(); }, toggleMnCrud() { this.showMnCrud = !this.showMnCrud; this.showDnCrud = false; this.showSnCrud = false; this.showPnCrud = false; this.showFnCrud = false; this.updatePanelDisplay(); }, toggleSnCrud() { this.showSnCrud = !this.showSnCrud; this.showDnCrud = false; this.showMnCrud = false; this.showPnCrud = false; this.showFnCrud = false; this.updatePanelDisplay(); }, togglePnCrud() { this.showPnCrud = !this.showPnCrud; this.showDnCrud = false; this.showMnCrud = false; this.showSnCrud = false; this.showFnCrud = false; this.updatePanelDisplay(); }, toggleFnCrud() { this.showFnCrud = !this.showFnCrud; this.showDnCrud = false; this.showMnCrud = false; this.showSnCrud = false; this.showPnCrud = false; this.updatePanelDisplay(); }, updatePanelDisplay() { const panel = document.querySelector('.tag-panel'); if (this.showDnCrud || this.showMnCrud || this.showSnCrud || this.showPnCrud || this.showFnCrud) { panel.style.display = 'block'; } else { panel.style.display = 'none'; } }, handleDnTagUpdated() { console.log('病态标签已更新,刷新数据'); this.fetchDNTags(); }, handleMnTagUpdated() { console.log('本草标签已更新,刷新数据'); this.fetchMNTags(); }, handleSnTagUpdated() { console.log('典籍标签已更新,刷新数据'); this.fetchSNTags(); }, handlePnTagUpdated() { console.log('方剂标签已更新,刷新数据'); this.fetchPNTags(); }, handleFnTagUpdated() { console.log('人物标签已更新,刷新数据'); this.fetchFNTags(); }, async fetchPNTags() { try { const response = await fetch('PNTag/?format=json'); const data = await response.json(); this.pnTags = data .map(item => item.pnname) .filter(name => name && name.trim().length > 0); this.pnTagMap = {}; data.forEach(item => { if (item.id && item.pnname) { this.pnTagMap[item.id] = item.pnname; } }); } catch (error) { console.error('获取方剂标签失败:', error); alert('方剂标签数据加载失败,高亮功能不可用'); } }, async fetchSNTags() { try { const response = await fetch('SNTag/?format=json'); const data = await response.json(); this.snTags = data .map(item => item.snname) .filter(name => name && name.trim().length > 0); this.snTagMap = {}; data.forEach(item => { if (item.id && item.snname) { this.snTagMap[item.id] = item.snname; } }); } catch (error) { console.error('获取典籍标签失败:', error); alert('典籍标签数据加载失败,高亮功能不可用'); } }, async fetchFNTags() { try { const response = await fetch('FNTag/?format=json'); const data = await response.json(); this.fnTags = data .map(item => item.fnname) .filter(name => name && name.trim().length > 0); this.fnTagMap = {}; data.forEach(item => { if (item.id && item.fnname) { this.fnTagMap[item.id] = item.fnname; } }); } catch (error) { console.error('获取人物标签失败:', error); alert('人物标签数据加载失败,高亮功能不可用'); } }, escapeHtml(unsafe) { if (!unsafe) return ''; return unsafe .replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g, """) .replace(/'/g, "'"); }, escapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }, setupAutoSave() { this.clearAutoSave(); this.autoSaveTimer = setInterval(() => { if (this.content || this.submittedId) { console.log('自动保存状态...'); this.saveState(); } }, this.autoSaveInterval); }, clearAutoSave() { if (this.autoSaveTimer) { clearInterval(this.autoSaveTimer); this.autoSaveTimer = null; } }, debouncedSaveState() { this.clearAutoSave(); this.autoSaveTimer = setTimeout(() => { this.saveState(); this.setupAutoSave(); }, 2000); }, saveState() { const state = { version: this.stateVersion, content: this.content, submittedId: this.submittedId, formData: this.formData, showRawHtml: this.showRawHtml, currentDnTags: this.currentDnTags, currentMnTags: this.currentMnTags, currentSnTags: this.currentSnTags, currentPnTags: this.currentPnTags, currentFnTags: this.currentFnTags, timestamp: new Date().getTime() }; if (this.content.length > 2000) { try { state.compressed = true; state.content = LZString.compressToUTF16(this.content); } catch (e) { console.error('压缩失败,使用原始数据', e); state.compressed = false; } } sessionStorage.setItem('medicalRecordState', JSON.stringify(state)); }, restoreState() { const savedState = sessionStorage.getItem('medicalRecordState'); if (!savedState) return; try { const state = JSON.parse(savedState); if (state.version !== this.stateVersion) { console.warn('状态版本不匹配,跳过恢复'); return; } let content = state.content; if (state.compressed) { try { content = LZString.decompressFromUTF16(content); } catch (e) { console.error('解压失败,使用原始数据', e); } } this.content = content; this.submittedId = state.submittedId; this.showRawHtml = state.showRawHtml; this.currentDnTags = state.currentDnTags || []; this.currentMnTags = state.currentMnTags || []; this.currentSnTags = state.currentSnTags || []; this.currentPnTags = state.currentPnTags || []; this.currentFnTags = state.currentFnTags || []; this.formData = state.formData || { mrname: "", mrorigin: "", mrdoctor: "", mrposter: "" }; console.log('医案状态已恢复'); } catch (e) { console.error('状态恢复失败', e); sessionStorage.removeItem('medicalRecordState'); } }, clearState() { sessionStorage.removeItem('medicalRecordState'); }, toggleDisplayFormat() { this.showRawHtml = !this.showRawHtml; this.saveState(); }, async fetchDNTags() { try { const response = await fetch('DNTag/?format=json'); const data = await response.json(); this.dnTags = data .map(item => item.dnname) .filter(name => name && name.trim().length > 0); this.dnTagMap = {}; data.forEach(item => { if (item.id && item.dnname) { this.dnTagMap[item.id] = item.dnname; } }); } catch (error) { console.error('获取标签失败:', error); alert('标签数据加载失败,高亮功能不可用'); } }, async fetchMNTags() { try { const response = await fetch('MNTag/?format=json'); const data = await response.json(); this.mnTags = data .map(item => item.mnname) .filter(name => name && name.trim().length > 0); this.mnTagMap = {}; data.forEach(item => { if (item.id && item.mnname) { this.mnTagMap[item.id] = item.mnname; } }); } catch (error) { console.error('获取草本标签失败:', error); alert('草本标签数据加载失败,高亮功能不可用'); } }, async fetchById() { if (!this.fetchId) { alert('請輸入有效的醫案ID'); return; } try { const response = await fetch(`MRInfo/${this.fetchId}/?format=json`); if (response.ok) { const data = await response.json(); this.formData = { mrname: data.mrname || '', mrorigin: data.mrorigin || '', mrdoctor: data.mrdoctor || '', mrposter: data.mrposter || '' }; this.content = data.mrcase || ''; this.submittedId = data.id; this.fetchId = null; if (data.dntag && Array.isArray(data.dntag)) { this.currentDnTags = data.dntag.map(id => this.dnTagMap[id] || `未知標籤(${id})` ); } else { this.currentDnTags = []; } if (data.mntag && Array.isArray(data.mntag)) { this.currentMnTags = data.mntag.map(id => this.mnTagMap[id] || `未知草本(${id})` ); } else { this.currentMnTags = []; } if (data.sntag && Array.isArray(data.sntag)) { this.currentSnTags = data.sntag.map(id => this.snTagMap[id] || `未知典籍(${id})` ); } else { this.currentSnTags = []; } if (data.pntag && Array.isArray(data.pntag)) { this.currentPnTags = data.pntag.map(id => this.pnTagMap[id] || `未知方劑(${id})` ); } else { this.currentPnTags = []; } if (data.fntag && Array.isArray(data.fntag)) { this.currentFnTags = data.fntag.map(id => this.fnTagMap[id] || `未知人物(${id})` ); } else { this.currentFnTags = []; } await this.fetchDNTags(); await this.fetchMNTags(); await this.fetchSNTags(); await this.fetchPNTags(); await this.fetchFNTags(); this.saveState(); alert('醫案數據加載成功!'); } else if (response.status === 404) { alert('未找到該ID的醫案'); } else { throw new Error('獲取醫案失敗'); } } catch (error) { console.error('Error:', error); alert(`獲取醫案失敗: ${error.message}`); } }, async submitContent() { const postData = { mrcase: this.content, mrname: this.formData.mrname, mrorigin: this.formData.mrorigin, mrdoctor: this.formData.mrdoctor, mrposter: this.formData.mrposter }; try { const response = await fetch('MRInfo/?format=json', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }); if (response.ok) { const data = await response.json(); this.submittedId = data.id; if (data.dntag && Array.isArray(data.dntag)) { this.currentDnTags = data.dntag.map(id => this.dnTagMap[id] || `未知標籤(${id})` ); } else { this.currentDnTags = []; } if (data.mntag && Array.isArray(data.mntag)) { this.currentMnTags = data.mntag.map(id => this.mnTagMap[id] || `未知草本(${id})` ); } else { this.currentMnTags = []; } if (data.sntag && Array.isArray(data.sntag)) { this.currentSnTags = data.sntag.map(id => this.snTagMap[id] || `未知典籍(${id})` ); } else { this.currentSnTags = []; } if (data.pntag && Array.isArray(data.pntag)) { this.currentPnTags = data.pntag.map(id => this.pnTagMap[id] || `未知方劑(${id})` ); } else { this.currentPnTags = []; } if (data.fntag && Array.isArray(data.fntag)) { this.currentFnTags = data.fntag.map(id => this.fnTagMap[id] || `未知人物(${id})` ); } else { this.currentFnTags = []; } this.saveState(); alert('醫案提交成功!'); } else { throw new Error('提交失败'); } } catch (error) { console.error('Error:', error); alert(`提交失败: ${error.message}`); } }, async updateContent() { if (!this.submittedId) return; const postData = { mrcase: this.content, mrname: this.formData.mrname, mrorigin: this.formData.mrorigin, mrdoctor: this.formData.mrdoctor, mrposter: this.formData.mrposter }; try { const response = await fetch(`MRInfo/${this.submittedId}/?format=json`, { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }); if (response.ok) { const data = await response.json(); if (data.dntag && Array.isArray(data.dntag)) { this.currentDnTags = data.dntag.map(id => this.dnTagMap[id] || `未知標籤(${id})` ); } if (data.mntag && Array.isArray(data.mntag)) { this.currentMnTags = data.mntag.map(id => this.mnTagMap[id] || `未知草本(${id})` ); } if (data.sntag && Array.isArray(data.sntag)) { this.currentSnTags = data.sntag.map(id => this.snTagMap[id] || `未知典籍(${id})` ); } if (data.pntag && Array.isArray(data.pntag)) { this.currentPnTags = data.pntag.map(id => this.pnTagMap[id] || `未知方劑(${id})` ); } if (data.fntag && Array.isArray(data.fntag)) { this.currentFnTags = data.fntag.map(id => this.fnTagMap[id] || `未知人物(${id})` ); } this.saveState(); alert('醫案更新成功!'); } else { throw new Error('更新失败'); } } catch (error) { console.error('Error:', error); alert(`更新失败: ${error.message}`); } }, async deleteContent() { if (!this.submittedId) return; if (!confirm('確定要刪除這個醫案嗎?')) return; try { const response = await fetch(`MRInfo/${this.submittedId}/?format=json`, { method: 'DELETE', headers: { 'Content-Type': 'application/json', } }); if (response.ok) { this.clearState(); this.resetAll(); alert('醫案刪除成功!'); } else { throw new Error('刪除失败'); } } catch (error) { console.error('Error:', error); alert(`刪除失败: ${error.message}`); } } } }; </script> <style scoped> .wangeditor { flex: 1; padding: 10px; overflow-y: auto; } .up-panel { position: fixed; top: 55px; right: 0; width: 50%; height: 45%; padding: 0; overflow: hidden; background: #ffe6d4; display: block; } .tag-panel { width: 80%; height: 100%; background: lightyellow; padding: 10px; overflow-y: auto; display: none; z-index: 100; } .crud-buttons { position: absolute; top: 0; right: 0; display: flex; flex-direction: column; z-index: 101; gap: 5px; } .fixed-dncrud-btn { background-color: #EF6C00; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; width: 120px; text-align: center; } .fixed-dncrud-btn:hover { background-color: #E65100; } .fixed-mncrud-btn { background-color: #2E7D32; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; width: 120px; text-align: center; } .fixed-mncrud-btn:hover { background-color: #1B5E20; } .fixed-sncrud-btn { background-color: #1976D2; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; width: 120px; text-align: center; } .fixed-sncrud-btn:hover { background-color: #0D47A1; } .fixed-pncrud-btn { background-color: #8A2BE2; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; width: 120px; text-align: center; } .fixed-pncrud-btn:hover { background-color: #6A1B9A; } .fixed-fncrud-btn { background-color: #8B4513; color: white; border: none; padding: 8px 15px; border-radius: 4px; cursor: pointer; width: 120px; text-align: center; } .fixed-fncrud-btn:hover { background-color: #654321; } .right-panel { position: fixed; bottom: 45px; right: 0; width: 50%; height: 43%; background: lightblue; padding: 1px; z-index: 100; overflow-y: auto; } .dntag-display { display: flex; margin-top: 1px; padding: 10px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .mntag-display { display: flex; margin-top: 10px; padding: 10px; background: #f0f9eb; border: 1px solid #e1f3d8; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .sntag-display { display: flex; margin-top: 10px; padding: 10px; background: #e3f2fd; border: 1px solid #bbdefb; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .pntag-display { display: flex; margin-top: 10px; padding: 10px; background: #f3e5f5; border: 1px solid #e1bee7; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .fntag-display { display: flex; margin-top: 10px; padding: 10px; background: #f5f0e6; border: 1px solid #d2b48c; border-radius: 5px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .field-name { font-weight: bold; min-width: 80px; color: #495057; font-size: 1rem; } .dntag-value, .mntag-value, .sntag-value, .pntag-value, .fntag-value { flex-grow: 1; padding-left: 10px; } .dntag-value { border-left: 2px solid #ffc107; } .mntag-value { border-left: 2px solid #4CAF50; } .sntag-value { border-left: 2px solid #2196F3; } .pntag-value { border-left: 2px solid #8A2BE2; } .fntag-value { border-left: 2px solid #8B4513; } .dn-tag { color: rgb(212, 107, 8); font-weight: bold; margin-right: 2px; } .mn-tag { color: rgb(0, 128, 0); font-weight: bold; margin-right: 2px; } .sn-tag { color: rgb(51, 102, 255); font-weight: bold; margin-right: 2px; } .pn-tag { color: rgb(138, 43, 226); font-weight: bold; margin-right: 2px; } .fn-tag { color: rgb(139, 69, 19); font-weight: bold; margin-right: 2px; } .content-display { position: fixed; top: 350px; left: 0; width: 50%; height: 60%; bottom: 45px; z-index: 999; background-color: white; overflow-y: auto; padding: 10px; border: 1px solid #eee; white-space: pre-wrap; } .sticky-footer { display: flex; justify-content: flex-start; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffd800ff; z-index: 999; padding: 10px 20px; box-sizing: border-box; flex-wrap: wrap; } .sticky-footer > span { margin-left: 5px; display: flex; align-items: center; } .submitted-id { padding: 2px; background-color: #e2f0fd; color: #004085; border-radius: 4px; } .reset-btn { margin-left: 10px; padding: 2px; background-color: #dc3545; border: none; color: white; border-radius: 4px; cursor: pointer; } .reset-btn:hover { background-color: #c82333; } .id-input { display: flex; align-items: center; } .id-input input { width: 100px; padding: 2px 5px; margin-right: 5px; border: 1px solid #ccc; border-radius: 4px; } .submit-btn { background-color: #28a745; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer; } .update-btn { background-color: #007bff; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer; } .delete-btn { background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer; } .submit-btn:hover { background-color: #218838; } .update-btn:hover { background-color: #0069d9; } .delete-btn:hover { background-color: #c82333; } .form-input { margin-right: 10px; } .name-input, .origin-input, .doctor-input, .poster-input { padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; width: 150px; } </style> mrdncrud: <template> <div class="dncrud-container"> <div class="dncrud-controls"> <input v-model="searchQuery" placeholder="搜索病態名稱..." class="search-input" @input="filterDNTags" /> </div> <!-- 创建表单 --> <div class="form-section"> <form @submit.prevent="createDNTag" class="create-form"> <input v-model="newDNTag.dnname" placeholder="輸入新病態名稱" required class="form-input" :disabled="isLoading" /> <button type="submit" class="form-btn create-btn" :disabled="isLoading">創建</button> </form> </div> <div class="dncrud-content"> <div v-if="isLoading" class="loading"> <div class="loading-spinner"></div> <span>加載中...</span> </div> <div v-else> <!-- 标签列表 --> <div class="dncrud-list" v-if="filteredTags.length > 0"> <div v-for="tag in filteredTags" :key="tag.id" class="dncrud-item"> <div class="tag-info"> <span class="tag-id">ID: {{ tag.id }}</span> <span class="tag-name">{{ tag.dnname }}</span> </div> <div class="tag-actions"> <button @click="editDNTag(tag)" class="action-btn edit-btn">編輯</button> <button @click="deleteDNTag(tag.id)" class="action-btn delete-btn">刪除</button> </div> </div> </div> <div v-else class="no-tags"> 沒有找到匹配的病態標籤 </div> </div> </div> <!-- 编辑模态框 --> <div v-if="editingTag" class="edit-modal"> <div class="modal-content"> <h3>編輯病態名稱</h3> <form @submit.prevent="updateDNTag"> <input v-model="editingTag.dnname" required class="form-input" :disabled="isLoading" /> <div class="modal-actions"> <button type="submit" class="form-btn save-btn">保存</button> <button type="button" @click="cancelEdit" class="form-btn cancel-btn">取消</button> </div> </form> </div> </div> </div> </template> <script> export default { name: 'mrdncrud', data() { return { dnTags: [], filteredTags: [], searchQuery: '', newDNTag: { dnname: '' }, editingTag: null, isLoading: false }; }, methods: { async fetchDNTags() { this.isLoading = true; try { const response = await fetch('DNTag/?format=json'); if (!response.ok) throw new Error('获取数据失败'); this.dnTags = await response.json(); this.filterDNTags(); } catch (error) { console.error('获取病态标签失败:', error); alert('加载数据失败,请重试'); } finally { this.isLoading = false; } }, filterDNTags() { const query = this.searchQuery.trim().toLowerCase(); if (!query) { this.filteredTags = [...this.dnTags]; } else { this.filteredTags = this.dnTags.filter(tag => tag.dnname.toLowerCase().includes(query) || tag.id.toString().includes(query) ); } }, async createDNTag() { if (!this.newDNTag.dnname.trim()) { alert('病态名称不能为空'); return; } this.isLoading = true; try { const response = await fetch('DNTag/?format=json', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.newDNTag), }); if (!response.ok) throw new Error('创建失败'); await this.fetchDNTags(); this.newDNTag.dnname = ''; this.$emit('tag-updated'); // 通知父组件标签已更新 } catch (error) { console.error('创建病态标签失败:', error); alert(error.message); } finally { this.isLoading = false; } }, editDNTag(tag) { this.editingTag = { ...tag }; }, async updateDNTag() { if (!this.editingTag.dnname.trim()) { alert('病态名称不能为空'); return; } this.isLoading = true; try { const response = await fetch(`DNTag/${this.editingTag.id}/?format=json`, { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.editingTag), }); if (!response.ok) throw new Error('更新失败'); await this.fetchDNTags(); this.editingTag = null; this.$emit('tag-updated'); // 通知父组件标签已更新 } catch (error) { console.error('更新病态标签失败:', error); alert(error.message); } finally { this.isLoading = false; } }, cancelEdit() { this.editingTag = null; }, async deleteDNTag(id) { if (!confirm('确定要删除这个病态标签吗?')) return; this.isLoading = true; try { const response = await fetch(`DNTag/${id}/?format=json`, { method: 'DELETE' }); if (!response.ok) throw new Error('删除失败'); await this.fetchDNTags(); this.$emit('tag-updated'); // 通知父组件标签已更新 } catch (error) { console.error('删除病态标签失败:', error); alert(error.message); } finally { this.isLoading = false; } } }, mounted() { this.fetchDNTags(); } }; </script> <style scoped> .dncrud-container { height: 100%; display: flex; flex-direction: column; } .dncrud-controls { padding: 10px; background: #f5f5f5; border-bottom: 1px solid #ddd; } .search-input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .dncrud-content { flex: 1; overflow-y: auto; padding: 10px; } .form-section { padding: 10px; background: #f5f5f5; border-bottom: 1px solid #ddd; } .create-form { display: flex; gap: 10px; } .form-input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .form-btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; } .create-btn { background-color: #4CAF50; color: white; } .dncrud-list { display: flex; flex-direction: column; gap: 10px; } .dncrud-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: white; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .tag-info { display: flex; flex-direction: column; } .tag-id { font-size: 0.8rem; color: #666; } .tag-name { font-weight: 500; } .tag-actions { display: flex; gap: 5px; } .action-btn { padding: 5px 10px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; } .edit-btn { background-color: #2196F3; color: white; } .delete-btn { background-color: #f44336; color: white; } .no-tags { padding: 20px; text-align: center; color: #666; font-style: italic; } .edit-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background: white; padding: 20px; border-radius: 8px; width: 90%; max-width: 400px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; } .save-btn { background-color: #4CAF50; color: white; } .cancel-btn { background-color: #9E9E9E; color: white; } .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .loading-spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top: 4px solid #3498db; width: 30px; height: 30px; animation: spin 1s linear infinite; margin-bottom: 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>
08-03
<template> <view class="chat-container"> <!-- 消息列表区域 --> <view class="message-list" ref="messageList"> <view v-for="(message, index) in messages" :key="index" :class="['message', message.isUser ? 'user-message' : 'system-message']"> <!-- 用户消息 --> <view v-if="message.isUser" class="message-content"> <view class="avatar user-avatar">👤</view> <view class="bubble"> <p>{{ message.content }}</p> <view v-if="message.taskId" class="task-info"> <span class="tag">{{ message.type === 'image' ? '图片生成' : '视频生成' }}</span> <span class="status" :class="message.status">{{ getStatusText(message.status) }}</span> </view> </view> </view> <!-- 系统消息 --> <view v-else class="message-content"> <view class="avatar system-avatar">🤖</view> <view class="bubble"> <!-- 生成状态 --> <view v-if="message.status === 'pending'" class="generating"> <view class="loading-spinner"></view> <p>正在生成{{ message.type === 'image' ? '图片' : '视频' }},请稍候...</p> </view> <!-- 生成结果 --> <view v-if="message.status === 'completed'"> <view v-if="message.type === 'image'"> <image style="width: 50rpx; height: 50rpx;" :src="message.url" alt="生成的图片" @click="previewImage(message.url)" /> <p class="hint">点击图片查看大图</p> </view> <view v-else-if="message.type === 'video'"> <video controls :src="message.url"></video> <p class="hint">视频生成完成</p> </view> </view> <!-- 错误提示 --> <view v-if="message.status === 'error'" class="error-message"> <p>⚠️ 生成失败: {{ message.error }}</p> </view> </view> </view> </view> </view> <!-- 输入区域 --> <view class="input-area"> <textarea v-model="inputText" placeholder="输入描述文字..." @keyup.enter="sendMessage"></textarea> <view class="action-buttons"> <button @click="generateImage" :disabled="!inputText.trim()">生成图片</button> <button @click="generateVideo" :disabled="!inputText.trim()">生成视频</button> </view> </view> <!-- 任务队列悬浮窗 --> <view class="task-queue" v-if="taskQueue.length > 0"> <h4>生成队列 ({{ processingTask ? '处理中' : '等待中' }})</h4> <ul> <li v-for="(task, index) in taskQueue" :key="task.id" :class="['task-item', index === 0 && processingTask ? 'processing' : '']"> <span class="task-type">{{ task.type === 'image' ? '🖼️' : '🎬' }}</span> <span class="task-prompt">{{ task.prompt }}</span> <span class="task-status">{{ getQueueStatus(index) }}</span> </li> </ul> </view> </view> </template> <script> export default { data() { return { inputText: '', messages: [], taskQueue: [], processingTask: null, nextTaskId: 1 }; }, mounted() { // 添加初始欢迎消息 this.addSystemMessage('欢迎使用AI生成助手!请描述您想要生成的图片或视频内容。'); }, methods: { // 添加用户消息 addUserMessage(content, type) { this.messages.push({ id: Date.now(), isUser: true, content, type, status: 'queued', taskId: this.nextTaskId++ }); this.scrollToBottom(); }, // 添加系统消息 addSystemMessage(content, type = 'text', status = 'completed') { this.messages.push({ id: Date.now(), isUser: false, content, type, status }); this.scrollToBottom(); }, // 滚动到底部 scrollToBottom() { this.$nextTick(() => { const container = this.$refs.messageList; container.scrollTop = container.scrollHeight; }); }, // 生成图片 generateImage() { if (!this.inputText.trim()) return; const prompt = this.inputText.trim(); this.inputText = ''; // 添加用户消息 this.addUserMessage(prompt, 'image'); // 添加到任务队列 this.addToQueue({ type: 'image', prompt, taskId: this.nextTaskId - 1 }); }, // 生成视频 generateVideo() { if (!this.inputText.trim()) return; const prompt = this.inputText.trim(); this.inputText = ''; // 添加用户消息 this.addUserMessage(prompt, 'video'); // 添加到任务队列 this.addToQueue({ type: 'video', prompt, taskId: this.nextTaskId - 1 }); }, // 添加到任务队列 addToQueue(task) { this.taskQueue.push(task); // 添加系统提示消息 this.addSystemMessage(`您的${task.type === 'image' ? '图片' : '视频'}生成任务已加入队列`, 'text'); // 如果没有正在处理的任务,开始处理 if (!this.processingTask) { this.processQueue(); } }, // 处理任务队列 async processQueue() { if (this.taskQueue.length === 0) { this.processingTask = null; return; } // 获取第一个任务 this.processingTask = this.taskQueue[0]; // 更新消息状态为处理中 this.updateMessageStatus(this.processingTask.taskId, 'pending'); try { // 模拟生成过程(实际应调用API) const result = await this.generateContent(this.processingTask); // 添加系统结果消息 this.addSystemMessage(result.url, this.processingTask.type, 'completed'); // 更新消息状态为完成 this.updateMessageStatus(this.processingTask.taskId, 'completed'); // 从队列中移除已完成任务 this.taskQueue.shift(); // 处理下一个任务 this.processQueue(); } catch (error) { // 添加错误消息 this.addSystemMessage(`生成失败: ${error.message}`, 'text', 'error'); // 更新消息状态为错误 this.updateMessageStatus(this.processingTask.taskId, 'error', error.message); // 从队列中移除失败任务 this.taskQueue.shift(); // 处理下一个任务 this.processQueue(); } }, // 更新消息状态 updateMessageStatus(taskId, status, error = '') { const message = this.messages.find(m => m.taskId === taskId); if (message) { message.status = status; if (error) message.error = error; } }, // 生成内容(模拟) generateContent(task) { return new Promise((resolve, reject) => { // 模拟API调用延迟 setTimeout(() => { if (Math.random() > 0.1) { // 90%成功率 resolve({ url: task.type === 'image' ? `https://picsum.photos/400/300?random=${Math.floor(Math.random() * 1000)}` : 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4' }); } else { reject(new Error('AI生成服务暂时不可用')); } }, task.type === 'image' ? 3000 : 6000); // 图片3秒,视频6秒 }); }, // 预览图片 previewImage(url) { // 实际项目中应使用图片预览组件 window.open(url, '_blank'); }, // 获取状态文本 getStatusText(status) { const statusMap = { queued: '队列中', pending: '生成中', completed: '已完成', error: '失败' }; return statusMap[status] || status; }, // 获取队列状态 getQueueStatus(index) { if (index === 0 && this.processingTask) return '处理中'; return `等待 ${index}`; } } }; </script> <style scoped> .chat-container { display: flex; flex-direction: column; height: 100vh; max-width: 800px; margin: 0 auto; background-color: #f0f2f5; position: relative; } .message-list { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 15px; } .message-content { display: flex; max-width: 80%; } .user-message .message-content { margin-left: auto; flex-direction: row-reverse; } .system-message .message-content { margin-right: auto; } .avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; margin: 0 10px; } .user-avatar { background-color: #1890ff; color: white; } .system-avatar { background-color: #52c41a; color: white; } .bubble { padding: 12px 15px; border-radius: 18px; position: relative; max-width: 100%; word-break: break-word; } .user-message .bubble { background-color: #1890ff; color: white; border-bottom-right-radius: 5px; } .system-message .bubble { background-color: white; color: #333; border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .task-info { margin-top: 8px; font-size: 0.8em; opacity: 0.8; display: flex; align-items: center; gap: 8px; } .tag { background: rgba(255, 255, 255, 0.2); padding: 2px 6px; border-radius: 4px; } .status { padding: 2px 6px; border-radius: 4px; } .status.queued { background-color: #f0f0f0; color: #666; } .status.pending { background-color: #e6f7ff; color: #1890ff; } .status.completed { background-color: #f6ffed; color: #52c41a; } .status.error { background-color: #fff2f0; color: #ff4d4f; } .generating { display: flex; align-items: center; gap: 10px; } .loading-spinner { width: 20px; height: 20px; border: 3px solid rgba(0, 0, 0, 0.1); border-top-color: #1890ff; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .input-area { padding: 15px; background-color: white; border-top: 1px solid #e8e8e8; border-radius: 15px; } textarea { width: 95%; min-height: 60px; padding: 10px; border: 1px solid #d9d9d9; border-radius: 4px; resize: none; font-family: inherit; border-radius: 15px; } .action-buttons { display: flex; gap: 10px; margin-top: 10px; } button { flex: 1; /* padding: 10px; */ background-color: #1890ff; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } button:disabled { background-color: #bfbfbf; cursor: not-allowed; } button:hover:not(:disabled) { background-color: #40a9ff; } .task-queue { position: absolute; top: 80rpx; right: 20px; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); padding: 15px; max-width: 300px; z-index: 100; } .task-queue h4 { margin-top: 0; margin-bottom: 10px; color: #333; } .task-item { padding: 8px 0; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; gap: 10px; } .task-item:last-child { border-bottom: none; } .task-type { font-size: 1.2em; } .task-prompt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .task-status { font-size: 0.85em; color: #666; } .task-item.processing .task-status { color: #1890ff; font-weight: bold; } image, video { max-width: 100%; border-radius: 8px; display: block; margin-top: 5px; } video { max-width: 400px; } .hint { font-size: 0.8em; color: #666; margin-top: 5px; } .error-message { color: #ff4d4f; } </style> 你看看 为什么系统消息有一个空的气泡 就是我点击生成图片之后生成成功就会出现一个 开始没有发消息也出现了一个 解决一下
最新发布
08-05
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值